立即下载
谷歌浏览器

正版谷歌浏览器 Google打造

隐私模式 多标签运行

立即下载

如何制作 Chrome 扩展?

来源:谷歌浏览器2022-05-31

谷歌浏览器电脑版

谷歌浏览器电脑版

硬件:Windows系统 版本:122.0.6261.6 大小:66.69MB 软件语言:简体中文
厂商:谷歌信息技术(中国)有限公司 发布:2022-07-08 更新:2024-03-26 软件评级:
立即下载
详情介绍

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

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

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

如何制作 Chrome 扩展?

  有几种类型的 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 开发中的最新技术和实践来开发扩展。

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

继续阅读
本篇文章给大家详细介绍了Google浏览器登录账号的教程,有需要的小伙伴就来看看吧。 2024-07-04 谷歌浏览器怎么改浏览器图标?接下来就让小编给大家带来谷歌浏览器更改图标方法教程介绍,希望能够帮助大家解决问题。 2024-06-28 阻止谷歌浏览器更新怎么设置?本篇文章给大家带来谷歌浏览器chrome禁止更新教程,希望能够帮助大家解决问题。 2024-06-20 谷歌浏览器如何快速保存图片?接下来就让小编给大家带来谷歌浏览器快速保存网页图片方法技巧,有需要的朋友赶紧来本站看看了解一下吧。 2024-06-17 谷歌浏览器如何添加用户账户?下面小编就给大家带来谷歌浏览器添加新用户步骤一览,有需要的朋友赶紧来看看了解一下吧。 2024-05-27 如何在谷歌浏览器中使用百度AI助手?接下来小编就给大家带来谷歌浏览器使用百度AI助手方法教程,如果您需要的话可以看看下面的具体方法。 2024-05-12 怎么设置谷歌浏览器网站安全性?下面小编给大家带来谷歌浏览器提高网站安全级别方法技巧,有需要的朋友赶紧来下载试试看吧。 2024-05-10 Google极速模式怎么设置?接下来小编就给大家带来Google开启极速模式具体方法,感兴趣的朋友千万不要错过了。 2024-05-03 谷歌浏览器增强型保护如何设置?接下来就让小编给大家带来谷歌浏览器设置使用增强型保护具体方法,希望能够帮助大家解决问题。 2024-04-29 怎么在谷歌浏览器中查看证书?本篇文章就给大家带来谷歌浏览器查看证书具体方法介绍,感兴趣的朋友千万不要错过了。 2024-04-26
相关文章
返回顶部