如何解决Chrome扩展引入jQuery时的CSP报错问题？

核心原因 #

你遇到的是目标网站的HTTP响应头CSP限制了脚本来源，而非Chrome扩展自身的CSP。目标页面的CSP仅允许从self、本地localhost等来源加载脚本，Google CDN不在允许列表内，且页面内的meta标签无法覆盖响应头级别的CSP规则。

可行解决方法 #

1. 本地引入jQuery（推荐） #

• 下载jQuery 3.6.4的压缩包，放到你的扩展目录中
• 在manifest.json里通过内容脚本静态注入：

  {
    "content_scripts": [
      {
        "matches": ["https://目标网站的域名/*"],
        "js": ["jquery.min.js", "你的业务脚本.js"],
        "run_at": "document_start" // 可选，控制注入时机
      }
    ]
  }
  

  这种方式下，Chrome会将jQuery作为扩展资源注入，完全不受目标网站的CSP限制，且你可以在自己的业务脚本中直接使用jQuery。

2. 动态注入（适合按需加载场景） #

如果需要在特定时机动态加载jQuery：

• 同样先将jQuery文件放入扩展目录
• 在manifest.json中声明必要权限：

  {
    "permissions": ["scripting"],
    "host_permissions": ["https://目标网站的域名/*"]
  }
  

• 在扩展的背景页或弹窗中调用API注入：

  // 假设你已获取目标Tab的ID
  chrome.scripting.executeScript({
    target: { tabId: tabId },
    files: ["jquery.min.js", "你的业务脚本.js"]
  });
  

为什么之前的尝试无效？ #

• 扩展manifest中的content_security_policy仅管控扩展自身的页面（如背景页、弹窗），和注入到目标网站的脚本无关。
• 页面内添加的meta标签CSP优先级低于目标网站通过HTTP响应头设置的CSP，无法覆盖原有规则。

内容的提问来源于stack exchange，提问作者So Happy Mustafa