如何制作 Chrome 扩展程序

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

嗯，这篇文章最初并不是以博文的形式出现的，但是，我想让大家知道我已经成功开发了一个 Chrome 扩展程序！（不过我并没有发布它）

简而言之：这是 GitHub 代码库：https://github.com/KevLehman/visible-ads

要求！

1. VSCode（或类似编辑器）
2. Git（用于上传你的项目，或克隆已完成的项目！）
3. 为您的应用创建一个图标（您可以使用此网站将您的图像文件转换为图标）
4. 耐心 ;）

开始吧！

我们将创建一个扩展程序，用于在搜索结果页面上突出显示（带边框）Google 广告（以便任何人都能识别它们！）。我们可以手动完成，但我们是开发者，所以，让我们开发一个扩展程序来实现它吧！

我们先来创建一个文件夹，用来存放扩展程序的核心代码。我会给它起个名字visible-ads（你可以随意命名）。

现在你已经有了文件夹，cd进入文件夹并创建一个manifest.json文件（每个 Chrome 扩展程序都应该有这个文件，因为这是它们的展示卡片）。创建完成后，用你选择的编辑器打开它。

在该文件中，我们将添加以下信息（目前暂定）：

这样，我们就把扩展程序的信息告诉了 Chrome。我们会在编写扩展程序的过程中在此处添加更多信息。

现在，我们来创建第一个 JS 文件。我们把它命名为 `.js` background.js。这个文件将包含一些逻辑，这些逻辑会在扩展程序启动时在后台运行。和之前一样，以下是文件内容，我们稍后会进行讲解：

让我们来看看一些细节：

• 首先，我们使用了一个提供给所有扩展的全局变量：chrome。这个全局变量包含一个 API，允许我们与浏览器进行交互。诸如storage或之类的元素runtime只能通过这个变量访问。
• 我们使用chrome.runtime.onInstalledAPI 添加事件监听器。当我们的扩展程序安装到浏览器上时，该事件将被触发。
• 在该函数的回调函数中，我们将使用另一个浏览器 API 来与浏览器存储进行交互。我们将在其中添加一个名为 `<variable_name>` 的变量，hide用于修改脚本的行为。
• 我们使用的另一个 API 是该declarativeContentAPI。该 API 允许我们的扩展程序决定其运行在哪些域名上。目前，我们将其限制在 [此处应填写域名] 上运行google.com。要了解有关此 API 的更多信息，您可以查看此链接。

浏览器如何知道这个文件应该在后台运行？manifest.json别担心！将以下代码添加到您的manifest.json文件中：

根据 Google 开发者文档，要使用declarativeContentAPI storage，我们需要先request获取它们的权限。让我们通过设置扩展程序所需的权限来实现这一点。在哪里设置呢？就在配置manifest.json文件中！再次打开该文件，并添加以下几行：（注意：为了简单起见，我们在这里添加权限，但稍后会用到它。）

activeTab

现在，让我们开始构建应用程序逻辑吧！

扩展程序的着陆页（其实不是）

我们的扩展程序需要一些用户可以看到并与之交互的内容！所以，让我们创建一个名为 `<filename>` 的新文件action.html（我保证没有 CSS），并向其中添加一些代码： 这个文件会生成类似这样的内容（这样你就知道它有多丑了）：

让我们在manifest.json文件中添加一些代码，以便浏览器知道这是我们的“着陆页”（实际上，它将是一个弹出窗口）：

• 我们使用相同的配置来设置页面的默认标题和图标，以及每次用户点击图标时（在 Chrome 扩展程序区域）显示的弹出窗口。

您可能已经注意到，我们引入了一个script名为 `<add>` 的组件action.js，但我们还没有创建它！所以让我们来创建它！创建一个名为 `<add>` 的文件action.js。这部分将是我们的扩展程序与选项卡 DOM 交互的主要入口。

在第一行，我们会调用一个函数document.addEventListener('DOMContentLoaded...来确保脚本只在所有条件都满足后才运行（以避免出现一些undefined奇怪的问题）。让我们看看文件的前半部分内容：

• 我们正在获取我们在 HTML 文件中创建的按钮和span我们创建的状态项。
• 我们使用storageAPI 获取之前定义的变量的值hide。我们不需要同步执行，所以就让它保持同步吧。
• 从获取值后hide，我们将使用该值动态地将标签的值设置status为“是active”或“否” inactive。这不会在每次点击时都调用，而是在每次点击扩展程序的图标时调用。

文件的第二部分是这样的：

• 我们在按钮上添加了一个onclick监听器，它将执行真正的操作！
• 在这个内部，处理程序会将保存的值更新storage为当前值的反值（实际上是切换它）。
• 在此次storage调用的回调函数中，我们status再次更新标签。
• 之后，我们将使用一个新的 Chrome API 与浏览器交互。这个tabsAPI 允许我们查询浏览器以获取想要使用的标签页。例如，我们可以active通过运行 `chrome://tab_tab_name` 来查询特定标签页chrome.tabs.query({ active: true }, ...)。目前，我们不直接查询，而是使用其便捷的 `get_tab_name` 函数来获取当前标签页。与其他所有 API 一样，此 API 是异步的，因此相关工作需要在回调函数中完成。
• 接下来，我们使用另一个函数来与名为content脚本的东西进行通信。内容脚本是一个在网页上下文中运行的文件，它允许我们与目标标签页的 DOM 进行交互。在我们现有的文件中，我们只能与扩展程序生成的 DOM（即我们上面创建的 HTML 文件）进行交互。
• 我们将内容脚本要运行的命令作为消息传递，并将值传递给它shouldToggle。
• 在回调函数中（消息接收并处理完毕之后），我们记录结果值。在实际应用中，这里通常会执行其他操作，但由于这是一篇博客文章，这里只做一个简单的示例console.log就足够了。

等等！我们没有任何内容脚本！！！

别着急。我们来创建一个！创建content.js文件并添加以下代码：

• 我们的函数addStyles将在选项卡的 DOM 中创建一个新的 CSS 类，并添加我们想要的边框。
• 我们的函数showAdBorder会遍历所有广告（截至撰写本文时，所有广告都包含该类ads-ad），并添加我们创建的样式。
• 它们removeAdBorder会做同样的事情，但会删除该类而不是
• 另一个使用的 Chrome API：runtime.onMessage允许标签页监听我们传递给它的任何消息。我们通过调用 . 来传递消息，就像之前看到的那样chrome.tabs.sendMessage。
• 这里，如果收到的命令是init（下次命名会更好……），我们将调用showAdBorder，removeAdBorder否则调用。
• 完成后，该函数会通过调用其他函数将响应发送回发射器sendResponse。如果出现故障，您也可以使用此方法发出错误！

现在我们有了content脚本！哇哦！太棒了！但是等等，浏览器怎么知道这是一个内容脚本呢？我们再打开manifest.json文件，添加以下几行代码：

现在我们有了一个可以正常工作的扩展程序！太棒了！

现在，我们再添加最后一项。我们希望默认启用此行为，对吧？所以，让我们通过onload在content.js文件中设置事件监听器来实现这一点！添加以下代码：

请保存所有文件（如果您还没有保存的话），因为我们要上传我们的扩展程序！

• 在浏览器中找到它chrome://extensions。请确保已在扩展程序页面启用开发者模式！
• 点击Load Unpacked按钮，找到你正在处理的文件夹（在我的例子中，它位于……）。~/Documents/visible-ads
• 请稍等片刻，直到页面加载完毕。如果一切正常，您应该会在仪表盘上看到类似这样的内容：
• 如果你能看到它，就说明它正在运行！

我们来试试。访问[网站地址] www.google.com，然后找一些包含广告的内容，例如[网站地址]basecamp或[网站地址] 。amazon

如您所见，这里有一条广告。我们如何判断它是广告呢？看它周围的蓝色边框。现在，您可以与他人分享此扩展程序，这样他们就不会再将广告与自然搜索结果混淆了！

让我们用一件一开始就应该做的事情来结束这个扩展。在终端中运行命令git init git add .，git commit -m "your message goes here"这样你的项目就安全了，你可以自由地修改它。例如，你可以修改styles变量来添加背景颜色，就像以前广告里那样。

感谢阅读！祝您编程愉快！