共计 2042 个字符，预计需要花费 6 分钟才能阅读完成。
1 概述
Chrome扩大开发的基础教程，代码基于原生JS+H5，教程内容基于谷歌扩大开发官网文档。
2 环境
Chrome 88.0.4324.96Chromium 87.0.4280.141Brave 1.19.84FireFox 85.0WebStorm 2020.3.2Manifest V3
3 开发环境筹备
开发扩大倡议应用 WebStorm，举荐WebStorm 的起因是可能补全，在设置中的 Libraries 中能够下载 chrome 的库，这样就可能补全了：
另一个倡议应用的是 VSCode，然而笔者目前没有找到让VSCode 补全的形式，心愿晓得的能够在评论指出补充一下。
当然其实扩大开发并没有规定应用哪一个 IDE，罕用的Web 开发 IDE 比方 HBuilder 也是能够的，看集体爱好了。
4 创立manifest.json
首先创立一个空白文件夹：
mkdir FirstExtension
cd FirstExtension接着创立一个叫 manifest.json 的文件，间接在 WebStorm 中创立即可，文件内容如下：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3
}关上浏览器进入治理扩大程序，并开启开发者模式，抉择 Load unpacked，关上方才创立的FirstExtension 文件夹：
这样就能够看到扩大了。
事实上最简略的扩大只须要一个manifest.json，来形容扩大最根本的一些属性以及行为，因而这样就算实现 HelloWorld 了。
5 增加弹出界面
当初扩大什么界面也没有，当初能够尝试着给扩大增加一个点击就弹出的界面，首先批改manifest.json，增加action：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3,
"action": {"default_popup": "popup.html"}
}在与 manifest.json 同级目录下创立 popup.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>这样点击扩大就会弹出对应文字了：
6 增加图标
在 manifest.json 中增加 icons 字段：
{
"name": "First Extension",
"description": "This is my first extension",
"version": "1.0",
"manifest_version": 3,
"action": {"default_popup": "popup.html"},
"icons": {
"16": "icons/16.png",
"32": "icons/32.png",
"48": "icons/48.png",
"128": "icons/128.png"
}
}图标文件能够从文末的源码处获取，从新加载后就能够看到扩大的图标扭转了。
图标一共有四个，16*16是扩大页面中显示的图标：
而 32*32 是可选的，为了避免从 48*48 的大小中放大造成失真，48*48是在扩大治理页面中显示的，例如：
而 128*128 是Chrome Web Store中显示的。
7 公布
最初一步是公布，扩大有两种装置形式，一种是通过本地装置，一种是通过 Chrome Web Store 装置，应用后一种形式的话，须要注册成为 Chrome 网上利用开发者：
这里为了不便就本地打包公布了，在插件治理页面抉择Pack extension：
抉择蕴含了 manifest.json 的文件夹，在这里就是方才创立的FirstExtension：
点击打包后，会呈现两个文件：
一个是crx，就是扩大的打包文件，一个是pem，创立新版本的扩大时须要应用。
浏览器中拖拽 crx 文件就能够装置了，一般来说 Chrome/Chromium/Brave 因为基于雷同内核应该都不会呈现问题，至于FireFox，能够参考一下文末的附录。
8 源码
- Github
- 码云
- CODECHINA
9 附录：FireFox
FireFox目前最新版本（85.0）的扩大目前不反对 Manifest V3，因而如果须要开发FireFox 扩大，须要应用 Manifest V2 版本，也就是：
"manifest_version": 2当然还有一些字段上的区别，具体能够参考这里的文档。
另外笔者测试了一下 FireFox 装置这个 Demo 扩大如同不能间接拖拽 crx 文件，须要关上一个叫 about:debugging 的链接，在设置中抉择Load Temporary Add-on:
抉择 manifest.json 文件即可装置。
