盤點 Chrome 插件開發中那些關鍵的點！
1. 前言
大家好，我是安果!
最近在開發者模式下調試 Chrome 插件，發現安裝擴展后默認會報錯誤，提示 v2 版本已經廢棄，相關 API 功能將在明年不可使用，建議升級到 v3 版本。
本篇文章將基于 v3 版本，盤點 Chrome 插件開發中的一些關鍵點供大家進行參考。
2. 配置
v2 升級到 v3 后，manifest.json 配置文件需要進行下面修改。
2-1 版本號
需要將 manifest_version 的值設置為 3。
2-2 action
action 可以指定 Chrome 擴展圖標設置、popup 頁面等內容。
在 v3 中使用關鍵字 action 取代 v2 中的關鍵字 browser_action。
//v3
...
"action": {
"default_icon": {
"16": "images/icon16.png",
"32": "images/icon32.png"
},
"default_popup": "popup.html",
"default_title": "HelloWorld"
}
...
2-3 background
在 v2 中，我們可以使用 scripts 關鍵字指定后臺運行的腳本列表，再使用 persistent 關鍵字設置運行腳本的生命周期。
當 persistent 設置為 true 時，腳本會一直在后臺運行，因此會占用系統資源。
//v2
...
"background": {
"persistent": false,
"scripts": ["background.js"]
}
...
所以在 v3 版本中，使用 service_worker 關鍵字智能化啟動腳本。
PS：在 v3 中不能通過關鍵字 persistent 指定腳本的生命周期。
//v3
...
"background": {
"service_worker": "background.js"
}
...
3. 緩存
在 v3 中，使用下面的方式，將鍵值對存儲到緩存中。
//v3
...
//存儲數據到緩存
//鍵：
chrome.storage.sync.set({username:'AirPython',password:'123456'},function(){
console.log("保存成功！")
})
...
從緩存中獲取數據，也有相應的 API。
//v3
...
//獲取緩存
chrome.storage.sync.get({username:"",password:""},function(items){
//用戶名和密碼不為空
if(items.username&&items.password){
...
}
})
...
4. 定時任務
在 v2 中實現定時任務、延時任務非常方便，我們只需要在 background.js 創建一個定時任務，然后設置 persistent 為 true，這樣就能保存定時任務一直在后臺執行。
由于 v3 切換成 service_worker 模式，如果想實現定時任務，只能使用 alarms 來實現。
//v3-manifest.json
...
"permissions": [
...
"alarms"
]
...
操作步驟如下：
- 在 manifest 設置 alarms 權限
- 在 background 中，使用 alarms 創建定時任務
//v3 background.js
...
function peroidFunc(){
...
}
// 定時器
chrome.alarms.onAlarm.addListener((alarm) => {
//執行一次
peroidFunc()
});
//1分鐘執行一次定時任務
chrome.alarms.create({ periodInMinutes: 1.0 });
...
5. 網絡請求
網絡請求主流的 4 種方式包含：
- Ajax
- Jquery
- fetch
- Axios
這里以第三種方式 fetch 為例：
...
function login_do(tab,username,password){
const url = HOST + 'do_login'
const params = {
headers:{
"content-type":"application/json;charset=UTF-8"
},
body:JSON.stringify({
"username":username,
"password":password.replace(/(^\s*)|(\s*$)/g, "") //去掉前后空格
}),
method:"POST"
}
fetch(url,params)
.then(data=>{
return data.json()
})
.then(res=>{
if(res.err_code==0){
show(res.data.tips,"登錄成功")
}else{
warn(res.err_msg)
}
})
.catch(error=>{
console.log(error)
warn("重置失敗，請檢查數據！")
})
}
...
6. 自動化
Chrome 插件完全可以實現一些自動化場景，以此增加我們工作的效率。
文中模擬文本框輸入的 API 已經廢棄，建議使用下面的方式完成文本框的輸入。
...
//輸入
function input(inputElement, content) {
// 注意：evt.initEvent已經廢棄，使用下面的方式替代
// let evt = document.createEvent('HTMLEvents');
// evt.initEvent('input', true, true);
//新的方式
var evt = new Event("input", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);
inputElement.value = content;
inputElement.dispatchEvent(evt)
}
...
7. 最后
還要補充一點的是，在 v3 版本中的 background 不能直接使用 window 對象，這里建議通過 Tab 標簽或消息通信的方式來實現。
在開發一些簡單的工具類插件，原生 HTML + JS + Jquery 完全夠用;但是面對一些復雜頁面的需求，這里更推薦使用「 Vue + 預設」的方式來快速開發，這部分內容有需要的小伙伴可以自行擴展：
https://vue-web-extension.netlify.app/intro/setup.html
