首页> 插件攻略> 如何制Chrome扩展-浏览器插件开发教程

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

来源:chrome官网站 作者:Geoffrey 时间2022/05/31 点击量5090

构建 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官网站

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