Chrome扩展Content Script无法捕获网页error事件的问题排查

Chrome扩展的Content Script运行在隔离世界中，和网页自身JS代码所在的主世界是完全隔离的：

• Content Script里的window对象和网页原生的window并非同一个引用
• 网页抛出的错误只会在主世界的环境中触发error事件，隔离世界的监听自然无法捕获到这些错误
• 而click这类DOM事件会顺着DOM树冒泡，隔离世界能通过监听DOM元素接收到冒泡事件，所以click事件可以正常工作。

办法1：让Content Script直接运行在主世界 #

修改manifest.json里的content_scripts配置，添加"world": "MAIN"字段，这样脚本就会直接进入网页的主世界，能够直接捕获主世界的错误：

{
  "name": "xtension",
  "version": "1.0.0",
  "description": "extenstion",
  "manifest_version": 3,
  "author": "Abhi",
  "action":{
      "default_popup": "index.html",
      "default_title": "xtension"
  },
  "content_scripts":[
      {
        "matches":[
          "<all_urls>"
        ],
        "js": ["content.js"],
        "world": "MAIN"
      }
    ]
}

注意：这种方式会让你的脚本直接暴露给网页的原生JS，网页代码可以访问到脚本内的变量和函数，需要注意安全风险。

办法2：动态注入脚本到主世界（更安全） #

如果不想暴露脚本给网页，可以在Content Script中动态创建<script>标签注入到网页DOM，注入的脚本会运行在主世界，捕获错误后通过消息机制通知Content Script：

修改你的content.js为以下内容：

// 创建要注入的脚本
const injectScript = document.createElement('script');
injectScript.textContent = `
window.addEventListener('error', function(e) {
  // 将错误信息发送给Content Script
  window.postMessage({ type: 'PAGE_ERROR', errorInfo: {
    message: e.message,
    file: e.filename,
    line: e.lineNumber
  } }, '*');
});
`;
document.head.appendChild(injectScript);
injectScript.remove(); // 注入完成后删除标签，避免DOM冗余

// 监听主世界发来的消息
window.addEventListener('message', function(e) {
  if (e.data?.type === 'PAGE_ERROR') {
    console.log("捕获到网页错误：", e.data.errorInfo);
    // 如需将错误上报到扩展后台，可添加下面的代码
    // chrome.runtime.sendMessage({ action: 'REPORT_ERROR', data: e.data.errorInfo });
  }
});

这种方式既可以捕获主世界的错误，又能保持Content Script的隔离性，安全性更高。

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