解决 Chrome 扩展程序中 webextension-polyfill 和 browser.browserAction.onClicked 的错误

Chrome 扩展程序清单 v3 与 webextension-polyfill：browser.browserAction.onClicked 使用问题

作为一名经验丰富的程序员和技术作家，我致力于为开发人员社区提供技术解决方案和见解。今天，我们深入探讨一个常见问题，涉及在 Chrome 中使用 webextension-polyfill 以及 browser.browserAction.onClicked 事件监听器。

问题

使用 webextension-polyfill 时，许多开发人员在 Chrome 中加载扩展程序时遇到 "服务工作者注册失败" 的错误。此错误通常出现在清单文件中包含 background.js 且包含 browser.browserAction.onClicked 监听器的代码段时。

原因

错误的根源在于 browser.browserAction.onClicked 监听器未正确注册。在清单文件中，此监听器应在 service_worker.js 中注册，而不是 background.js。此外，webextension-polyfill 要求 background.js 中有一个空函数来处理 service_worker.js 中的事件。

解决方案

为了解决此问题，我们需要对 background.js 和 service_worker.js 文件进行一些修改。以下是如何操作：

1. background.js ：

// background.js
browser.runtime.onMessage.addListener(() => {
  console.log('browser.runtime.onMessage');
});

browser.runtime.onInstalled.addListener(() => {
});

2. service_worker.js ：

// service_worker.js
import { browser } from "webextension-polyfill-ts";

browser.browserAction.onClicked.addListener(() => {
  console.log('browserAction.onClicked');
});

注意： browser.runtime.onInstalled 监听器是必需的，因为 webextension-polyfill 使用它来初始化服务工作者。

常见问题解答

1. 为什么 browser.browserAction.onClicked 监听器需要在 service_worker.js 中注册？

service_worker.js 是控制扩展程序与浏览器之间通信的脚本。因此，所有与浏览器操作相关的事件，例如点击扩展程序操作，都应在 service_worker.js 中处理。

2. 为什么 background.js 中需要空函数？

webextension-polyfill 使用 background.js 中的空函数来处理来自 service_worker.js 的事件。此函数允许 polyfill 与浏览器进行交互并路由事件。

3. 如何加载扩展程序以测试更改？

您可以使用 Chrome 开发者工具加载扩展程序以进行测试。为此，请转到 Chrome://extensions 并单击 "加载已解压缩的扩展程序" 按钮。

4. 如果问题仍然存在，我该怎么办？

确保清单文件包含正确的权限。此外，检查是否存在语法错误或拼写错误，因为它们也会导致问题。

5. webextension-polyfill 有什么好处？

webextension-polyfill 允许开发人员使用清单 v3 API，同时仍然支持旧版本的 Chrome。这有助于确保扩展程序与多种浏览器版本兼容。

结论

通过遵循本文概述的步骤，您可以解决 "服务工作者注册失败" 错误并在 Chrome 中使用 browser.browserAction.onClicked 监听器。本文提供了对问题的深入解释、详细的解决方案以及常见的故障排除提示，使开发人员能够解决此问题并继续构建功能强大的 Chrome 扩展程序。