Content Security Issues

[HaNdTriX]

I am getting the following error:

when:

• bootstrapping via npm init @samrum/vite-plugin-web-extension@latest an manifest V3
• Loading the extension manually or using pnpm run serve:chrome

Additional Infos

• OS: MacOS
• Browser: Chrome Version 105.0.5195.102 (Official Build) (arm64) or Chrome Canary Version 107.0.5299.0 (Official Build) canary (arm64)
• Package: @samrum/vite-plugin-web-extension: 2.0.0
• Generated Manifest File:

{
  "author": "....",
  "description": "....",
  "name": "....",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "16": "icons/16.png",
      "19": "icons/19.png",
      "32": "icons/32.png",
      "38": "icons/38.png"
    },
    "default_popup": "src/entries/popup/index.html"
  },
  "background": {
    "service_worker": "serviceWorker.js",
    "type": "module"
  },
  "content_scripts": [
    {
      "js": [
        "src/entries/contentScript/primary/main.js"
      ],
      "matches": [
        "*://*/*"
      ]
    }
  ],
  "host_permissions": [
    "*://*/*"
  ],
  "icons": {
    "16": "icons/16.png",
    "19": "icons/19.png",
    "32": "icons/32.png",
    "38": "icons/38.png",
    "48": "icons/48.png",
    "64": "icons/64.png",
    "96": "icons/96.png",
    "128": "icons/128.png",
    "256": "icons/256.png",
    "512": "icons/512.png"
  },
  "options_ui": {
    "page": "src/entries/options/index.html",
    "open_in_tab": true
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'  http://localhost:5173; object-src 'self'"
  }
}

[samrum]

Unfortunately, due to an issue with chrome, dev mode won't work in manifest v3. You can only use watch and build.

There's been a chromium bug opened here for a while, but no confirmation or movement on it.

[HaNdTriX]

Thank you for your reply.

The issue

Afaik script-src-elem CSP strategies do not work in manifest 3.

Solution

Nevertheless Websocket connections to localhost will work with the following CSP:

File: manifest.json

{
    ...
    "content_security_policy": {
      "extension_pages": "script-src 'self' http://localhost;object-src 'self';"
    }
}

This means we could change the DevServer strategy by moving the reload functionality to the static part of the extension (before it was served via http://localhost:5173). This reload functionality will then connect to the devserver via WebSocket. Depending on the extension context we could change the reload strategy:

Reload Strategies

• Contentscripts: Use background.service_worker extension messaging and chrome.scripting.executeScript
• Extension Pages: (e.g. popup.js) chrome.runtime.reload() or HMR
• Serviceworker: chrome.runtime.reload(), HMR or Service Worker fetch proxy. (It is possible to connect to a Websocket server from the root scope of the serviceworker. Even though this is against the spec.)

[samrum]

The issue is that any content_security_policy.extension_pages definition won't be used at all. You can see in your original manifest that it's not using script-src-elem, so that's not the issue.

[samrum]

Per https://developer.chrome.com/docs/extensions/mv3/known-issues/ There's a properly tracked issue open here: https://bugs.chromium.org/p/chromium/issues/detail?id=1247690 that I believe will resolve this when fixed. Estimated timeline for it is: "Targeting Canary support before January, 2023"

[samrum]

Really exciting news! That linked issue has been fixed and is available since Chrome 110.0.5480.0!

I've confirmed the existing HMR solution works in manifest V3 on Chrome 111.0.5515.0! 🎉