Firefox扩展无法访问远程资源，Chrome正常，遇CSP connect-src错误

DevOps 小满

2026-7-6

问题分析与解决方案

你的问题核心在于：内容脚本（Content Script）运行在宿主页面B的上下文里，受页面B的CSP限制，而你配置的extension_pages CSP仅对扩展自身页面生效。Chrome对内容脚本的CSP宽松度更高，允许直接发起跨域请求，但Firefox严格遵循规则，所以出现了connect-src拦截错误。

正确解决思路：用后台脚本代理请求

后台脚本（Background Script/Service Worker）属于扩展的隔离上下文，不受宿主页面CSP约束，且host_permissions的授权是针对后台脚本生效的。通过内容脚本发消息给后台，由后台发起请求即可绕过页面CSP限制。

具体实现步骤

1. 更新内容脚本（发起请求的代码）

将原有的sendData函数改为向后台发送消息：

function sendData(body) {
    chrome.runtime.sendMessage(
        { action: "sendRequestHelp", payload: body },
        (response) => {
            if (chrome.runtime.lastError) {
                console.error(chrome.runtime.lastError);
                return;
            }
            // 这里可以处理后台返回的响应（如果需要）
            console.log("请求完成", response);
        }
    );
}

2. 添加后台脚本（处理请求逻辑）

新建background.js文件（如果是Manifest V3用Service Worker，V2用普通脚本）：

// 替换成你的服务器A实际地址
const API_URL = "https://your-server-A.com";

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "sendRequestHelp") {
        fetch(`${API_URL}/request-help`, {
            method: "PUT",
            body: JSON.stringify(message.payload),
            headers: {
                "Content-type": "application/json; charset=UTF-8"
            }
        })
        .then(res => res.json())
        .then(data => sendResponse(data))
        .catch(error => {
            console.error(error);
            sendResponse({ error: error.message });
        });
        // 保持消息通道开放，等待异步请求完成
        return true;
    }
});

3. 更新Manifest配置

确保后台脚本被正确注册，同时保留host_permissions：

{
    "manifest_version": 3,
    "host_permissions": ["<all_urls>"],
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": ["https://页面B的地址/*"], // 替换成实际的页面B匹配规则
            "js": ["你的内容脚本文件名.js"]
        }
    ]
    // 如果是Manifest V2，background字段改为：
    // "background": {
    //     "scripts": ["background.js"]
    // }
}

为什么之前的配置无效？

extension_pages的CSP规则仅适用于扩展自身的页面（如弹窗、选项页、后台页），对运行在宿主页面的内容脚本完全不生效。
Firefox对内容脚本的CSP限制更严格，不允许内容脚本绕过宿主页面的connect-src规则；而Chrome存在特殊处理，允许内容脚本直接使用扩展的权限发起请求。

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