如何制作 Chrome 扩展 - 浏览器插件开发教程

      构建 Chrome 扩展程序可能会让人不知所措。它与构建 Web 应用程序的不同之处在于，您不想在浏览器上放置过多的 JavaScript 开销，因为您的扩展程序将与您正在访问的网站一起运行。您通常也无法从当今的捆绑器和框架中提供的捆绑和调试中受益。

　　当我决定构建一个 Chrome 扩展时，我发现关于构建一个的博客文章和文章的数量非常少。当您想使用一种较新的技术（如 TailwindCSS）时，信息就更少了。

　　在本教程中，我们将了解如何使用 Parcel.js 构建 Chrome 扩展程序进行捆绑和观看，并使用 TailwindCSS 进行样式设置。我们还将讨论如何将您的样式与网站分开以避免碰撞 CSS 。

　　有几种类型的 Chrome 扩展值得一提：

　　内容脚本：第一种 Chrome 扩展是最常见的。它在网页的上下文中运行，可用于修改其内容。这是我们将要创建的扩展类型。

　　弹出窗口：基于弹出窗口的扩展使用地址栏右侧的扩展图标打开一个弹出窗口，其中可以包含您喜欢的任何 HTML 内容。

　　选项 UI：你猜对了！这是一个用于将选项自定义为扩展的 UI。可以通过右键单击扩展图标并选择“选项”或从 Chrome 扩展列表导航到扩展页面来访问它chrome://extensions

　　DevTools 扩展：“DevTools 扩展为 Chrome DevTools 添加了功能。它可以添加新的 UI 面板和侧边栏，与检查的页面交互，获取有关网络请求的信息等等”。-谷歌浏览器文档

　　在本教程中，我们将通过在网页上显示内容并与 DOM 交互来构建一个仅使用内容脚本的 Chrome 扩展程序。

　　如何使用 Parcel.js V2 捆绑您的 Chrome 扩展程序

　　Parcel.js 是一个零配置的 Web 应用程序捆绑器。它可以使用任何类型的文件作为入口点。它使用简单，适用于任何类型的应用程序，包括 Chrome 扩展程序。

　　首先创建一个名为的新文件夹demo-extension（确保您已安装yarn或npm安装）

　　$ mkdir demo-extension && cd demo-extension && yarn init -y

　　接下来，我们将安装 Parcel 作为本地依赖项：

　　$ yarn add -D parcel@next

　　现在创建一个名为的新目录src：

　　$ mkdir src

　　添加清单文件

　　每个浏览器扩展都需要一个清单文件。这是我们定义扩展的版本和元数据的地方，还有使用的脚本（内容、背景、弹出窗口、.etc）和权限（如果有）。

　　您可以在 Chrome 的文档中找到完整的架构：https ://developer.chrome.com/extensions/manifest

　　让我们继续添加一个包含此内容的新src文件manifest.json：

　　现在，在我们详细了解 chrome 扩展的工作原理以及您可以使用它们制作的东西之前，我们将设置TailwindCSS

　　如何在 Chrome 扩展程序中使用 TailwindCSS

　　TailwindCSS 是一个 CSS 框架，它使用较低级别的实用程序类来创建可重用但也可自定义的可视化 UI 组件。

　　Tailwind 可以通过两种方式安装，但最常见的使用方式是通过其 NPM 包：

　　$ yarn add tailwindcss

　　另外，继续添加autoprefixer和postcss-import：

　　$ yarn add -D autoprefixer postcss-import

　　您需要这些来为您的样式添加供应商前缀，并能够编写语法，例如@import "tailwindcss/base"直接从 导入 Tailwind 文件node_modules。

　　现在我们已经安装了它，让我们在根目录中创建一个新文件并调用它postcss.config.js。

　　插件的顺序在这里很重要！

　　就是这样！这就是在 Chrome 扩展程序中开始使用 TailwindCSS 所需的全部内容。

　　style.css在您的文件夹中创建一个名为的src文件并包含 Tailwind 文件

　　使用 PurgeCSS 删除未使用的 CSS

　　我们还要确保仅通过启用 Tailwind 的清除功能来导入我们使用的样式。

　　通过运行以下命令创建一个新的 Tailwind 配置文件：

　　$ npx tailwindcss init: 这将创建一个新tailwind.config.js文件。

　　要删除未使用的 CSS，我们将把源文件添加到 purge 字段，

　　现在，当您为生产构建时，我们的 CSS 将被清除，未使用的样式将被删除。

　　如何在您的 Chrome 扩展程序中启用热重载

　　在向我们的扩展添加一些内容之前还有一件事：让我们启用热重载。

　　当您进行新更改时，Chrome 不会重新加载源文件——您需要点击扩展页面上的“重新加载”按钮。幸运的是，有一个 NPM 包可以为我们进行热重载。

　　$ yarn add crx-hotreload

　　为了使用它，我们将background.js在src文件夹中创建一个名为的新文件并导入crx-hotreload

　　import "crx-hotreload";

　　最后指向background.jsinmanifest.json以便它可以与我们的扩展一起使用（默认情况下，热重载在生产中被禁用）：

　　配置够了。让我们在扩展中构建一个小脚本表单。

　　Chrome 扩展程序中的脚本类型

　　如本文开头所述，在 Chrome 扩展中，您可以使用几种类型的脚本。

　　内容脚本是在访问网页的上下文中运行的脚本。您可以运行任何常规网页中可用的任何 JavaScript 代码（包括访问/操作 DOM）。

　　另一方面，后台脚本是您可以对浏览器事件做出反应的地方，它可以访问 Chrome 扩展 API。

　　添加内容脚本

　　content-script.js在文件夹下创建一个名为的新文件src。

　　让我们将此 HTML 表单添加到我们新创建的文件中：

　　为浏览器扩展设置样式并不像您想象的那么简单，因为您需要确保网站样式不受您自己的样式的影响。

　　为了将它们分开，我们将使用一种叫做Shadow DOM的东西。Shadow DOM 是一种强大的样式封装技术。这意味着样式的范围是阴影树。因此，没有任何内容泄露到访问的网页。外部样式也不会覆盖 Shadow DOM 的内容，尽管 CSS 变量仍然可以访问。

　　影子主机是我们希望将影子树附加到的任何 DOM 元素。Shadow Root是从中返回的attachShadow内容，其内容是被渲染的内容。

　　请注意，设置阴影树内容样式的唯一方法是内联样式。Parcel V2 有一个新的内置功能，您可以在其中导入一个包的内容，并将其用作 JavaScript 文件中的编译文本。然后包裹将在包装时更换它。

　　我们的style.css捆绑包正是这样做的。现在我们可以在构建时自动将 CSS 内联到 Shadow DOM。

　　现在我们必须告诉浏览器这个新文件，让我们继续并通过将这些行添加到我们的清单中来包含它：

　　为了服务于我们的扩展，我们将添加一些脚本到我们的package.json：

　　最后，您可以运行yarn watch，转到chrome://extensions，并确保在页面右上角启用了开发人员模式。点击“Load Unpacked”，然后dist选择demo-extension.

　　如果您收到此错误：Error: Bundles must have unique filePaths您可以通过删除main您的字段中的字段来简单地修复它package.json

　　如何将您的扩展程序发布到 Google Chrome 网上应用店

　　在进一步讨论之前，让我们添加一个新的 NPM 脚本，它将帮助我们按照 Chrome 的要求压缩扩展文件。

　　如果您还没有安装zip，请执行以下操作：

　　苹果系统：brew install zip

　　Linux：sudo apt install zip

　　Compress-Archive对于 Windows，您可以类似地使用 powershell 命令：powershell Compress-Archive -Path .\dist\ -Destination .\chrome-extension.zip

　　现在您所要做的就是前往Chrome Web Store 开发者仪表板设置您的帐户并发布您的扩展程序？

　　你可以在这里找到托管在我的 GitHub 帐户上的本教程的完整演示

　　结论

　　最后，Chrome 扩展程序与网络应用程序并没有什么不同。今天，您学习了如何使用 Web 开发中的最新技术和实践来开发扩展。

　　希望本教程可以帮助您加快扩展开发速度！

上一篇: 如何在 Chrome 中使用 Grammarly ？ 下一篇: 如何使用 Chrome DevTools 解决网站问题?