Chrome Manifest V3扩展加载Supabase脚本遭CSP拦截问题求助

错误根源 #

你遇到的是**内容安全策略(CSP)**限制问题：Manifest V3默认的script-src指令仅允许加载扩展自身的脚本('self')，而你尝试从cdn.jsdelivr.net加载Supabase的JS库，违反了这个限制。

修复步骤 #

1. 修改manifest.json，添加CSP配置 #

在manifest的顶层添加content_security_policy字段，将cdn.jsdelivr.net加入允许的脚本源：

{
    "manifest_version": 3,
    "name": "My extension",
    "version": "0.0.1",
    "permissions": [
        "activeTab",
        "tabs",
        "identity"
    ],
    "content_security_policy": {
        "extension_pages": "script-src 'self' https://cdn.jsdelivr.net; object-src 'none'"
    },
    "background": {
        "service_worker": "app.js"
    },
    "action": {
        "default_title": "My extension",
        "default_popup": "popup.html",
        "default_icon": {
            "16": "/icons/16.png",
            "48": "/icons/48.png",
            "128": "/icons/128.png"
        }
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "css": [],
            "js": ["content.js"], // 注意：这里应为注入网页的脚本，不是popup.js
            "run_at": "document_end"
        }
    ],
    "host_permissions": [
        "https://*.supabase.co/*"
    ]
}

• extension_pages是Manifest V3中针对扩展自身页面（如弹窗、后台服务工作线程）的CSP配置项
• 将https://cdn.jsdelivr.net添加到script-src后，即可允许从该CDN加载脚本

2. 修正content_scripts配置错误 #

你的content_scripts中指定了popup.js，这是错误的：content_scripts是注入到目标网页的脚本，而popup.js应是在popup.html中引用的、属于扩展弹窗的脚本。建议将注入网页的脚本改名（比如content.js），避免逻辑混淆。

3. Supabase认证在Manifest V3中的注意事项 #

• 在后台服务工作线程中初始化Supabase时，因无DOM环境，需使用Supabase纯JS初始化方式，避免依赖浏览器DOM API
• 你已添加https://*.supabase.co/*的host_permissions，该配置正确，可确保扩展能向Supabase发送API请求
• 若需OAuth认证，可结合Manifest V3的identity权限与Chrome的identity.launchWebAuthFlow方法实现，注意在Supabase控制台配置正确的回调URL（格式为chrome-extension://<你的扩展ID>/callback.html）

内容的提问来源于stack exchange，提问作者noKeyboardsLeftToSmash