浏览器插件开发教程
浏览器插件开发教程
构建 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 DevTools 解决网站问题? 下一篇：如何在 Chrome 中使用 Grammarly ？
