网页脚本与浏览器扩展内容脚本通信报错：TypeError: browser is undefined

首先得明确一个核心点：普通网页脚本（就是你在页面里写的JS）是没有权限直接访问browser.runtime或chrome.runtime API的——这是浏览器的扩展隔离机制在起作用，这些API只对扩展的内部脚本（内容脚本、背景脚本、弹出页脚本等）开放，普通页面根本拿不到这些全局对象。

要实现网页脚本和扩展的通信，最可靠的方式是通过内容脚本做中间层，利用DOM自定义事件来传递消息（因为内容脚本是注入到页面中的，可以访问DOM，同时又能调用扩展的API）。下面是具体的实现步骤和代码：

1. 配置并编写内容脚本 #

首先确保你的扩展已经配置了内容脚本，并且注入到目标页面中。在manifest.json里添加如下配置：

{
  "content_scripts": [
    {
      "matches": ["https://your-target-page.com/*"], // 替换成你要通信的页面域名
      "js": ["content-script.js"]
    }
  ]
}

然后在content-script.js里编写监听和转发逻辑：

// 兼容Chrome和Firefox的API
const browser = window.browser || window.chrome;

//监听网页脚本发来的自定义事件
window.addEventListener('page-to-extension', (event) => {
  const { message, responseId } = event.detail;
  
  //把消息转发给扩展的背景脚本
  browser.runtime.sendMessage(message, (response) => {
    //将扩展的响应通过自定义事件发回给网页脚本
    window.dispatchEvent(new CustomEvent(`extension-to-page-${responseId}`, {
      detail: response
    }));
  });
});

2. 编写网页脚本的通信逻辑 #

在网页的JS里，通过自定义事件发送消息，并监听扩展的响应：

function sendMessageToExtension(message) {
  return new Promise((resolve) => {
    //生成唯一的响应ID，避免多个消息冲突
    const responseId = Math.random().toString(36).slice(2);
    
    //监听扩展的响应事件
    const responseEvent = `extension-to-page-${responseId}`;
    window.addEventListener(responseEvent, function handler(e) {
      window.removeEventListener(responseEvent, handler); //用完就移除监听，防止内存泄漏
      resolve(e.detail);
    });
    
    //发送消息给内容脚本
    window.dispatchEvent(new CustomEvent('page-to-extension', {
      detail: {
        message: message,
        responseId: responseId
      }
    }));
  });
}

//使用示例
sendMessageToExtension({ type: 'get-user-data', payload: 'some-data' })
  .then((response) => {
    console.log('Received response from extension:', response);
  })
  .catch((err) => {
    console.error('Failed to send message:', err);
  });

3. 扩展背景脚本（可选，用于处理消息） #

如果你的扩展需要在背景脚本里处理消息，比如调用其他API或存储数据，可以在background.js里添加监听：

const browser = window.browser || window.chrome;

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
  //根据消息类型处理逻辑
  if (message.type === 'get-user-data') {
    //模拟异步处理
    setTimeout(() => {
      sendResponse({ status: 'success', data: 'Hello from extension background!' });
    }, 100);
    //返回true表示会异步调用sendResponse
    return true;
  }
});

为什么你的原代码不行？ #

你直接在网页脚本里调用browser.runtime.sendMessage，但网页脚本处于浏览器的普通页面上下文，不属于扩展的上下文，所以browser或chrome全局对象根本不存在——这是浏览器的安全限制，防止恶意网页随意调用扩展的功能。

额外注意事项 #

• 自定义事件的名称尽量唯一，避免和页面其他脚本的事件冲突（比如加个前缀，比如你的扩展ID）。
• 如果需要允许特定域名的网页直接和扩展通信，也可以配置externally_connectable在manifest.json里，但这种方式需要你知道扩展的ID，而且网页脚本需要用chrome.runtime.sendMessage(EXTENSION_ID, message)，灵活性不如内容脚本中转。
• 在Chrome里，browser API是通过扩展兼容层提供的，所以用const browser = window.browser || window.chrome;可以同时兼容Chrome和Firefox。

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