让我们构建一个 Chrome 扩展程序！

2025-05-27

让我们构建一个 Chrome 扩展程序！

最近我创建了我的第一个 Chrome 扩展程序。它叫做Catify，它可以将页面上的所有图片替换成猫的图片。现在，每个猫崇拜者在向猫神祈祷时都能获得更多支持。这是我第一次尝试开发 Chrome 扩展程序，整个过程充满乐趣。你也想创建自己的 Chrome 扩展程序吗？太棒了，我会教你怎么做。让我们一起动手吧，穿上你的霍比特人脚，大声喊出“我要去冒险了！”。别担心，你第二顿早餐之前就能完成。

Chrome 扩展程序是什么

Chrome 本身就是一款非常出色的浏览器，但您可以通过添加扩展程序让它更加出色。要查看有哪些扩展程序可用，您可以前往Chrome 网上应用店。快来浏览所有精彩的扩展程序吧。现在，想象一下，您自己的扩展程序也能在该商店中运行。让我们一起来实现吧。

我们正在建造什么？

虽然你可能已经有了几十个很棒的扩展程序创意，但我们应该先了解一下基础知识。因此，对于我们的第一个扩展程序，我们将采用 Google 自己的一个基本示例 Page Redder，并对其进行一些改进。我们将创建一个扩展程序，每次按下扩展程序图标时，页面背景颜色都会变为随机颜色。

开始创建清单

确保设置好源代码管理，并将你常用的编辑器指向正确的位置。我们首先创建一个清单文件，该文件会告诉 Chrome 关于你的扩展程序的所有信息，例如名称、图标，以及它所需的权限和代码所在的位置。让我们创建一个清单文件，新建一个名为 的文件manifest.json，并在其中填充以下内容：

{
  "name": "Make it rain(bow)",
  "description": "Embrace the inner unicorn and reflect on the page background.",
  "version": "0.0.1",
  "manifest_version": 2
}
Enter fullscreen mode Exit fullscreen mode

那么，我们在这里看到了什么？首先是name。这是扩展程序在商店、扩展程序概览以及（除非另有说明）将图标悬停在浏览器内时所看到的内容。然后是description，这就像标题、商店中显示的描述和扩展程序概览。接下来是version扩展程序的。您应该在扩展程序上使用语义版本控制，并在每次更新扩展程序时增加它。最后我们看到manifest_version，这告诉 Chrome 此文件是用清单版本 2 编写的。如果您想支持 18 之前的 Chrome，您应该使用清单版本 1，但您将失去一些较新的功能。现在基础已经到位，我们可以慢慢添加更多内容。

悬停图标时更改标题

默认情况下，它会显示扩展名，但不必相同。让我们更改它！将以下内容添加到manifest.json.

"browser_action": {
  "default_title": "Unleash the unicorn dust!"
},
Enter fullscreen mode Exit fullscreen mode

现在，当用户将鼠标悬停在图标上时，它将显示文本Unleash the unicorn dust!。

权限和脚本

在构建扩展程序的实际代码之前，我们需要在清单中添加另外两项内容。首先，我们需要定义它需要拥有的权限。在本例中，我们只需要一个权限，即访问当前选项卡。让我们来定义它。将以下内容添加到manifest.json.

"permissions": [
  "activeTab"
],
Enter fullscreen mode Exit fullscreen mode

接下来，我们需要运行一些脚本来实际更改背景。我们将在背景脚本中执行此操作，该脚本manifest.json也需要在根目录中定义。将其添加到根目录中。

"background": {
  "scripts": ["background.js"],
  "persistent": false
},
Enter fullscreen mode Exit fullscreen mode

因此，我们将在名为 的文件中定义逻辑background.js。此外，它不会持久化，只有当扩展程序使用 chrome.webRequest API 阻止或修改网络请求时，才应该将其持久化。是时候构建实际逻辑了！

更改页面背景颜色

好的，我们告诉 Chrome 逻辑放在了 中background.js，所以让我们制作这个文件并构建逻辑。

chrome.browserAction.onClicked.addListener(function(tab) {
  const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'violet'];

  const colorPicker = () => {
    const randomIndex = Math.floor(Math.random() * colors.length);
    return colors[randomIndex];
  }

  chrome.tabs.executeScript({
    code: 'document.body.style.backgroundColor="' + colorPicker() + '"',
  });
});
});
Enter fullscreen mode Exit fullscreen mode

我们简单看一下代码。第一行代码告诉我们，我们为 browserAction 的 onClick 事件添加了一个监听器。什么？什么？什么？！browserAction 是你在 Chrome 浏览器中添加扩展程序时看到的按钮，onClick 是你点击该按钮时发生的事件，添加监听器意味着当执行该点击操作时会触发此事件。所以，当你在 Chrome 浏览器里点击按钮时，这个方法就会被执行。

代码本身并不精彩。我们有一个颜色列表，一个从列表中随机选取颜色的方法，以及一个更改背景颜色的脚本。我们通过在浏览器标签页中执行一段 JavaScript 来实现，该脚本会在实际页面中执行此操作。

添加图标

在试用我们的扩展程序之前，我们先来给它添加一些美观的元素。我们将定义此扩展程序在浏览器顶部显示的图标。首先，创建任意 128x128 的图像。现在，您需要将此图像保存为多种格式：

  • 128x128，用于 Chrome 商店
  • 48x48，安装时使用
  • 32x32，Windows 常用
  • 16x16，在 Chrome 本身中用作显示在屏幕顶部的图标。

要添加这些图像，我们在 中更改以下内容manifest.json。将其添加到以下browser_action部分：

"default_icon": "icon16.png"
Enter fullscreen mode Exit fullscreen mode

这里我们只需要指定 16x16 的图片，因为图标在任何设备上都是 16x16 的。然后把这部分内容添加到根节点：

"icons": { 
  "16": "icon16.png",
  "32": "icon32.png",
  "48": "icon48.png",
  "128": "icon128.png" 
},
Enter fullscreen mode Exit fullscreen mode

这些图标可以在您的应用程序中使用，并且具有所有所需的尺寸。

让我们尝试一下吧！

你兴奋吗？当然兴奋，因为我们要在自己的浏览器中测试我们的扩展程序！打开你的 Chrome，点击菜单按钮，选择“更多工具” > “扩展程序” ，进入你的扩展程序页面。你首先要做的是启用开发者模式。你可以在右上角找到它。启用它。

现在，您应该会在页面左上角看到三个按钮。它们分别允许您加载已解压的扩展程序、打包扩展程序或强制更新。点击第一个按钮即可加载已解压的扩展程序。

现在浏览到你创建扩展程序的文件夹，然后按Select folder。你的扩展程序现在就开始安装了，真是太激动了！安装完成后，你应该会在扩展程序页面和浏览器顶部看到它。

快来试试吧！打开新标签页，前往 dev.to，点击彩虹图标。再按一次……再按一次……再按一次……尝尝彩虹的味道！

有用！

发布你的扩展

只剩一件事要做，那就是发布你出色的Make it rain(bow)扩展程序。让我们来看看具体步骤。

  • 创建一个包含所有已创建文件的 zip 文件。因此manifest.json， 、background.js以及所有图标都应该包含在内。
  • 转到https://chrome.google.com/webstore/devconsole/并使用您的 Google 帐户登录。

接受许可证后，您可以继续扩展。

  • NEW ITEM按下右上角的按钮，将打开一个对话框，您应该在其中选择在步骤 1 中创建的 .zip 文件。

  • 上传后，系统会打开一个表单，要求您提供一些详细信息，然后才能启用您的扩展程序。您至少需要填写以下内容：

    • 标题
    • 概括
    • 详细描述
    • 类别
    • 语言
    • 一张截图让我们填写这些。

  • 按下“保存草稿”，如果所有信息填写正确，你就可以按下“发布项目”了。点击它，现在只需确认即可。当你搜索内心的独角兽时，你感觉到肚子咕咕叫着想要第二顿早餐，于是你迅速按下PUBLISH，你的冒险就结束了。你刚刚完成了你的第一个扩展！

完成

感谢您与我一起踏上这段冒险之旅，希望您能有所收获。正如您所见，创建 Chrome 扩展程序并不难。但对于尚未发布的扩展程序，想出一个好点子，那又是另一回事了。我只能祝您好运，并希望很快能看到您的扩展程序！

资源

虽然互联网上有很多关于扩展的资料，但我主要使用了谷歌文档，因为它非常清晰完整。里面还有很多实际的例子：

https://developer.chrome.com/extensions

您可以在此处找到使用的示例代码：
https://github.com/JHotterbeekx/make-it-rainbow-chrome-extension

文章来源：https://dev.to/jhotterbeekx/let-s-build-a-chrome-extension-3n3k
Devto 翻译
PREV
Phoenix & Elixir 学习计划
NEXT
分析针对我的网站的攻击