使用Polyfill移植Firefox扩展到Chrome时出现Uncaught (in Promise)错误

嘿，我来帮你搞定这个Promise未捕获的问题！这种情况我在跨浏览器移植扩展时碰到过好几次，咱们一步步来排查解决。

1. 先定位Promise错误的具体来源 #

首先得搞清楚到底是哪段代码抛出的错误。Chrome的开发者工具里，你可以：

• 右键扩展图标→选择“检查弹出内容”，打开弹出页的DevTools
• 切换到Console面板，开启“Pause on exceptions”（暂停在异常处）的开关，这样就能直接定位到触发错误的Promise代码块

常见的触发点一般是这些：

• browser.tabs.executeScript 或 browser.tabs.insertCSS 这类内容注入API调用
• 扩展权限声明不全，导致API调用被浏览器拒绝
• Polyfill的配置问题，没有正确完成Chrome回调API到Promise的转换

2. 检查权限与Manifest配置 #

Chrome的权限系统和Firefox有细微差别，尤其是内容脚本注入相关的规则：

• 确保manifest.json里声明了activeTab权限，或者明确指定了要注入的网站权限（比如"<all_urls>"）
• 如果是在弹出页触发注入，Chrome对activeTab权限的校验更严格，Firefox则相对宽松
• 注意Manifest版本差异：V3需要用host_permissions替代旧的<all_urls>权限，同时新增scripting权限用于内容注入

举个配置示例：

Manifest V2 配置 #

"permissions": [
  "activeTab",
  "<all_urls>"
],
"browser_action": {
  "default_popup": "popup.html"
}

Manifest V3 配置 #

"permissions": ["activeTab", "scripting"],
"host_permissions": ["<all_urls>"],
"action": {
  "default_popup": "popup.html"
}

3. 给所有Promise添加错误捕获 #

Firefox可能会默默忽略未处理的Promise错误，但Chrome会严格抛出异常。所以不管是Polyfill封装的API还是你的业务代码，所有返回Promise的调用都必须加上错误处理：

链式调用写法

// 错误写法：无错误捕获
browser.tabs.executeScript({
  code: 'document.body.appendChild(document.createElement("div"))'
});

// 正确写法：添加catch处理
browser.tabs.executeScript({
  code: 'document.body.appendChild(document.createElement("div"))'
}).catch(error => {
  console.error('注入脚本失败:', error);
});

Async/Await写法

async function injectContent() {
  try {
    await browser.tabs.executeScript({
      code: 'document.body.appendChild(document.createElement("div"))'
    });
  } catch (error) {
    console.error('注入脚本失败:', error);
  }
}

4. 检查WebExtensions Polyfill的配置 #

Mozilla的Polyfill需要正确初始化才能在Chrome环境下工作：

• 确保使用最新版本的polyfill（可以通过npm update webextension-polyfill更新）
• 在所有业务脚本之前加载polyfill，比如在popup.html里：

<!-- 先加载polyfill，再加载业务脚本 -->
<script src="browser-polyfill.min.js"></script>
<script src="popup.js"></script>

• 如果是Manifest V3，注意polyfill对Service Worker的支持，确保它能在后台Service Worker环境下正常运行

5. 验证注入的内容脚本代码 #

有时候错误不是来自扩展API，而是你注入的iframe/DIV代码本身：

• 检查注入的HTML是否有语法错误
• 确认iframe的src是否存在跨域问题（Chrome对跨域iframe的限制比Firefox严格）
• 简化注入代码测试：先只注入一个空DIV，排除业务代码本身的问题

最后测试时，记得先卸载Chrome里旧的扩展，重新加载打包后的新版本，避免缓存干扰。如果还是有问题，把Console里的具体错误信息贴出来，能更精准定位！

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