• 主页
  • 文章
  • 网络
  • 为所有浏览器创建一个浏览器扩展：Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi

为所有浏览器创建一个浏览器扩展：Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi

已发表: 2022-03-10
快速总结 ↬在今天的文章中，我们将使用相同的代码库创建一个适用于所有主要现代浏览器的 JavaScript 扩展。 事实上，基于 HTML、CSS 和 JavaScript 的 Chrome 扩展模型现在几乎无处不在，甚至还有一个浏览器扩展社区小组正在制定标准。 我将解释如何安装支持 Web 扩展模型（即 Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi）的扩展，并提供一些关于如何为所有这些模型获取唯一代码库的简单提示，但是还如何在每个浏览器中进行调试。

我将解释如何安装支持 Web 扩展模型（即 Edge、Chrome、Firefox、Opera、Brave 和 Vivaldi）的扩展，并提供一些关于如何为所有这些模型获取唯一代码库的简单提示，但是还如何在每个浏览器中进行调试。

注意：我们不会在本文中介绍 Safari，因为它不支持与其他扩展模型相同的扩展模型。

基本

我不会介绍扩展开发的基础知识，因为每个供应商已经提供了大量好的资源：

跳跃后更多！ 继续往下看↓
  • 谷歌
  • Microsoft（另请参阅精彩的概述视频“为 Microsoft Edge 构建扩展”）
  • Mozilla（另见 wiki）
  • 歌剧
  • 勇敢的

因此，如果您以前从未构建过扩展或不知道它是如何工作的，请快速查看这些资源。 不用担心：构建一个简单明了。

我们的扩展

让我们构建一个概念验证——一个使用人工智能 (AI) 和计算机视觉来帮助盲人分析网页上图像的扩展。

我们将看到，通过几行代码，我们可以在浏览器中创建一些强大的功能。 就我而言，我关心的是网络上的可访问性，并且我已经花了一些时间思考如何使用网络音频和 SVG 来制作一款可访问的突破性游戏。

尽管如此，我一直在寻找能够以更普遍的方式帮助盲人的东西。 我最近在里斯本聆听 Chris Heilmann 的精彩演讲时受到启发：“像素和像素中的隐藏意义”。

事实上，使用今天的云端 AI 算法，以及文本到语音技术，通过 Web Speech API 暴露在浏览器中或使用远程云服务，我们可以非常轻松地构建一个扩展来分析缺少的网页图像或不正确填充的alt文本属性。

我的小概念证明只是从网页（活动选项卡中的那个）中提取图像并在列表中显示缩略图。 当您单击其中一张图像时，扩展程序会查询计算机视觉 API以获取图像的一些描述性文本，然后使用Web Speech API或Bing Speech API与访问者共享它。

下面的视频在 Edge、Chrome、Firefox、Opera 和 Brave 中进行了演示。

您会注意到，即使计算机视觉 API 正在分析一些 CGI 图像，它也非常准确！ 最近几个月该行业在这方面取得的进展给我留下了深刻的印象。

我正在使用这些服务：


  • 计算机视觉 API、微软认知服务
    这是免费使用的（有配额）。 您需要生成一个免费密钥； 用您的密钥替换代码中的TODO部分，以使此扩展在您的机器上工作。 要了解此 API 可以做什么，请尝试一下。
    • 字幕机器人
  • 必应文本到语音 API，Microsoft 认知服务
    这也是免费使用的（也有配额）。 您需要再次生成免费密钥。 我们还将使用我最近编写的一个小型库从 JavaScript 调用此 API。 如果您没有 Bing 密钥，则该扩展将始终回退到 Web Speech API，所有最新浏览器都支持该 API。

但请随意尝试其他类似服务：

  • 视觉识别，IBM 沃森
  • 云视觉 API，谷歌

你可以在我的 GitHub 页面上找到这个小型浏览器扩展的代码。 随意修改您要测试的其他产品的代码。

使您的代码与所有浏览器兼容的提示

您会发现大多数代码和教程都使用扩展 API 的命名空间chrome.xxx （例如chrome.tabs ）。

但是，正如我所说，扩展 API 模型目前正在标准化为browser.xxx ，同时一些浏览器正在定义自己的命名空间（例如，Edge 正在使用msBrowser ）。

幸运的是，大多数 API 在浏览器后面保持不变。 因此，创建一个支持所有浏览器和命名空间定义的小技巧非常简单，这要归功于 JavaScript 的美妙之处：

 window.browser = (function () { return window.msBrowser || window.browser || window.chrome; })();

瞧！

当然，您还需要使用所有浏览器都支持的 API 子集。 例如：

  • Microsoft Edge 有一个支持列表。
  • Mozilla Firefox 共享其当前的 Chrome 不兼容性。
  • Opera 维护自己的浏览器支持的扩展 API 列表。

扩展架构

让我们一起回顾一下这个扩展的架构。 如果您是浏览器扩展的新手，这应该可以帮助您理解流程。

让我们从清单文件开始：

幻灯片1
（查看大图）

当然，如果我们不考虑扩展程序本身的代码，这个清单文件及其关联的 JSON 是您在所有浏览器中加载扩展程序所需的最低要求。 请在我的 GitHub 帐户中查看源代码，并从这里开始，以确保您的扩展程序与所有浏览器兼容。

例如，您必须指定author属性才能在 Edge 中加载它； 否则，它会抛出一个错误。 您还需要对图标使用相同的结构。 default_title属性也很重要，因为它在某些浏览器中被屏幕阅读器使用。

以下是文档的链接，可帮助您构建在任何地方都兼容的清单文件：

  • 铬合金
  • 边缘
  • 火狐

本文使用的示例扩展主要基于内容脚本的概念。 这是一个存在于我们要检查的页面上下文中的脚本。 因为它可以访问 DOM，所以它将帮助我们检索网页中包含的图像。 如果您想了解更多关于内容脚本是什么的信息，Opera、Mozilla 和 Google 都有关于它的文档。

我们的内容脚本很简单：

幻灯片2
（查看大图）
 console.log("Dare Angel content script started"); browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { if (request.command == "requestImages") { var images = document.getElementsByTagName('img'); var imagesList = []; for (var i = 0; i < images.length; i++) { if ((images[i].src.toLowerCase().endsWith(".jpg") || images[i].src.toLowerCase().endsWith(".png")) && (images[i].width > 64 && images[i].height > 64)) { imagesList.push({ url: images[i].src, alt: images[i].alt }); } } sendResponse(JSON.stringify(imagesList)); } }); view raw

这首先登录到控制台，让您检查扩展是否已正确加载。 通过浏览器的开发工具检查它，可通过F12 、 Control + Shift + I或⌘ + ⌥ + I访问。

然后它等待来自 UI 页面的带有requestImages命令的消息，以获取当前 DOM 中可用的所有图像，然后如果它们大于 64 × 64 像素，则返回它们的 URL 列表（以避免所有像素跟踪垃圾和低分辨率图像）。

幻灯片3
（查看大图）

我们使用的弹出式 UI 页面非常简单，它将显示由内容脚本返回的图像列表，该列表由 flexbox 容器内的内容脚本返回。 它加载start.js脚本，该脚本会立即创建一个dareangel.dashboard.js实例，以向内容脚本发送一条消息，以获取当前可见选项卡中图像的 URL。

这是 UI 页面中的代码，请求内容脚本的 URL：

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 请在另一个选项卡中生成计算机视觉密钥。
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

我们正在创建图像元素。 如果每个图像具有焦点，它将触发一个事件，查询计算机视觉 API 以供审查。

这是通过这个简单的 XHR 调用完成的：

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

以下文章将帮助您了解此计算机视觉 API 的工作原理：

  • “分析图像版本 1.0”，Microsoft 认知服务
  • “计算机视觉 API，v1.0”，微软认知服务
    这将通过网页中的交互式控制台向您展示如何使用正确的 JSON 属性调用 REST API，以及您将获得的 JSON 对象。 了解它的工作原理以及如何调用它很有用。

在我们的例子中，我们使用 API 的describe功能。 您还会在回调中注意到，我们将根据您的选择尝试使用Web Speech API或Bing Text-to-Speech服务。

那么，这里是这个小扩展的全局工作流程：

幻灯片4
（查看大图）

在每个浏览器中加载扩展

让我们快速回顾一下如何在每个浏览器中安装扩展。

先决条件

从某个地方的 GitHub 下载或克隆我的小扩展到您的硬盘驱动器。

此外，修改dareangel.dashboard.js以添加至少一个计算机视觉API 密钥。 否则，扩展程序将只能显示从网页中提取的图像。

微软边缘

首先，您至少需要一个 Windows 10 周年更新（OS Build 14393+）才能支持 Edge 中的扩展。

然后，打开 Edge 并在地址栏中输入about:flags 。 选中“启用扩展开发者功能”。

EnableInEdge001

单击 Edge 导航栏中的“...”，然后单击“扩展”，然后单击“加载扩展”，然后选择克隆我的 GitHub 存储库的文件夹。 你会得到这个：

单击这个新加载的扩展程序，然后启用“地址栏旁边的显示按钮”。

EnableInEdge003

请注意“重新加载扩展”按钮，这在您开发扩展时很有用。 在开发过程中您不会被迫删除或重新安装它； 只需单击按钮即可刷新扩展程序。

导航到 BabylonJS，然后单击 Dare Angel (DA) 按钮以跟随视频中所示的相同演示。

谷歌浏览器、Opera、维瓦尔第

在 Chrome 中，导航到chrome://extensions 。 在 Opera 中，导航到opera://extensions 。 在 Vivaldi 中，导航到vivaldi://extensions 。 然后，启用“开发者模式”。

单击“加载解压缩的扩展程序”，然后选择您提取我的扩展程序的文件夹。

铬001
（查看大图）

导航到 BabylonJS，然后打开扩展以检查它是否正常工作。

火狐浏览器

你在这里有两个选择。 首先是临时加载您的扩展程序，这与在 Edge 和 Chrome 中一样简单。

打开 Firefox，导航到about:debugging并单击“Load Temporary Add-on”。 然后，导航到扩展的文件夹，并选择manifest.json文件。 而已！ 现在去 BabylonJS 测试扩展。

火狐001
（查看大图）

此解决方案的唯一问题是每次关闭浏览器时，都必须重新加载扩展程序。 第二种选择是使用 XPI 打包。 您可以在 Mozilla 开发者网络上的“扩展打包”中了解更多信息。

勇敢的

Brave 的公共版本没有嵌入“开发者模式”来让您加载未签名的扩展。 您需要按照“在 Brave 中加载 Chrome 扩展程序”中的步骤构建您自己的版本。

如那篇文章所述，克隆 Brave 后，您需要在文本编辑器中打开extensions.js文件。 找到下面的行，并为您的扩展插入注册码。 就我而言，我刚刚添加了最后两行：

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

将扩展复制到app/extensions文件夹。 在browser-laptop文件夹中打开两个命令提示符。 在第一个中，启动npm run watch ，然后等待 webpack 完成构建 Brave 的 Electron 应用程序。 它应该说，“webpack: bundle 现在是有效的。” 否则，你会遇到一些问题。

勇敢001
（查看大图）

然后，在第二个命令提示符下，启动npm start ，这将启动我们稍微自定义的 Brave 版本。

在 Brave 中，导航到about:extensions ，您应该会在地址栏中看到显示和加载的扩展程序。

勇敢002
（查看大图）

在每个浏览器中调试扩展

适用于所有浏览器的提示：使用console.log() ，只需从扩展程序流中记录一些数据。 大多数时候，使用浏览器的开发人员工具，您将能够单击记录它的 JavaScript 文件以打开它并进行调试。

微软边缘

要在页面上下文中调试客户端脚本部分，您只需要打开F12即可。 然后，单击“调试器”选项卡并找到您的扩展程序的文件夹。

打开你想调试的脚本文件——在我的例子中是dareangel.client.js然后像往常一样调试你的代码，设置断点等。

DebugInEdge001
（查看大图）

如果您的扩展程序创建了一个单独的选项卡来完成其工作（例如我们的 Vorlon.js 团队在商店中发布的页面分析器），只需在该选项卡上按F12即可对其进行调试。

DebugInEdge002
（查看大图）

如果您想调试弹出页面，您首先需要获取您的扩展程序的 ID。 为此，只需进入扩展的属性，您就会找到一个 ID 属性：

DebugInEdge003

然后，您需要在地址栏中输入类似ms-browser-extension://ID_of_your_extension/yourpage.html 。 在我们的例子中，它将是ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html 。 然后，只需在此页面上使用F12 ：

DebugInEdge004
（查看大图）

谷歌浏览器、歌剧、维瓦尔第、勇敢

因为 Chrome 和 Opera 依赖于相同的 Blink 代码库，所以它们共享相同的调试过程。 尽管 Brave 和 Vivaldi 是 Chromium 的分支，但它们大部分时间也共享相同的调试过程。

要调试客户端脚本部分，请在您要调试的页面上打开浏览器的开发人员工具（按F12 、 Control + Shift + I或⌘ + ⌥ + I ，具体取决于您使用的浏览器或平台）。

然后，单击“内容脚本”选项卡并找到您的扩展程序的文件夹。 打开您要调试的脚本文件，并像调试任何 JavaScript 代码一样调试您的代码。

DebugInChrome001
（查看大图）

我们使用的弹出式 UI 页面非常简单，它将显示由内容脚本返回的图像列表，该列表由 flexbox 容器内的内容脚本返回。 它加载start.js脚本，该脚本会立即创建一个dareangel.dashboard.js实例，以向内容脚本发送一条消息，以获取当前可见选项卡中图像的 URL。

这是 UI 页面中的代码，请求内容脚本的 URL：

 browser.tabs.query({ active: true, currentWindow: true }, (tabs) => { browser.tabs.sendMessage(tabs[0].id, { command: "requestImages" }, (response) => { this._imagesList = JSON.parse(response); this._imagesList.forEach((element) => { var newImageHTMLElement = document.createElement("img"); newImageHTMLElement.src = element.url; newImageHTMLElement.alt = element.alt; newImageHTMLElement.tabIndex = this._tabIndex; this._tabIndex++; newImageHTMLElement.addEventListener("focus", (event) => { if (COMPUTERVISIONKEY !== "") { this.analyzeThisImage(event.target.src); } else { var warningMsg = document.createElement("div"); warningMsg.innerHTML = "
 请在另一个选项卡中生成计算机视觉密钥。
 ";
                    this._targetDiv.insertBefore(warningMsg, this._targetDiv.firstChild);
                    browser.tabs.create({ active: false, url: "https://www.microsoft.com/cognitive-services/en-US/sign-up?ReturnUrl=/cognitive-services/en-us/subscriptions?productId =%2fproducts%2f54d873dd5eefd00dc474a0f4" });
                }
            });
            this._targetDiv.appendChild(newImageHTMLElement);
        });
    });
});

我们正在创建图像元素。 如果每个图像具有焦点，它将触发一个事件，查询计算机视觉 API 以供审查。

这是通过这个简单的 XHR 调用完成的：

 analyzeThisImage(url) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState == 4 && xhr.status == 200) { var response = document.querySelector('#response'); var reponse = JSON.parse(xhr.response); var resultToSpeak = `With a confidence of ${Math.round(reponse.description.captions[0].confidence * 100)}%, I think it's ${reponse.description.captions[0].text}`; console.log(resultToSpeak); if (!this._useBingTTS || BINGSPEECHKEY === "") { var synUtterance = new SpeechSynthesisUtterance(); synUtterance.text = resultToSpeak; window.speechSynthesis.speak(synUtterance); } else { this._bingTTSclient.synthesize(resultToSpeak); } } }; xhr.onerror = (evt) => { console.log(evt); }; try { xhr.open('POST', 'https://api.projectoxford.ai/vision/v1.0/describe'); xhr.setRequestHeader("Content-Type", "application/json"); xhr.setRequestHeader("Ocp-Apim-Subscription-Key", COMPUTERVISIONKEY); var requestObject = { "url": url }; xhr.send(JSON.stringify(requestObject)); } catch (ex) { console.log(ex); } } view raw

以下文章将帮助您了解此计算机视觉 API 的工作原理：

  • “分析图像版本 1.0”，Microsoft 认知服务
  • “计算机视觉 API，v1.0”，微软认知服务
    这将通过网页中的交互式控制台向您展示如何使用正确的 JSON 属性调用 REST API，以及您将获得的 JSON 对象。 了解它的工作原理以及如何调用它很有用。

在我们的例子中，我们使用 API 的describe功能。 您还会在回调中注意到，我们将根据您的选择尝试使用Web Speech API或Bing Text-to-Speech服务。

那么，这里是这个小扩展的全局工作流程：

幻灯片4
（查看大图）

在每个浏览器中加载扩展

让我们快速回顾一下如何在每个浏览器中安装扩展。

先决条件

从某个地方的 GitHub 下载或克隆我的小扩展到您的硬盘驱动器。

此外，修改dareangel.dashboard.js以添加至少一个计算机视觉API 密钥。 否则，扩展程序将只能显示从网页中提取的图像。

微软边缘

首先，您至少需要一个 Windows 10 周年更新（OS Build 14393+）才能支持 Edge 中的扩展。

然后，打开 Edge 并在地址栏中输入about:flags 。 选中“启用扩展开发者功能”。

EnableInEdge001

单击 Edge 导航栏中的“...”，然后单击“扩展”，然后单击“加载扩展”，然后选择克隆我的 GitHub 存储库的文件夹。 你会得到这个：

单击这个新加载的扩展程序，然后启用“地址栏旁边的显示按钮”。

EnableInEdge003

请注意“重新加载扩展”按钮，这在您开发扩展时很有用。 在开发过程中您不会被迫删除或重新安装它； 只需单击按钮即可刷新扩展程序。

导航到 BabylonJS，然后单击 Dare Angel (DA) 按钮以跟随视频中所示的相同演示。

谷歌浏览器、Opera、维瓦尔第

在 Chrome 中，导航到chrome://extensions 。 在 Opera 中，导航到opera://extensions 。 在 Vivaldi 中，导航到vivaldi://extensions 。 然后，启用“开发者模式”。

单击“加载解压缩的扩展程序”，然后选择您提取我的扩展程序的文件夹。

铬001
（查看大图）

导航到 BabylonJS，然后打开扩展以检查它是否正常工作。

火狐浏览器

你在这里有两个选择。 首先是临时加载您的扩展程序，这与在 Edge 和 Chrome 中一样简单。

打开 Firefox，导航到about:debugging并单击“Load Temporary Add-on”。 然后，导航到扩展的文件夹，并选择manifest.json文件。 而已！ 现在去 BabylonJS 测试扩展。

火狐001
（查看大图）

此解决方案的唯一问题是每次关闭浏览器时，都必须重新加载扩展程序。 第二种选择是使用 XPI 打包。 您可以在 Mozilla 开发者网络上的“扩展打包”中了解更多信息。

勇敢的

Brave 的公共版本没有嵌入“开发者模式”来让您加载未签名的扩展。 您需要按照“在 Brave 中加载 Chrome 扩展程序”中的步骤构建您自己的版本。

如那篇文章所述，克隆 Brave 后，您需要在文本编辑器中打开extensions.js文件。 找到下面的行，并为您的扩展插入注册码。 就我而言，我刚刚添加了最后两行：

 // Manually install the braveExtension and torrentExtension extensionInfo.setState(config.braveExtensionId, extensionStates.REGISTERED) loadExtension(config.braveExtensionId, getExtensionsPath('brave'), generateBraveManifest(), 'component') extensionInfo.setState('DareAngel', extensionStates.REGISTERED) loadExtension('DareAngel', getExtensionsPath('DareAngel/')) view raw

将扩展复制到app/extensions文件夹。 在browser-laptop文件夹中打开两个命令提示符。 在第一个中，启动npm run watch ，然后等待 webpack 完成构建 Brave 的 Electron 应用程序。 它应该说，“webpack: bundle 现在是有效的。” 否则，你会遇到一些问题。

勇敢001
（查看大图）

然后，在第二个命令提示符下，启动npm start ，这将启动我们稍微自定义的 Brave 版本。

在 Brave 中，导航到about:extensions ，您应该会在地址栏中看到显示和加载的扩展程序。

勇敢002
（查看大图）

在每个浏览器中调试扩展

适用于所有浏览器的提示：使用console.log() ，只需从扩展程序流中记录一些数据。 大多数时候，使用浏览器的开发人员工具，您将能够单击记录它的 JavaScript 文件以打开它并进行调试。

微软边缘

要在页面上下文中调试客户端脚本部分，您只需要打开F12即可。 然后，单击“调试器”选项卡并找到您的扩展程序的文件夹。

打开你想调试的脚本文件——在我的例子中是dareangel.client.js然后像往常一样调试你的代码，设置断点等。

DebugInEdge001
（查看大图）

如果您的扩展程序创建了一个单独的选项卡来完成其工作（例如我们的 Vorlon.js 团队在商店中发布的页面分析器），只需在该选项卡上按F12即可对其进行调试。

DebugInEdge002
（查看大图）

如果您想调试弹出页面，您首先需要获取您的扩展程序的 ID。 为此，只需进入扩展的属性，您就会找到一个 ID 属性：

DebugInEdge003

然后，您需要在地址栏中输入类似ms-browser-extension://ID_of_your_extension/yourpage.html 。 在我们的例子中，它将是ms-browser-extension://DareAngel_vdbyzyarbfgh8/dashboard.html 。 然后，只需在此页面上使用F12 ：

DebugInEdge004
（查看大图）

谷歌浏览器、歌剧、维瓦尔第、勇敢

因为 Chrome 和 Opera 依赖于相同的 Blink 代码库，所以它们共享相同的调试过程。 尽管 Brave 和 Vivaldi 是 Chromium 的分支，但它们大部分时间也共享相同的调试过程。

要调试客户端脚本部分，请在您要调试的页面上打开浏览器的开发人员工具（按F12 、 Control + Shift + I或⌘ + ⌥ + I ，具体取决于您使用的浏览器或平台）。

然后，单击“内容脚本”选项卡并找到您的扩展程序的文件夹。 打开您要调试的脚本文件，并像调试任何 JavaScript 代码一样调试您的代码。

DebugInChrome001
（查看大图）

要调试您的扩展程序将创建的选项卡，它与 Edge 完全相同：只需使用开发人员工具。

DebugInChrome002
（查看大图）

对于 Chrome 和 Opera，要调试弹出页面，请右键单击地址栏旁边的扩展程序按钮并选择“检查弹出窗口”，或打开弹出窗口的 HTML 窗格并在其中右键单击“检查”。 ” Vivaldi 仅支持右键单击，然后打开 HTML 窗格内的“检查”。

DebugInChrome003
（查看大图）

对于 Brave，这与使用 Edge 的过程相同。 您首先需要在about:extensions中找到与您的扩展关联的 GUID：

勇敢调试001

然后，在一个单独的选项卡中，打开您想要调试的页面——在我的例子中是chrome-extension://bodaahkboijjjodkbmmddgjldpifcjap/dashboard.html并打开开发人员工具。

勇敢调试002
（查看大图）

对于布局，您可以使用Shift + F8获得一些帮助，这将让您检查 Brave 的完整框架。 你会发现 Brave 是一个使用 React 的 Electron 应用程序！

例如，请注意data-reactroot属性。

勇敢调试003
（查看大图）

注意：我不得不稍微修改 Brave 扩展的 CSS，因为它当前默认显示具有透明背景的弹出窗口，而且我的图像集合的高度也有一些问题。 我在 Brave 中将其限制为四个元素。

火狐浏览器

Mozilla 有关于调试 Web 扩展的非常好的文档。

对于客户端脚本部分，它与 Edge、Chrome、Opera 和 Brave 中的相同。 只需在您要调试的选项卡中打开开发人员工具，您就会找到一个moz-extension://guid部分，其中包含要调试的代码：

DebugInFirefox001
（查看大图）

如果您需要调试您的扩展将创建的选项卡（如 Vorlon.js 的页面分析器扩展），只需使用开发人员工具：

DebugInFirefox002
（查看大图）

最后，调试弹出窗口有点复杂，但在文档的“调试弹出窗口”部分中有很好的解释。

DebugInFirefox003
（查看大图）

在每个商店中发布您的扩展

每个供应商都有详细的文档说明在其商店中发布您的扩展程序要遵循的过程。 他们都采取类似的方法。 您需要将扩展​​打包成特定的文件格式——大多数情况下，是一个类似 ZIP 的容器。 然后，您必须在专用门户中提交，选择定价模型并等待审核过程完成。 如果被接受，任何访问扩展程序商店的用户都可以在浏览器中下载您的扩展程序。

以下是各种流程：

  • 谷歌：“在 Chrome 网上应用店中发布”
  • Mozilla：“发布你的 WebExtension”
  • Opera：“出版指南”
  • 微软：“打包 Microsoft Edge 扩展”

请注意，向 Windows 应用商店提交 Microsoft Edge 扩展目前是一项受限功能。 联系 Microsoft Edge 团队，提出加入 Windows 应用商店的申请，他们会考虑为你提供未来的更新。

我试图分享我从开发我们的 Vorlon.js 页面分析器扩展和这个小小的概念证明中学到的尽可能多的东西。

一些开发人员还记得通过各种实现来构建他们的扩展的痛苦——无论是使用不同的构建目录，还是使用稍微不同的扩展 API，或者遵循完全不同的方法，例如 Firefox 的 XUL 扩展或 Internet Explorer 的 BHO 和 ActiveX。

很高兴看到，今天，使用我们常规的 JavaScript、CSS 和 HTML 技能，我们可以使用相同的代码库并跨所有浏览器构建出色的扩展！

如有任何反馈，请随时在 Twitter 上联系我。