通过Chrome扩展注入AJAX请求遇CSP限制错误求助

嘿，这个问题我太熟了——本质就是你的内容脚本跑在LinkedIn的页面上下文里，被它严格的内容安全策略（CSP）给限制住了。直接在内容脚本里发请求到http://127.0.0.1:5005/肯定不行，因为LinkedIn的connect-src指令里根本没把这个本地地址加进去。不过咱们有几种靠谱的解法，看你用的是Manifest V2还是V3：

核心思路：用扩展后台脚本做代理 #

扩展的后台脚本（或Manifest V3里的Service Worker）运行在扩展独立的上下文中，完全不受目标网站的CSP约束。所以我们可以让内容脚本把请求“委托”给后台脚本，由后台去调用本地服务，再把结果返回给内容脚本。

方案1：Manifest V2 实现步骤 #

1. 编写内容脚本（content.js）

内容脚本只负责把请求参数发给后台，不直接发起AJAX：

// 准备要发送给本地服务的数据
const requestPayload = {
  // 你的请求数据，比如：
  userId: "123",
  action: "getUserData"
};

// 向后台脚本发送消息
chrome.runtime.sendMessage({
  type: "LOCAL_API_CALL",
  url: "http://127.0.0.1:5005/",
  payload: requestPayload
}, (response) => {
  if (response.error) {
    console.error("调用本地服务失败:", response.error);
    return;
  }
  // 处理返回的结果
  console.log("本地服务返回数据:", response.data);
});

2. 编写后台脚本（background.js）

后台脚本负责实际发起请求，并把结果返回给内容脚本：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "LOCAL_API_CALL") {
    // 发起请求到本地服务
    fetch(message.url, {
      method: "POST", // 根据你的需求改成GET/PUT等
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(message.payload)
    })
    .then(res => {
      if (!res.ok) throw new Error(`HTTP错误状态: ${res.status}`);
      return res.json();
    })
    .then(data => sendResponse({ data }))
    .catch(err => sendResponse({ error: err.message }));
    
    // 必须返回true，告诉Chrome我们要异步发送响应
    return true;
  }
});

3. 更新manifest.json配置

确保添加了必要的权限和脚本声明：

{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.linkedin.com/*"], // 匹配LinkedIn所有页面
      "js": ["content.js"]
    }
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "http://127.0.0.1:5005/", // 允许访问本地服务
    "*://*.linkedin.com/*"
  ]
}

方案2：Manifest V3 实现步骤 #

V3用Service Worker代替了传统的后台脚本，代码逻辑类似，只是配置和写法稍有不同：

1. 内容脚本（content.js）

和V2的内容脚本完全一样，不用改。

2. 编写Service Worker（background.js）

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "LOCAL_API_CALL") {
    // 用async/await处理异步请求
    (async () => {
      try {
        const res = await fetch(message.url, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(message.payload)
        });
        if (!res.ok) throw new Error(`HTTP错误状态: ${res.status}`);
        const data = await res.json();
        sendResponse({ data });
      } catch (err) {
        sendResponse({ error: err.message });
      }
    })();
    // 返回true保持消息通道开放
    return true;
  }
});

3. 更新manifest.json配置

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.linkedin.com/*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [
    "http://127.0.0.1:5005/"
  ]
}

额外注意事项 #

• 确保本地服务（127.0.0.1:5005）已经启动，并且配置了CORS允许扩展的请求。如果是自己开发的本地服务，可以添加响应头：Access-Control-Allow-Origin: chrome-extension://<你的扩展ID>，或者直接允许所有源（开发环境下可以用*）。
• 如果你的请求是GET方法，记得去掉body参数，并把method改成"GET"。
• 修改完扩展代码后，一定要在Chrome扩展管理页面点击“重新加载”按钮，确保新的配置和脚本生效。

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