如何制作 Chrome 扩展程序构建您的第一个 Chrome 扩展程序

我希望你们都一切顺利。

如果您有兴趣了解浏览器扩展程序的工作原理以及如何构建您的第一个 chrome 扩展程序，那么您来对地方了。😎

在本文中，让我们一起来构建您自己的全新 chrome 扩展程序。

在开始之前，让我们先了解一些重要的术语。

什么是扩展？🧐

“扩展”这个名字本身就说明了很多，
它¹可以增强或“扩展”某些²的功能。
在我们的例子中，第一个“扩展”是由一组不同的文件组成的包，这些文件捆绑在一起，形成一个称为浏览器扩展的单一实体。
第二个“扩展”是指我们想要增强 Web 浏览器功能或能力的东西。

让我们看看，

什么是 Web 浏览器？

如今，网络浏览器已成为每个人生活中最重要的组成部分。作为一名软件开发者👨🏻‍💻（我们经常使用它），我甚至无法想象没有网络浏览器的生活会是什么样子。
根据维基百科，网络浏览器（通常简称为浏览器）是一种用于访问万维网信息的软件应用程序。当用户从特定网站请求网页时，网络浏览器会从网络服务器检索必要的内容，然后将页面显示在屏幕上。

扩展程序如何帮助网络浏览器（重点关注 Google Chrome）？🤔

我认为扩展程序是浏览器非常重要的一部分。
在我看来，我喜欢使用那些让我的生活更轻松、更高效的扩展程序。
我经常使用的扩展程序是LastPass。这个扩展程序可以帮我记住登录凭据，让我的大脑专注于更重要的事情，而不是记住复杂的密码😉
我只需要在第一次登录时保存登录凭据。

假设您想在短时间内获取所有产品及其价格列表。
如果您使用的是普通的网页浏览器，则需要手动操作。
听起来工作量很大，对吧？但是，如果您创建一个扩展程序并将其安装到浏览器中，情况会怎样呢？您只需点击一次，扩展程序就会以格式良好的方式为您获取所有列表。

好吧，为此您必须知道如何构建浏览器扩展，让我们来看看
。...

在开始构建 chrome 扩展之前，让我们先了解一下它的基础知识。

附图显示了扩展的所有重要部分。

扩展程序中有一些重要的部分，没有它们，你就无法构建扩展程序。
所以，我们先来了解一下它们。

清单文件

这是创建浏览器扩展程序时最重要且必要的文件。
清单文件是扩展程序元数据的 JSON 对象，其中包含扩展程序的所有基本信息。
请查看示例Manifest file。

背景脚本

后台脚本是一个在后台运行的 JavaScript 文件，用于处理浏览器事件。它也被称为扩展程序的事件处理程序页面。它负责处理浏览器事件，例如创建书签、页面加载完成等。

扩展弹出窗口

弹出窗口是一个 HTML 文件，当用户点击工具栏图标时，它会在一个特殊的窗口中显示。它的工作方式与网页非常相似；它可以包含样式表和脚本标签的链接，但不允许内联 JavaScript。
请查看扩展程序弹出窗口代码here。

内容脚本

这是注入到网页中的 JavaScript 文件，用于执行各种操作，例如访问网页详情、进行修改以及将信息传递给其父扩展程序。
您可以使用以下选项配置清单文件：
run_at用于决定何时注入和执行脚本。
matches负责根据 URL 模式匹配决定将脚本注入到何处。
js要注入的 JS 文件路径数组。
css要注入的样式表文件路径数组。

(Check manifest content script entry)。

查看下面的图片，其中显示 div 是由页面顶部的内容脚本注入的。

选项页面

通过提供选项页面，允许用户自定义扩展程序的行为。用户可以通过右键单击工具栏中的扩展程序图标，然后选择“选项”来查看扩展程序的选项。另一种方法是导航到扩展程序管理页面 chrome://extensions，然后选择所需扩展程序的“详细信息”。在详细信息页面中选择“选项”链接。
检查选项页面代码here。

将所有内容放在一起以创建您的第一个 chrome 扩展。

太棒了！我们的第一个 Chrome 扩展程序创建完成了，现在是时候在开发者模式下测试它了。🥳

通过访问 chrome://extensions 将扩展程序加载到 chrome 浏览器。

• 访问 Chrome://extensions
• 启用开发者模式切换开关（位于右上角）以在同一页面上查看开发者选项。

• 单击加载解压按钮（位于左上角）。

• 选择您的扩展程序文件夹，以将扩展程序加载到浏览器。（确保 manifest.json 位于根目录）。

宾果！🤩 您刚刚创建并运行了您的第一个 chrome 扩展程序。

从中获取我们刚刚创建的扩展的代码here。

在下一篇文章中，我将讲解如何使用两种不同的方法（手动和基于脚本）将您自己的扩展程序上传到 Chrome 网上应用店。
敬请期待！

希望你喜欢它。

感谢您抽出时间。
希望您喜欢，如果喜欢的话*❤️并分享。 *
祝您编程愉快……