Chrome扩展Manifest V3中window.addEventListener失效问题求助

核心问题定位 #

你的问题核心是注入到MAIN world的脚本没有真正进入页面全局作用域，或是监听时机不对导致错过早期错误事件。

具体排查与修复步骤 #

• 调整content script注入方式
  直接将code-to-inject.js设为content script在MAIN world下可能存在隔离问题，建议用一个注入器脚本（如injector.js）动态插入目标脚本到页面：

  // manifest.json 中content_scripts配置
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["injector.js"],
      "run_at": "document_start",
      "world": "MAIN"
    }
  ]
  

  注入器脚本代码：

  // injector.js
  const script = document.createElement('script');
  script.src = chrome.runtime.getURL('code-to-inject.js');
  script.async = false; // 同步加载，确保不遗漏页面早期错误
  document.documentElement.appendChild(script);
  

• 修正web_accessible_resources配置
  必须确保目标脚本被正确声明为可访问资源，且开启动态URL适配页面CSP：

  "web_accessible_resources": [
    {
      "resources": ["code-to-inject.js"],
      "matches": ["<all_urls>"],
      "use_dynamic_url": true
    }
  ]
  

• 优化错误监听逻辑
  改用addEventListener并开启捕获模式，避免被页面其他脚本覆盖监听，同时补充Promise未处理错误监听：

  // code-to-inject.js
  // 捕获普通JS错误，capture设为true优先拦截
  window.addEventListener('error', (event) => {
    console.error('捕获到错误:', event);
    alert(`错误: ${event.message}`);
  }, true);
  
  // 捕获未处理的Promise拒绝
  window.addEventListener('unhandledrejection', (event) => {
    console.error('未处理Promise错误:', event);
    alert(`Promise错误: ${event.reason}`);
  });
  

• 验证CSP配置
  Manifest V3需使用extension_pages字段配置CSP，确保没有限制脚本加载：

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'"
  }
  

• 调试验证方法

  1. 打开页面开发者工具Sources面板，在Page标签下确认code-to-inject.js是否加载
  2. 在Console手动触发错误（如throw new Error('test')），检查是否被监听捕获
  3. 查看扩展控制台日志，排查资源加载失败或权限问题

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