Chrome扩展内容脚本如何复用目标站点的jQuery？

这是个很常见的问题——Chrome内容脚本的**隔离世界（Isolated World）**特性确实会让你没法直接拿到页面里的jQuery，不过有几种靠谱的方法可以复用它，不用自己再加载一遍，我给你拆解下：

首先得明确核心原因：内容脚本运行在浏览器单独开辟的安全环境里，它的window对象和页面原生JS的window完全隔离，所以页面加载的jQuery不在内容脚本的作用域内，哪怕页面里能正常调用，内容脚本也访问不到。

方法1：注入脚本到页面主世界 + 自定义事件通信 #

这种方法兼容Manifest V2和V3，核心思路是：在内容脚本里创建一个脚本标签，把它注入到页面DOM中，这个注入的脚本会运行在页面的主JS环境里，就能直接访问页面的jQuery；然后通过自定义事件把需要的数据传递回内容脚本。

代码示例： #

// 你的内容脚本代码
(function() {
  // 1. 编写要注入到页面主世界的代码
  const injectedCode = `
    // 这里的代码直接运行在页面环境，可调用页面的jQuery
    const targetContent = $('.your-target-selector').html();
    
    // 发送自定义事件，把数据传给内容脚本
    window.dispatchEvent(new CustomEvent('jquery-data-transfer', {
      detail: targetContent,
      bubbles: false,
      cancelable: false
    }));
  `;

  // 2. 创建script标签并注入到页面
  const script = document.createElement('script');
  script.textContent = injectedCode;
  document.documentElement.appendChild(script);
  script.remove(); // 注入后移除标签，避免DOM冗余

  // 3. 内容脚本监听自定义事件，接收数据
  window.addEventListener('jquery-data-transfer', (event) => {
    console.log('通过页面jQuery拿到的内容:', event.detail);
    // 这里可以处理你的业务逻辑
  });
})();

方法2：Manifest V3专用：用chrome.scripting.executeScript指定主世界 #

如果你的扩展用的是Manifest V3，可以直接用Chrome提供的API，指定脚本运行在主世界（world: 'MAIN'），这样脚本就能直接访问页面的jQuery，还能把执行结果返回给内容脚本。

步骤： #

1. 先在manifest.json里添加必要权限：

{
  "permissions": ["scripting"],
  "host_permissions": ["*://*/*/relevant-path*"]
}

2. 在内容脚本里调用API：

// 你的内容脚本代码
// 先获取当前tab的ID（示例）
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const currentTabId = tabs[0].id;
  chrome.scripting.executeScript({
    target: { tabId: currentTabId },
    func: () => {
      // 这个函数在页面主世界执行，直接使用页面的jQuery
      return $('your-selector').attr('data-id');
    },
    world: 'MAIN'
  }, (results) => {
    if (results && results.length > 0) {
      const jqueryResult = results[0].result;
      console.log('复用页面jQuery得到的结果:', jqueryResult);
      // 后续逻辑处理
    }
  });
});

额外提示： #

• 不管用哪种方法，都要确保页面已经加载完jQuery再执行代码，可以通过监听DOMContentLoaded事件，或者在注入脚本前检查window.jQuery是否存在。
• 如果需要在注入的脚本里做复杂操作，也可以用files参数代替func，把单独的脚本文件注入到主世界。

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