Chrome插件Content Security Policy问题：请求SEC.gov接口遭拒

看起来你遇到的问题是：虽然在manifest里配置了对应的CSP规则和权限，但直接在组件脚本里发起请求还是被拦截了——这大概率是请求发起的上下文不对导致的。Chrome扩展里不同脚本环境（比如popup组件、content script、注入到页面的脚本）受CSP限制的逻辑不一样，直接在前端组件里发请求可能会触发宿主页面或扩展前端环境的额外限制，哪怕manifest里已经配置了权限。

核心解决方案：用Background页面代理请求 #

最稳妥的方式是把网络请求转移到Background页面发起，因为Background页面完全受你manifest里的CSP和权限控制，不受其他页面的限制。具体操作分两步：

1. 修改组件中的请求逻辑，通过消息调用Background

在你的TickerTableInfo.js里，把直接发起XHR/fetch的代码改成向Background发送消息：

// TickerTableInfo.js
// 替换原来的XHR/fetch代码
chrome.runtime.sendMessage(
  {
    action: "fetchSecData",
    url: "https://www.sec.gov/cgi-bin/browse-edgar?CIK=LEL&Find=Search&owner=exclude&action=getcompany&count=100"
  },
  (response) => {
    if (response.success) {
      // 处理返回的数据
      console.log("SEC数据返回：", response.data);
    } else {
      console.error("请求失败：", response.error);
    }
  }
);

2. 在Background页面中监听消息并发起请求

在你的Background页面脚本（比如background.js）里添加消息监听逻辑，负责实际发起请求：

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "fetchSecData") {
    fetch(request.url)
      .then((res) => {
        // 根据SEC返回的实际格式选择text()或json()
        return res.text();
      })
      .then((data) => {
        sendResponse({ success: true, data });
      })
      .catch((err) => {
        sendResponse({ success: false, error: err.message });
      });
    // 返回true表示需要异步响应
    return true;
  }
});

额外检查点 #

• 确认你的manifest.json里的permissions确实包含"https://www.sec.gov/*"，你已经配置了这一项，没问题。
• 如果你是在注入到宿主页面的脚本（通过web_accessible_resources的inject.html）里发起请求，那这个脚本会受宿主页面的CSP限制，绝对不要在这里发请求，同样用Background代理即可。

这样调整后，请求会在Background页面发起，完全符合你配置的CSP和权限规则，就不会再被拦截了。

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