1 概述

Chrome扩大开发的基础教程，代码基于原生JS+H5，教程内容基于谷歌扩大开发官网文档。

2 环境

  • Chrome 88.0.4324.96
  • Chromium 87.0.4280.141
  • Brave 1.19.84
  • FireFox 85.0
  • WebStorm 2020.3.2
  • Manifest V3

3 开发环境筹备

开发扩大倡议应用WebStorm，举荐WebStorm的起因是可能补全，在设置中的Libraries中能够下载chrome的库，这样就可能补全了：

另一个倡议应用的是VSCode，然而笔者目前没有找到让VSCode补全的形式，心愿晓得的能够在评论指出补充一下。

当然其实扩大开发并没有规定应用哪一个IDE，罕用的Web开发IDE比方HBuilder也是能够的，看集体爱好了。

4 创立manifest.json

首先创立一个空白文件夹：

mkdir FirstExtensioncd 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文件即可装置。