Chrome擴展插件的開發(fā)--獲取網頁Cookies
Chrome瀏覽器在瀏覽器類應用軟件中一直居于榜首，很多人選擇Chrome瀏覽器不僅僅是因為它的穩(wěn)定，還有它豐富的可拓展性。那么有沒有想自己開發(fā)一款自己的谷歌瀏覽器插件呢？本文將介紹大家手動開發(fā)一個谷歌瀏覽器插件獲取cookies.
1.Chrome插件開發(fā)文檔
https://developer.chrome.com/docs/extensions/mv3/
2.官網入門demo
3.getCookies
·?manifest.json
開發(fā)插件必須提供該文件，用來配置插件所有的必要信息，比如插件名字、描述、版本號、圖標等；
·?插件彈窗popup
點擊插件圖標會彈出一個窗體，這個窗體就是 popup 。在?manifest.json?的?action?字段配置 popup， 其中?default_popup?指定點擊 popup 后顯示的 html 內容，路徑位置相對于配置文件，另外default_icon設置的是擴展插件圖片，路徑位置相對于配置文件；
// manifest.json繼續(xù)配置action
{
??? ? ...
??? ? "action": {
??????? ? "default_popup": "popup.html",
??????? ? "default_icon": "hello_extensions.png"
??? ? }
}
//?popup.html
#container?{
width:?200px;
word-break:?break-all;
}
·?權限配置
獲取cookies需要先在manifes.json中添加對應權限；host_permissions中設置哪些網站下該插件可以獲取?permissions?里列舉的權限；
{
...
"host_permissions":?[
"http://*/*",
"https://*/*"
],
"permissions":?[
"cookies",
"tabs"
]
}
·?popup.js
在開發(fā)插件時，不能將 js 代碼直接寫在 html 文件里，否則會報錯，必須要單獨新建一個 js 文件，然后通過?script?標簽引用該文件；通過在popup.js內調用chrome獲取cookies的API來獲取所訪問網頁的cookies，并把結果展示到popup.html彈窗內部；
const?$container?=?document.getElementById('container')
//?DOMContentLoaded?監(jiān)聽當前頁面的HTML加載完成
document.addEventListener('DOMContentLoaded',?()?=>?{
//?chrome.tabs?讀取瀏覽器已打開的tab頁簽，其中'active':?true訪問到的是當前所處的標簽頁
//?WINDOW_ID_CURRENT?當前標簽頁id
chrome.tabs.query({?'active':?true,?'windowId':?chrome.windows.WINDOW_ID_CURRENT?},
function?(tabs)?{
console.log('什么是tabs===',chrome,?tabs)
const?url?=?new?URL(tabs[0].url)
chrome.cookies.getAll({
domain:?url.host
},?(cookies)?=>?{
cookies.map((c)?=>?{
const?divEle?=?document.createElement("div")
const?keyEle?=?document.createElement("span")
keyEle.setAttribute('class',?'cookiesName')
const?valueEle?=?document.createElement("span")
valueEle.setAttribute('class',?'cookiesValue')
keyEle.innerHTML?=?c.name?+?":?"
valueEle.innerHTML?=?c.value
divEle.appendChild(keyEle).appendChild(valueEle)
$container.appendChild(divEle)
})
})
}
);
})
4.插件在chrome瀏覽器內導入使用?
·?打開chrome的插件管理頁面chrome://extensions
·?打開該頁面右上角的開發(fā)者模式
·?點擊加載已解壓的擴展程序，上傳本地文件即可導入插件
·?點擊瀏覽器右上角擴展程序圖標可以將自己的插件固定到瀏覽器頂部
5.相關API
