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 源碼
9 附錄：FireFox
FireFox目前最新版本（85.0）的擴展目前不支持Manifest V3，因此如果需要開發FireFox擴展，需要使用Manifest V2版本，也就是：
"manifest_version": 2
當然還有一些字段上的區別，具體可以參考這裏的文檔。
另外筆者測試了一下FireFox安裝這個Demo擴展好像不能直接拖拽crx文件，需要打開一個叫about:debugging的鏈接，在設置中選擇Load Temporary Add-on:
選擇manifest.json文件即可安裝。