Chrome扩展无法监听页面console.log，求排查与解决方法

可以实现，但你的代码存在上下文隔离的核心问题，导致无法捕获页面的日志输出，以下是问题分析和修复方案：

问题原因 #

Chrome扩展的content脚本运行在独立的隔离上下文中，与页面自身的主上下文完全分离。你在content脚本里重写的console.log，仅能影响content脚本自身的日志输出，无法覆盖页面主上下文里的console.log——这就是为什么页面能输出日志，但background收不到的原因。

修复方案 #

需要将重写console.log的代码注入到页面主上下文，再通过自定义事件把日志传递给content脚本，最后由content脚本转发到background。

修改后的content-script.js #

import browser from 'webextension-polyfill'

// 创建要注入到页面的脚本
const injectCode = `
  console.defaultLog = console.log.bind(console);
  console.log = function(...args) {
    console.defaultLog.apply(console, args);
    // 用自定义事件向content脚本传递日志
    window.dispatchEvent(new CustomEvent('pageConsoleLog', {
      detail: { log: args }
    }));
  };
`;

// 注入脚本到页面主上下文
const scriptTag = document.createElement('script');
scriptTag.textContent = injectCode;
document.documentElement.appendChild(scriptTag);
scriptTag.remove(); // 注入后移除标签，避免DOM污染

// 监听页面发来的自定义事件，转发到background
window.addEventListener('pageConsoleLog', (e) => {
  browser.runtime.sendMessage({
    name: 'registerLog',
    payload: e.detail
  });
});

background.ts 保持不变（可优化日志输出） #

import browser from 'webextension-polyfill'

browser.runtime.onMessage.addListener((request, sender) => {
  console.log(`来自标签页[${sender.tab?.id}]的日志:`, request.payload.log);
});

关键配置说明 #

确保manifest.json中content脚本的matches规则能匹配到你的test.html页面，比如：

{
  "manifest_version": 3,
  "name": "Console Log Listener",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["http://localhost/*"], // 替换为你的test.html所在的URL
      "js": ["content-script.js"]
    }
  ]
}

原理说明 #

1. 注入的脚本运行在页面主上下文，重写的是页面自身的console.log，因此能捕获页面所有的日志输出；
2. 页面上下文无法直接调用扩展API（如browser.runtime.sendMessage），所以用自定义事件pageConsoleLog将日志传递给content脚本；
3. content脚本处于扩展上下文，可以正常调用扩展API，将日志转发到background的Service Worker。

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