寫一個(gè)Chrome瀏覽器插件
共 3833字，需瀏覽 8分鐘
·
2024-11-18 15:38
一、什么是瀏覽器插件
二、瀏覽器插件有哪些種類
三、插件目錄介紹
| a的文件名 | 文件介紹 |
|---|---|
| manifest | 核心配置文件，配置插件平臺(tái)版本、名稱、權(quán)限、Aicon、Api權(quán)限、host權(quán)限等。 |
| popup.html | 插件彈出頁面，原生html、css頁面。 |
| popup.js | 插件頁面的腳本文件。 |
| popup.css | 插件頁面的樣式文件 |
| background.js | 后臺(tái)文件，可以監(jiān)聽瀏覽器事件，在瀏覽器后臺(tái)持續(xù)運(yùn)行。 |
| content.js | 插入到頁面中的js腳本，可以監(jiān)聽DOM事件，操作DOM元素。 |
四、開始寫一個(gè)插件
1. 配置manifest。
以下是一個(gè)基礎(chǔ)的manifest配置
2. 寫一個(gè)插件的彈框界面popup.html
和寫html頁面一樣，在body里面寫元素，但是需要注意樣式文件popup.css和腳本文件popup.js需要外部引入。
3. 寫一個(gè)插件彈框界面的樣式文件popup.css。
4. 寫一個(gè)插件彈框界面的腳本文件popup.js。
腳本文件的主要作用在于響應(yīng)插件彈窗的行為事件，并發(fā)送消息給內(nèi)容腳本或者后臺(tái)腳本。
以下代碼是在popup.js中，監(jiān)聽id為tag元素的點(diǎn)擊事件，獲取當(dāng)前窗口active標(biāo)簽頁，并給此標(biāo)簽頁推送一個(gè)message。
4. 寫一個(gè)插件的內(nèi)容腳本content.js
content.js會(huì)被插入到網(wǎng)頁環(huán)境中，用于監(jiān)聽瀏覽器事件，讀取和操作DOM元素。
以下代碼是監(jiān)聽頁面load事件，和接收來自第三步中send的message。
window.addEventListener("load", function () {// 監(jiān)聽頁面load事件})chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {console.log("-----------");if (request.greeting === "tag") {console.log(request.greeting)}});
5. 寫一個(gè)插件的后臺(tái)腳本background.js
后臺(tái)腳本會(huì)在瀏覽器窗口打開期間持續(xù)運(yùn)行，監(jiān)聽瀏覽器事件，網(wǎng)絡(luò)請(qǐng)求等。
以下代碼是瀏覽器屏蔽漏某些url請(qǐng)求的實(shí)現(xiàn)。
把上述的幾個(gè)文件創(chuàng)建完成之后就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的插件，然后直接安裝到瀏覽器擴(kuò)展即可。
五、解釋幾個(gè)消息發(fā)送和接收的Api
1. 獲取指定的瀏覽器標(biāo)簽頁：
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {})
2. 向指定標(biāo)簽頁中的內(nèi)容腳本發(fā)送一條消息，其中包含在發(fā)送回響應(yīng)時(shí)運(yùn)行的可選回調(diào)函數(shù)。在當(dāng)前擴(kuò)展程序的指定標(biāo)簽頁中運(yùn)行的每個(gè)內(nèi)容腳本中都會(huì)觸發(fā) runtime.onMessage 事件。
chrome.tabs.sendMessage(tabs[0].id, { greeting: "tag-remove" }, function (response) { console.log(response); });
3. 向擴(kuò)展程序或其他擴(kuò)展程序/應(yīng)用中的事件監(jiān)聽器發(fā)送一條消息。請(qǐng)注意，擴(kuò)展程序無法使用此方法向內(nèi)容腳本發(fā)送消息。如需向內(nèi)容腳本發(fā)送消息，請(qǐng)使用
chrome.runtime.sendMessage( extensionId?: string, message: any, options?: object, callback?: function,)
4. onMessage，通過擴(kuò)展程序進(jìn)程（通過 runtime.sendMessage）或內(nèi)容腳本（通過 tabs.sendMessage）發(fā)送消息時(shí)觸發(fā)。
chrome.runtime.onMessage.addListener( callback: function,)
想了解其他瀏覽器插件Api，請(qǐng)點(diǎn)擊跳轉(zhuǎn)?
六、接下來讓我們豐富插件的能力
1. 實(shí)時(shí)刪除頁面上的元素，我們經(jīng)常會(huì)遇到一些煩人的廣告，刪掉他。廣告一般都是有固定的元素節(jié)點(diǎn)的，找到元素節(jié)點(diǎn)的class或者id，按以下處理。
2. 有人不習(xí)慣點(diǎn)開右上角插件再點(diǎn)擊功能按鈕，怎么辦呢，簡(jiǎn)單，給瀏覽器右鍵菜單添加快捷鍵。
3. 還是攔截廣告，廣告可能出現(xiàn)在iframe中，但是呢我不想使用刪除DOM的方式，怎么辦呢，那就直接攔截網(wǎng)絡(luò)請(qǐng)求。
5. 標(biāo)記頁面文本
七、參考文檔
評(píng)論
圖片
表情