我一直在使用 Vite 和 React 开发 Chrome 扩展程序,直到最近一切都运行正常。我没有做任何更改,但现在我收到内容安全策略 (CSP) 错误,导致脚本无法加载。
这是我在控制台中收到的错误消息:
Refused to load the script 'chrome-extension://5216f022-cd78-49fc-abf9-9e362fc1640f/assets/content-script-preamble.js.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.
这是我的manifest.json:
{
"manifest_version": 3,
"name": "CRXJS React Vite Example",
"version": "1.0.0",
"action": { "default_title": "Tags New", "default_popup": "index.html" },
"permissions": ["storage", "webNavigation", "tabs", "scripting", "cookies", "activeTab"],
"background": {
"service_worker": "src/background.js"
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'"
},
"content_scripts": [
{
"js": ["src/content.jsx"],
"matches": ["<all_urls>"],
"run_at": "document_idle"
}
],
"host_permissions": [
"http://localhost:3001/*",
"https://tagdots.vercel.app/*"
],
"web_accessible_resources": [
{
"resources": ["images/cursor-custom.png", "images/icon32.png"],
"matches": ["<all_urls>"]
}
],
"icons": {
"16": "images/icon32.png",
"32": "images/icon32.png",
"48": "images/icon64.png",
"128": "images/icon64.png"
}
}
错误消息似乎表明脚本 chrome-extension://5216f022-cd78-49fc-abf9-9e362fc1640f/assets/content-script-preamble.js.js 因违反 CSP 而被阻止。但是,我最近没有对清单或代码进行任何更改。
一些额外的背景信息:
- 该扩展使用 Vite 和 React。
- 该错误突然出现,而该扩展之前运行正常。
- 除了扩展内的脚本之外,我没有明确加载任何外部脚本。
- 我的 CSP 目前允许 script-src 下的“self”和“wasm-unsafe-eval”。
- 我尝试调试这个问题但似乎无法确定是什么原因导致了这个问题。
我的问题:
- 如果我的扩展程序没有任何变化,那么此错误可能是什么原因造成的?
- 我该如何解决 CSP 问题以使脚本正确加载?
- 任何帮助或指点都将不胜感激。谢谢!
3
最佳答案
1
下面讨论的问题似乎是自 Chrome 130 以来出现的问题。可以通过将 @crxjs/vite-plugin 升级到版本 ^2.0.0-beta.26 来解决。
1
-
这帮我解决了这个问题,谢谢!
–
|
"use_dynamic_url":true
,则将其删除。–
–
–
|