Chrome扩展访问自定义API遭LinkedIn CSP限制无法发起GET请求

嘿，这个问题我之前帮不少开发者踩过坑——LinkedIn的Content Security Policy（CSP）确实限制得很严格，直接在页面上下文里发起外部API请求肯定会被拦。给你几个实用的解决思路：

核心原因先搞懂 #

LinkedIn页面的CSP指令里connect-src只包含了它自家的域名（比如static.licdn.com、dms.licdn.com这些），你的API地址不在允许列表里，所以浏览器会直接拦截来自页面上下文的请求，这就是控制台报错的根源。

方案1：用扩展背景脚本做请求代理 #

这是最常用也最靠谱的方法，因为Chrome扩展的背景脚本（或服务工作者）属于扩展自身的上下文，不受页面CSP的约束。你只需要把API请求的逻辑移到背景脚本，内容脚本负责收集用户名，然后通过消息通信把数据传给背景脚本，让它去发起请求，最后再把结果回传给内容脚本。

举个简单的代码示例：

内容脚本（注入到LinkedIn页面的脚本） #

// 假设你已经收集到了用户名
const collectedUsername = "xxx";

// 给背景脚本发消息，请求校验用户
chrome.runtime.sendMessage(
  { action: "verifyUser", username: collectedUsername },
  (response) => {
    if (response.success) {
      console.log("校验结果：", response.data);
      // 这里处理你的业务逻辑
    } else {
      console.error("校验失败：", response.error);
    }
  }
);

背景脚本（manifest中声明的background脚本） #

首先要在manifest.json里添加API的主机权限：

{
  "manifest_version": 3,
  "host_permissions": ["https://my.api.url/*"],
  "background": {
    "service_worker": "background.js"
  }
  // 其他扩展配置...
}

然后在background.js里处理消息并发起请求：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "verifyUser") {
    // 发起API请求
    fetch(`https://my.api.url/check?username=${encodeURIComponent(request.username)}`)
      .then((res) => res.json())
      .then((data) => sendResponse({ success: true, data }))
      .catch((err) => sendResponse({ success: false, error: err.message }));
    
    // 因为是异步请求，必须返回true告诉Chrome要等待响应
    return true;
  }
});

方案2：避免在页面上下文直接发起请求 #

别尝试在内容脚本里直接用fetch或XMLHttpRequest调用你的API——内容脚本是注入到LinkedIn页面的，会继承页面的CSP规则，所以这种方式必然会被拦截。所有外部请求都交给扩展自身的上下文（背景脚本、弹出页等）来处理就对了。

额外提醒 #

如果你的扩展用的是Manifest V3，记得用service_worker代替传统的背景页面，并且确保host_permissions正确配置，否则扩展会没有权限访问你的API。

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