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

构建Chrome扩展程序可能会很麻烦。它与构建Web应用程序不同，因为您的扩展程序将与您访问的网站一起运行，因此您不想在浏览器上增加太多的JavaScript开销。您通常也不会从当今的捆绑器和框架中获得捆绑和调试的好处。

当我决定构建Chrome扩展程序时，我发现关于构建Chrome扩展程序的博客文章和文章数量很少。而且，当您想使用TailwindCSS等较新的技术之一时，信息甚至更少。

在本教程中，我们将发现如何使用Parcel.js捆绑和观看以及使用TailwindCSS样式来构建Chrome扩展。我们还将讨论如何将您的样式与网站分开，以免与CSS发生冲突-稍后将对此进行更多讨论。

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

内容脚本：最常见的是第一种类型的Chrome扩展程序。它在网页的上下文中运行，可用于修改其内容。这是我们将要创建的扩展类型。
弹出式窗口：基于弹出式窗口的扩展程序使用地址栏右侧的扩展程序图标打开一个弹出式窗口，其中可以包含您喜欢的任何HTML内容。
选项用户界面：您猜对了！这是用于将选项自定义为扩展的UI。右键单击扩展程序图标并选择“选项”，或从Chrome扩展程序列表导航至扩展程序页面，即可访问该文件chrome://extensions
DevTools扩展程序：“一个DevTools扩展程序为Chrome DevTools添加了功能。它可以添加新的UI面板和侧边栏，与检查的页面进行交互，获取有关网络请求的信息，等等。” – 谷歌浏览器的文档

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

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

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

首先创建一个新文件夹demo-extension（确保已安装yarn或npm已安装，我将在本文中使用yarn该文件夹）：

$ 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与此内容：

{ “name”: “Demo extension”,

“description”: “An extension built with Parcel and TailwindCSS.”,

“version”: “1.0”,

“manifest_version”: 2, }

现在，在我们进一步详细介绍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。这是PostCSS的配置文件，目前将包含以下几行：

module.exports = {

plugins: [

require(“postcss-import”),

require(“tailwindcss”), require(“autoprefixer”),

],

};

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

而已！这就是您开始在Chrome扩展程序中使用TailwindCSS所需要的全部。

在文件夹style.css内创建一个名为的src文件，并包含Tailwind文件：

@import “tailwindcss/base”;

@import “tailwindcss/utilities”;

使用PurgeCSS删除未使用的CSS

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

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

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

要删除未使用的CSS，我们将像这样将源文件添加到清除字段中：

module.exports = {

purge: [ ‘./src/**/*.js’, 👈

],

theme: {},

variants: {},

plugins: [],

}

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

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

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

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

$ yarn add crx-hotreload

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

import “crx-hotreload”;

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

{

“name”: “Demo extension”,

“description”: “An extension built with Parcel and TailwindCSS.”,

“version”: “1.0”,

“manifest_version”: 2,

“background”: { 👈 “scripts”: [“background.js”] },

}

足够的配置。让我们在扩展中构建一个小的脚本形式。

Chrome扩展程序中的脚本类型

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

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

另一方面，您可以在后台脚本中对浏览器事件做出反应，并且可以访问Chrome扩展程序API。

添加内容脚本

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

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

import cssText from “bundle-text:../dist/style.css”;

const html =
`
<style>${cssText}</style>

<section id=”popup” class=”font-sans text-black z-50 w-full fixed top-0 right-0 shadow-xl new-event-form bg-white max-w-sm border-2 border-black p-5 rounded-lg border-b-6″>
<header class=”flex mb-5 pl-1 items-center justify-between”>
<span class=”text-2xl text-black font-extrabold”>New event!</span>
</header>
<main class=”event-name-input mb-6″>
<div class=”mb-6″>
<label
for=”event-name”
class=”font-bold pl-1 block mb-1 text-black text-xl”
>
Event name
</label>
<div class=”duration-400 flex bg-white border-black border-2 rounded-lg py-4 px-4 text-black text-xl focus-within:shadow-outline”>
<input
id=”event-name”
name=”event-name”
type=”text”
placeholder=”web.dev LIVE”
class=”font-medium w-full focus:outline-none”
/>
</div>
</div>
</div>
<div class=”mb-6″>
<label
for=”event-date”
class=”font-bold pl-1 block mb-1 text-black text-xl”
>
Date
</label>
<div class=”event-date-input duration-400 border-black flex bg-white border-2 rounded-lg py-4 px-4 text-xl focus-within:shadow-outline”>
<input
id=”event-date”
name=”event-date”
type=”date”
class=”font-medium w-full focus:outline-none”
/>
</div>
</div>
<div class=” mb-8″>
<label
for=”event-time-input”
class=”font-bold pl-1 block mb-1 text-xl”
>
Time
</label>
<div class=”inline-flex items-center”>
<input
id=”event-time-input”
type=”time”
value=”17:30″
class=”border-black mr-4 lowercase duration-400 w-auto bg-white text-xl border-2 rounded-lg px-4 py-4 focus:outline-none focus:shadow-outline”
/>
<div class=”inline-flex flex-col”>
<span class=”text-xl font-bold”>Casablanca</span>
<span class=”text-base font-normal”>Africa</span>
</div>
</div>
</main>
<footer>
<button
class=”duration-400 bg-green-400 text-xl py-4 w-full rounded-lg border-2 border-b-6 leading-7 font-extrabold border-black focus:outline-none focus:shadow-outline”
>
Save
</button>
</footer
</section>
`

const shadowHost = document.createElement(“div”);
document.body.insertAdjacentElement(“beforebegin”, shadowHost);
const shadowRoot = shadowHost.attachShadow({ mode: ‘open’ });

shadowRoot.innerHTML = html

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

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

一个影子主机是我们希望我们的影子树连接到任何DOM元素。一个影子根就是从返回attachShadow其内容是什么得到渲染。

当心，对阴影树的内容进行样式设置的唯一方法是内联样式。Parcel V2具有一项新的内置功能，您可以在其中导入一个捆绑包的内容，并将其用作JavaScript文件中的已编译文本。然后包裹将在包装时将其更换。

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

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

{
“name”: “Demo extension”,
“description”: “An extension built with Parcel and TailwindCSS.”,
“version”: “1.0”,
“manifest_version”: 2,
“background”: {
“scripts”: [“background.js”]
},
👇
“content_scripts”: [
{
“matches”: [“<all_urls>”],
“js”: [“content-script.js”],
}
]
}

为了提供扩展服务，我们将向我们的脚本中添加一些脚本package.json：

“scripts”: {
“prebuild”: “rm -rf dist .cache .parcel-cache”,
“build:tailwind”: “tailwindcss build src/style.css -c ./tailwind.config.js -o dist/style.css”,
“watch”: “NODE_ENV=development yarn build:tailwind && cp src/manifest.json dist/ && parcel watch –no-hmr src/{background.js,content-script.js}”,
“build”: “NODE_ENV=production yarn build:tailwind && cp src/manifest.json dist/ && parcel build src/{background.js,content-script.js}”,
}

最后，您可以运行yarn watch，转至chrome://extensions，并确保在页面右上方启用了Developer Mode。单击“加载解压缩”，然后dist在下选择文件夹demo-extension。

如果出现此错误：Error: Bundles must have unique filePaths您可以通过删除main您的字段中的字段来解决此错误package.json

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

在继续进行此操作之前，让我们添加一个新的NPM脚本，该脚本将帮助我们根据Chrome的要求压缩扩展文件。

“scripts”: { “prebuild”: “rm -rf dist .cache”,

“build:tailwind”: “tailwindcss build src/style.css -c ./tailwind.config.js -o dist/style.css”,

“watch”: “NODE_ENV=development yarn build:tailwind && cp src/manifest.json dist/ && parcel watch –no-hmr src/{background.js,content-script.js}”,

“build”: “NODE_ENV=production yarn build:tailwind && cp src/manifest.json dist/ && parcel build src/{background.js,content-script.js}”,

“zip”: “zip -r chrome-extension.zip ./dist” 👈

}

如果尚未安装zip，请执行以下操作：

苹果系统： brew install zip
Linux： sudo apt install zip
对于Windows，可以Compress-Archive类似地使用powershell命令：powershell Compress-Archive -Path .\\dist\\ -Destination .\\chrome-extension.zip

现在，您要做的就是前往Chrome Web Store开发人员信息中心设置您的帐户并发布扩展程序🎉