如何在Manifest V3版本Chrome扩展中注入jQuery

你写的注入逻辑不生效，核心是三个问题：

• 你通过创建<script>标签插入到页面的脚本，会运行在页面自身的JS主世界上下文，而Chrome扩展的Content Script默认运行在独立的隔离上下文，两个上下文的JS对象完全不共享，你在Content Script里根本访问不到页面里加载的jQuery实例。
• 插入脚本标签后你没有等待脚本加载、执行完成就运行依赖jQuery的代码，此时$/jQuery对象还没初始化，必然报未定义错误。
• 大量站点配置了内容安全策略（CSP），会直接拦截来自第三方CDN的脚本加载请求，你用的公共CDN链接在很多环境下根本加载不出来。

优先选第一种方案，稳定性最高，坑最少。

方案1：静态注入到Content Script隔离上下文（推荐） #

这是最适配Content Script场景的方案，完全不需要手写动态注入逻辑：

1. 把你需要的jQuery版本源码文件（比如jquery.min.js）直接存到扩展本地目录，不要用任何外部CDN链接。
2. 在扩展的manifest.json里配置content_scripts，把jQuery放在你自己的业务脚本前面，浏览器会自动按顺序加载，你的业务脚本运行时jQuery已经完成初始化，直接用$/jQuery即可。
3. 这个方案加载的jQuery运行在Content Script的隔离上下文，不会和页面自身引入的jQuery/其他占用$变量的库产生冲突，也不会被站点CSP拦截。

MV3版本manifest配置示例：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要注入的站点匹配规则
      "js": ["jquery.min.js", "your-custom-script.js"], // 注意jQuery必须放在前面
      "run_at": "document_idle"
    }
  ]
}

配置完成后，你直接在your-custom-script.js里写jQuery代码即可，不需要额外做任何注入判断。

方案2：动态注入到页面主世界上下文 #

如果你需要把jQuery注入到页面本身的上下文，供页面自身的脚本调用，可以按下面的逻辑写，注意必须等脚本加载完成再执行后续逻辑，且优先用扩展本地的jQuery文件，避免CSP拦截：

1. 同样把jQuery源码存到扩展本地目录。
2. 在manifest里配置web_accessible_resources，允许页面加载扩展内的jQuery文件：

{
  "web_accessible_resources": [
    {
      "resources": ["jquery.min.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

3. 写动态注入逻辑，用Promise等待加载完成：

// 注入jQuery到页面主世界
const injectJqueryToPage = () => {
  return new Promise((resolve, reject) => {
    // 页面已经有jQuery就直接返回
    if (window.jQuery) return resolve(window.jQuery);
    const script = document.createElement('script');
    script.src = chrome.runtime.getURL('jquery.min.js');
    script.onload = () => {
      // 注入完成后移除script标签，避免污染DOM
      script.remove();
      resolve(window.jQuery);
    };
    script.onerror = (err) => reject(new Error('jQuery加载失败', { cause: err }));
    document.head.appendChild(script);
  });
};

// 调用示例
injectJqueryToPage()
  .then(() => {
    // 注意：这里的逻辑如果要访问页面里的jQuery，需要把代码通过script标签插入到页面上下文执行
    // 因为当前作用域还是Content Script隔离上下文，拿不到页面的jQuery
    const execScript = document.createElement('script');
    execScript.textContent = `
      // 这里的代码运行在页面上下文，可以直接用$
      console.log('页面jQuery版本：', $.fn.jquery);
    `;
    document.head.appendChild(execScript);
    execScript.remove();
  })
  .catch(err => console.error(err));

• 不要用第三方CDN链接加载jQuery，CSP拦截、网络失败的概率极高，本地存文件是最稳妥的方式。
• 不要试图通过页面插入script标签的方式给Content Script隔离上下文加载jQuery，两个上下文不共享JS环境，这种方式永远不可能生效。
• 静态注入的方案不需要处理加载时序、上下文隔离问题，90%以上的Content Script场景用这个方案就够了。

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