Chrome扩展background.js POST请求执行及CSP问题求助

核心问题拆解 #

1. Isolated World 场景：Content Script 与 Background 环境完全隔离，无法直接访问 Background 中定义的 onPostSuccess 等方法；console.log('script returned:', response) 未执行是因为 executeScript 返回的 Promise 可能因请求失败被 reject，但代码未捕获异常，且 Content Script 的日志输出在页面控制台（而非 Background 控制台）。
2. MAIN World 场景：MAIN World 属于页面自身的执行上下文，受页面自带的 CSP（内容安全策略）限制，扩展无法修改页面的 CSP，因此发起请求会被拦截。

解决方案 #

方案一：直接在 Background 中发起 POST 请求（推荐） #

无需注入 Content Script，直接在 Background 环境中发起请求，既避开环境隔离问题，也不受页面 CSP 限制（仅需配置扩展自身的 CSP）。

修改代码

async function submitResume(tabId, jsonData) {
    console.log("发送 POST 请求，数据: ", jsonData);
    try {
        const response = await fetch(POST_CV_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8',
            },
            body: JSON.stringify(jsonData)
        });
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        const responseText = await response.text();
        console.log('请求返回结果:', responseText);
        // 直接调用 Background 中的处理方法
        onPostSuccess(responseText);
        console.log('POST 请求成功');
    } catch (error) {
        console.error('POST 请求失败:', error);
    }
}

// Background 中定义的处理方法
function onPostSuccess(response) {
    // 此处写你的响应处理逻辑
    console.log('处理成功响应:', response);
}

配置 Manifest

• 若使用 Manifest V3：

"content_security_policy": {
  "extension_pages": "default-src 'self'; connect-src http://localhost:5173;"
}

• 若使用 Manifest V2：

"content_security_policy": "default-src 'self'; connect-src http://localhost:5173;"

方案二：在 Isolated World 中发请求，通过消息传递回 Background 处理 #

若必须在 Content Script 中发起请求（比如需要页面的 Cookie 或其他上下文信息），可在 Isolated World 中执行请求，再通过 Chrome 扩展的消息 API 将结果传回 Background 处理。

修改代码

async function submitResume(tabId, jsonData) {
    console.log("执行 Content Script，数据: ", jsonData);
    try {
        await chrome.scripting.executeScript({
            target: {tabId},
            func: postJsonAndSendMessage,
            args: [POST_CV_URL, jsonData],
            world: "ISOLATED" // 默认值，可省略
        });
        console.log('Content Script 执行成功');
    } catch (error) {
        console.error('Content Script 执行失败:', error);
    }
}

function postJsonAndSendMessage(url, jsonData) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.send(JSON.stringify(jsonData));

    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log('XHR 请求成功:', xhr);
                // 发送成功消息到 Background
                chrome.runtime.sendMessage({
                    type: 'POST_SUCCESS',
                    response: xhr.responseText
                });
            } else {
                console.error('XHR 请求失败:', xhr.statusText);
                // 发送失败消息到 Background
                chrome.runtime.sendMessage({
                    type: 'POST_FAILURE',
                    error: xhr.statusText
                });
            }
        }
    }
}

// Background 中监听消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'POST_SUCCESS') {
        onPostSuccess(message.response);
    } else if (message.type === 'POST_FAILURE') {
        console.error('请求失败:', message.error);
        // 此处写失败处理逻辑
    }
});

function onPostSuccess(response) {
    // 处理成功响应的逻辑
    console.log('Background 处理成功响应:', response);
}

配置 Manifest

同方案一，需配置扩展的 CSP 允许向 http://localhost:5173 发起请求。

关键说明 #

• Isolated World 与 Background 是完全隔离的执行环境，不能直接调用对方的函数，必须通过 chrome.runtime.sendMessage/chrome.runtime.onMessage 进行通信。
• Content Script 的 console.log 输出在页面控制台（打开 F12 后，在控制台的上下文选择器中找到你的扩展），而非 Background 控制台。
• MAIN World 受页面自身 CSP 限制，扩展无法修改页面的 CSP，因此不适合用于发起跨域请求。

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