创建 Chrome 扩展程序：分步指南

Q神日志 2023-07-09 08:56:13

如果我问你一个问题，你在浏览 Chrome 或任何浏览器（例如 Firefox 或 Edge）时是否使用过 Grammarly 或广告拦截器？你的答案是肯定的，那么它们是什么？它们被称为扩展。因此，在这篇博客中，我将指导您如何从头开始制作 Chrome 扩展程序。

什么是扩展以及我们为什么要使用它们？

在开始编码之前，让我们先了解一下什么是扩展。它是一个用 HTML、CSS 和 javascript 编写的小程序，通过浏览器提供的 API（应用程序编程接口）与浏览器交互，添加某些功能（如 Adblocker 或密码管理器）以增强您的浏览体验。

我们可以使用它们来自定义或添加浏览器未提供的功能。您可以从浏览器各自的网上商店找到这些扩展程序，例如适用于 Chrome 的Chrome 网上商店、适用于 Firefox 的附加组件。

您可以根据您的特定需求选择扩展程序，例如生产力、密码管理器、广告拦截器、视频速度控制器等等。

延期需要准备什么材料？

为了进行扩展，您需要三件事，让我们简要讨论一下这些事情是什么：

想法：您的扩展要做什么，其核心特性和功能是什么？在这种情况下，我们将创建一个扩展，其唯一的工作是当我们单击网站上的任何元素时删除它。我们称之为“部分橡皮擦”
接下来，设置开发文件夹：在计算机上创建一个专用文件夹来组织扩展的文件。将该文件夹命名为“Section Eraser”（您可以根据需要指定任何名称，只是该名称定义了我们要制作的内容）
Html、CSS 和 javascript 基础知识，因为我们将使用这些内容来编写 Chrome 扩展程序。

编码我们的扩展

打开 VS Code 并导航到您的部分橡皮擦文件夹。然后创建这些文件：
popup.html：此 HTML 文件表示扩展程序弹出窗口的用户界面，当用户单击扩展程序的图标时会出现该窗口。这是一个非常基本的扩展，只有一个标题和一个按钮，没什么花哨的

Manifest .json 文件以及为什么在构建 Chrome 扩展程序时如此重要？

接下来，我们需要创建一个manifest.json 文件。该文件是创建 Chrome 扩展程序时的关键组件。它充当配置文件，提供有关浏览器扩展的基本信息。

让我们了解该文件的核心组件：

manifest_version：指定清单文件格式的版本。目前，版本为3。
name：您的扩展名。
version：您的扩展的版本号。
描述：对您的扩展功能的简要描述。
图标：定义用于您的扩展的不同大小的图标的对象。
权限：列出您的扩展所需的权限的数组，例如访问选项卡或特定网站。根据扩展程序的功能指定所需的权限。
action：指定扩展程序的浏览器操作的行为（通常是浏览器工具栏中显示的图标）。
default_popup：当用户单击扩展程序图标时用作弹出窗口的 HTML 文件。
default_icon：定义不同大小的扩展默认图标的对象
脚本：组成后台脚本的 JavaScript 文件数组。
background：指定在后台运行并处理的后台脚本

接下来，我们需要创建三个 .js 文件 popup.js content.js 和 background.js 这些是我们的主要 js 文件，我们将在其中编写所有逻辑和 API 来执行所需的操作。

让我们从popup.js文件开始，这将是我们的主文件

此代码等待 DOM 完全加载（DOMContentLoaded 事件），然后向 ID 为“select-button”的按钮添加单击事件侦听器。单击该按钮时，它会检索有关活动选项卡的信息并向该选项卡中的内容脚本发送一条消息，指示应选择一个部分（消息负载 { selectSection: true }）。您可以参考 Chrome API 开发者部分了解更多信息。

接下来是content.js文件内容脚本是当扩展在特定网页上激活或匹配某些 URL 模式时由浏览器注入网页的 JavaScript 文件。在我们的例子中，它是检测网站某个部分的点击事件，然后删除该部分

接下来是background.js，我们已经讨论过这段代码，所以我们现在不讨论

您可以为您的扩展添加一些样式。由你决定。之后为您的扩展程序添加一些具有特定尺寸的图标，例如 16*16,48*48,128*128 并确保它们是 jpg 或 png

现在我们已经完成了编码部分，让我们检查/测试我们的扩展，但在继续之前让我们看一下最终的文件夹结构

使用 Chrome 浏览器测试我们的扩展

打开 Chrome 浏览器并在 URL 部分中输入 chrome://extensions/。它将打开 Chrome 扩展页面。

现在单击屏幕右侧的开发者模式。它会给你三个按钮，如上图所示
现在单击加载解压按钮，它将打开一个弹出屏幕，要求您上传包含我们讨论过的所有文件的扩展文件夹。上传它们
一段时间后，您将在此页面上看到您的扩展（见上图）以及您已安装的其他扩展。
要进行检查，请打开任何网站，然后单击您的扩展程序图标，然后它将打开带有按钮的扩展程序弹出窗口，现在单击该按钮，然后单击该网站的任何部分，看看神奇的地方，它已删除该部分

注意：您可以使用此代码来进行扩展。

恭喜！您已成功学习了创建 Chrome 扩展程序的分步过程。现在继续制作一些很酷的扩展并与其他人分享

如果您已经读到这里，感谢您的阅读，分享并关注以获取更多类似的内容

...全文