Chrome扩展：注入脚本与popup.js通信失败问题求助

嘿，问题根源很明确——你没搞清楚Chrome扩展里不同脚本的上下文隔离规则！

注入到网页里的load.js是跑在网页自身的上下文里的，而你的popup.js属于扩展的独立上下文，这俩完全是两个互不相通的“环境”，你用CustomEvent在网页上下文发事件，popup那边根本接收不到，因为它们的window对象都不是同一个！

要解决这个问题，得借助内容脚本当中间桥接层——内容脚本是唯一能同时和网页上下文、扩展上下文通信的角色。下面是完整的修复方案：

1. 新增内容脚本（content.js） #

这个脚本负责监听来自注入脚本的消息，再转发给扩展：

// content.js
// 监听网页上下文传来的自定义事件
window.addEventListener('from-injected-script', (evt) => {
  // 用Chrome扩展的消息API转发给popup/后台
  chrome.runtime.sendMessage({
    type: 'something',
    payload: evt.detail
  });
});

2. 修改注入脚本（load.js） #

调整事件名称和参数（注意CustomEvent的标准传参字段是detail，不是data）：

// load.js
function loadit() {
  window.dispatchEvent(new CustomEvent('from-injected-script', {
    detail: 'whatever'
  }));
}
loadit();

3. 重构popup.js的消息监听逻辑 #

放弃监听自定义事件，改用Chrome扩展官方的chrome.runtime.onMessage来接收消息：

// popup.js
function injectLoad() {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTabId = tabs[0].id;
    // 先注入内容脚本，确保它能监听到后续注入脚本的事件
    chrome.tabs.executeScript(activeTabId, {file: 'content.js'}, () => {
      chrome.tabs.executeScript(activeTabId, {file: 'load.js'});
    });
  });
}

function initPopup() {
  console.log('starting');
  // 监听来自内容脚本的消息
  chrome.runtime.onMessage.addListener((message, sender) => {
    if (message.type === 'something') {
      alert(`got ${message.payload}`);
    }
  });
}

document.getElementById('loadit').addEventListener('click', injectLoad);
initPopup();

4. 检查manifest.json的配置 #

确保你声明了必要的权限和内容脚本匹配规则：

// 如果你用Manifest V2
{
  "manifest_version": 2,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你需要的目标网址
      "js": ["content.js"]
    }
  ]
}

// 如果你用Manifest V3
{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

注意：Manifest V3里executeScript已经移到chrome.scripting模块，所以injectLoad函数要改成异步写法：

async function injectLoad() {
  const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
  await chrome.scripting.executeScript({
    target: {tabId: activeTab.id},
    files: ['content.js']
  });
  await chrome.scripting.executeScript({
    target: {tabId: activeTab.id},
    files: ['load.js']
  });
}

最后再强调几个关键点：

• 必须保证内容脚本先于注入脚本加载，否则会错过事件。
• 扩展的消息传递API（chrome.runtime.sendMessage/onMessage）是跨上下文通信的标准方式，别再用自定义事件跨上下文了！

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