Content Security Policy Issue

[trungpv1601]

Anyone face with this issue in Google Chrome Canary v130

content-script-loader.chunk-1f004067.310380a0.js:7 Refused to load the script 'chrome-extension://xxx/assets/chunk-1f004067.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

TypeError: Failed to fetch dynamically imported module: chrome-extension://xxx/assets/chunk-1f004067.js

Make sure you use Google Chrome Canary v130

Thank you

[trungpv1601]

My solution for build production

remove chrome.runtime.getURL in content script

(function () {
  'use strict';

  (async () => {
    await import("./chunk-b674a675.js");
  })().catch(console.error);

})();

More Info here: crxjs/chrome-extension-tools#918

[masamaru0513]

@trungpv1601
Hello.
I was very anxious about this issue, but with the method you suggested,
I was able to get the extension working again without any problems. I appreciate it.

--
It is also necessary to add to web_accessible_resources.

  web_accessible_resources: [
    {
      resources: ['assets/chunk-xxx-.js'],
      matches: ['<all_urls>'],
    },
  ],

[trungpv1601]

@trungpv1601 Hello. I was very anxious about this issue, but with the method you suggested, I was able to get the extension working again without any problems. I appreciate it.

-- It is also necessary to add to web_accessible_resources.

  web_accessible_resources: [
    {
      resources: ['assets/chunk-xxx-.js'],
      matches: ['<all_urls>'],
    },
  ],

@masamaru0513

you can find the better solution here crxjs/chrome-extension-tools#918 (comment)

remove all "use_dynamic_url" in the manifest.json build

[masamaru0513]

I might be saying something strange due to my ignorance...
I think the provisional response to this issue is to delete use_dynamic_url and remove chrome.runtime.getURL in the content script.
However, what should I do about the problem where remove chrome.runtime.getURL reappears every time I run npm run dev and update the code?
Does this mean I need to rewrite it each time?

[trungpv1601]

I might be saying something strange due to my ignorance... I think the provisional response to this issue is to delete use_dynamic_url and remove chrome.runtime.getURL in the content script. However, what should I do about the problem where remove chrome.runtime.getURL reappears every time I run npm run dev and update the code? Does this mean I need to rewrite it each time?

you can follow this ticket: crxjs/chrome-extension-tools#918

they discuss and working on it for dev env

[masamaru0513]

Thank you. I will observe the discussion for a while. After these issues are fixed, will it be resolved if Mr. Guocaoyi's create-chrome-ext is also fixed? In any case, I really love using this create-chrome-ext, so I would be happy if it can be resolved. Thank you for the quick response @trungpv1601

[slc3a2]

only for the production environment

My solution: : In the build directory after run npm run build:

in manifest.json: update all items under web_accessible_resources to have use_dynamic_url set to false:

"web_accessible_resources": [
  {
    "use_dynamic_url": false
  },
  {
    "use_dynamic_url": false
  }
],

get more info: github issue #918 and chromium issue

[mordechaim]

Chrome 130 is now GA, which means every single chrome extension is now broken in production.

The solution I use is to manually edit the output manifest.json in the build to mark "use_dynamic_url": false, as @slc3a2 suggested.

---

EDIT: Updating @crxjs/vite-plugin fixed it for me

npm i @crxjs/[email protected]

[masamaru0513]

I also updated the version of crxjs itself, and both dev and production are working.

[slc3a2]

After I installed and run start：

npm i @crxjs/[email protected]
npm run start

i got an error:

failed to load config from /Users/liangqi/www/dimmer/vite.config.ts
error when starting dev server:
file:///Users/liangqi/www/dimmer/node_modules/@crxjs/vite-plugin/dist/index.mjs:14
import { createLogger, version } from 'vite';
                       ^^^^^^^
SyntaxError: Named export 'version' not found. The requested module 'vite' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vite';
const { createLogger, version } = pkg;

maybe I need to update vite, to which version?

[bcmcq]

@slc3a2 looks like ^3.2.11. I referenced that from the beta 28 release source code (https://github.com/crxjs/chrome-extension-tools/blob/0dac0e38cb8508ef2c861b84fd99ca78d5ef0565/packages/vite-plugin/package.json).

Fixed it for me.

[slc3a2]

@bcmcq

I installed vite@^3.2.11, and after npm run start, I got an error, seemed to be from nodejs:

Error: Cannot find module 'node:assert'

After this, I updated nodejs from v14.15.3 to v18.12.1 to solve this problem, thank you so much!