大家好，我是安果！
最近在開發(fā)者模式下調(diào)試 Chrome 插件，發(fā)現(xiàn)安裝擴(kuò)展后默認(rèn)會報錯誤，提示 v2 版本已經(jīng)廢棄，相關(guān) API 功能將在明年不可使用，建議升級到 v3 版本
本篇文章將基于 v3 版本，盤點 Chrome 插件開發(fā)中的一些關(guān)鍵點供大家進(jìn)行參考
v2 升級到 v3 后，manifest.json 配置文件需要進(jìn)行下面修改
2-1 版本號
需要將 manifest_version 的值設(shè)置為 3
2-2 action
action 可以指定 Chrome 擴(kuò)展圖標(biāo)設(shè)置、popup 頁面等內(nèi)容
在 v3 中使用關(guān)鍵字 action 取代 v2 中的關(guān)鍵字 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 關(guān)鍵字指定后臺運(yùn)行的腳本列表，再使用 persistent 關(guān)鍵字設(shè)置運(yùn)行腳本的生命周期
當(dāng) persistent 設(shè)置為 true 時，腳本會一直在后臺運(yùn)行，因此會占用系統(tǒng)資源
//v2
...
"background": {
"persistent": false,
"scripts": ["background.js"]
}
...
所以在 v3 版本中，使用 service_worker 關(guān)鍵字智能化啟動腳本
PS：在 v3 中不能通過關(guān)鍵字 persistent 指定腳本的生命周期
//v3
...
"background": {
"service_worker": "background.js"
}
...在 v3 中，使用下面的方式，將鍵值對存儲到緩存中
//v3
...
//存儲數(shù)據(jù)到緩存
//鍵：
chrome.storage.sync.set({username:'AirPython',password:'123456'},function(){
console.log("保存成功！")
})
...
從緩存中獲取數(shù)據(jù)，也有相應(yīng)的 API
//v3
...
//獲取緩存
chrome.storage.sync.get({username:"",password:""},function(items){
//用戶名和密碼不為空
if(items.username&&items.password){
...
}
})
...
在 v2 中實現(xiàn)定時任務(wù)、延時任務(wù)非常方便，我們只需要在 background.js 創(chuàng)建一個定時任務(wù)，然后設(shè)置 persistent 為 true，這樣就能保存定時任務(wù)一直在后臺執(zhí)行
由于 v3 切換成 service_worker 模式，如果想實現(xiàn)定時任務(wù)，只能使用 alarms 來實現(xiàn)
//v3-manifest.json
...
"permissions": [
...
"alarms"
]
...操作步驟如下：
在 manifest 設(shè)置 alarms 權(quán)限
在 background 中，使用 alarms 創(chuàng)建定時任務(wù)
//v3 background.js
...
function peroidFunc(){
...
}
// 定時器
chrome.alarms.onAlarm.addListener((alarm) => {
//執(zhí)行一次
peroidFunc()
});
//1分鐘執(zhí)行一次定時任務(wù)
chrome.alarms.create({ periodInMinutes: 1.0 });
...網(wǎng)絡(luò)請求主流的 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("重置失敗，請檢查數(shù)據(jù)！")
})
}
...Chrome 插件完全可以實現(xiàn)一些自動化場景，以此增加我們工作的效率
比如，之前寫過的自動登錄
文中模擬文本框輸入的 API 已經(jīng)廢棄，建議使用下面的方式完成文本框的輸入
...
//輸入
function input(inputElement, content) {
// 注意：evt.initEvent已經(jīng)廢棄，使用下面的方式替代
// 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)
}
...最后，還要補(bǔ)充一點的是，在 v3 版本中的 background 不能直接使用 window 對象，這里建議通過 Tab 標(biāo)簽或消息通信的方式來實現(xiàn)
在開發(fā)一些簡單的工具類插件，原生 HTML + JS + Jquery 完全夠用；但是面對一些復(fù)雜頁面的需求，這里更推薦使用「 Vue + 預(yù)設(shè)」的方式來快速開發(fā)，這部分內(nèi)容有需要的小伙伴可以自行擴(kuò)展
https://vue-web-extension.netlify.app/intro/setup.html
聯(lián)系客服
