本文提供了一份Chrome扩展开发的详细指南，包括Manifest、Service Worker、Content Scripts和Popup的基本概念，以及如何开发一个颜色提取扩展。通过创建manifest.json文件，编写HTML，注册Service Worker，实现Content Script注入和与Service Worker的通信，最终实现点击扩展按钮展示页面元素背景色的功能。
前言
Chrome 扩展（通常也叫插件）也是软件程序，使用 Web（HTML, CSS, and JavaScript）技术栈开发。允许用户自定义 Chrome 浏览体验。开发者可以通过增加特效或功能来优化体验。例如：效率工具、信息聚合等等。你可以在 Chrome 应用商店 查看各种各样的扩展。比如一些翻译扩展、JSON 格式化扩展等等都极大提高了我们开发或工作效率。本文旨在帮助大家了解 Chrome 扩展开发的基本概念、开发流程。并最终开发一个背景颜色提取的扩展来加深 Chrome 扩展的印象。本文基于 Manifest V3，大部分内容翻译自https://developer.chrome.com/docs/extensions/mv3/。最终我们要实现的扩展功能如下：
基本概念
Manifest
扩展的 manifest 是唯一必须的文件，且文件名必须是 manifest.json。manifest 必须放在扩展程序的根目录，它记录了重要的 metadata、资源定义、权限声明并标识了哪些文件运行在后台和页面上。
Service Worker
扩展的 Service Worker 用户处理和监听 浏览器 事件。比如跳转到一个新页面、书签移除、tab 关闭等。它可以使用所有的 Chrome API，但是不能直接和网页交互（和网页交互需要 Content Scripts）。
Content Scripts
Content Script 可以在网页上下文中执行 JavaScript。也可以读取和修改它们注入页面的 DOM。Content Script只能使用部分 Chrome API。其余的可以通过 Service Worker 间接访问。
Popup 和 Pages
扩展可以包含多种 HTML 文件，比如弹窗、页面选项等，这些页面都可以访问 Chrome API。
开发一个简单扩展
下面我们来开发一个 Hello Extensions 的简单扩展。
创建 manifest.json 文件
创建一个新的目录，在目录下创建一个名为 manifest.json 的文件。
mkdir hello_extension
cd hello_extension
touch manifest.json在 manifest.json 中加入以下代码：
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}上面的 JSON 文件描述了扩展的功能和配置，比如 action 中描述了在 Chrome 中需要显示的扩展的图标以及点击图标后弹出的页面。可以在这里 下载 图标到你的目录下，然后把名字改为 manifest.json 中配置的 default_icon。
创建 html 文件
上面的 action 中还配置了一个 default_popup，接下来我们创建一个名为 hello.html 的文件并加入如下代码。
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>加载扩展
在开发模式下加载未打包的扩展。
在 Chrome 浏览器地址栏中输入
chrome://extensions。也可以通过下图的两种方式打开。
打开开发者模式
点击加载已解压的扩展程序
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
