一、組成部分

?開發瀏覽器擴展最重要的是manifest.json文件，需要在文件中定義一系列關系。

來看看manifest.json文件5大組成部分

1、標題名稱、版本號等，其中manifest_version必須配2

2、browser_action

? ? 可以定義擴展圖標和點擊圖標彈出頁面

3、content_scripts

? ? 內容腳本，嵌入到瀏覽器頁面。可以引入js、css文件，及加載時機。該內容定義js可以監聽到后臺發送的消息進行交互，同時也可以主動發送消息。

4、background

? ? 類似后臺，發送消息（可以找消息驅動了解）。

5、permissions

? ? 權限定義

{"name": "瀏覽器擴展測試例子", // 擴展的名稱"manifest_version": 2, "version": "1.0.0", //擴展的版本"description": "瀏覽器擴展測試例子", //擴展的描述//圖標"browser_action": { //制定擴展的圖標放在Chrome的工具欄中"default_icon": "img/title.png" , // 圖標文件的位置"default_title": "瀏覽器擴展測試例子",//當鼠標懸停于擴展圖標上所顯示的文字"default_popup": "title.html" // 用戶單擊擴展圖標時所顯示頁面的文件位置}, //內容"content_scripts": [ //需要直接注入頁面的JS，content-scripts和原始頁面共享DOM，但是不共享JS{"matches": ["<all_urls>"], //表示匹配所有地址。抓取特定網頁的數據，只需要寫該網站即可//多個JS按順序注入"match_about_blank": true,"js": ["js/jquery/jquery-3.5.1.min.js",//jquery"js/self/content-script.js" , //content_scripts的主要邏輯內容"js/self/common.js"//業務邏輯], "css":[],"run_at":"document_start", // 代碼注入的時間，可選值： "document_start", "document_end", or "document_idle"，最后一 個表示頁面空閑時，默認document_idle"all_frames":false //定義的腳本是否會注入到嵌入式框架中}],//后臺"background":{//"page":"background.html""scripts": ["js/self/background.js"],"persistent":true},//權限"permissions":["activeTab","contextMenus", // 右鍵菜單"tabs", // 標簽"<all_urls>","webRequest", // web請求"webRequestBlocking",//"storage",// 插件本地存儲"http://*/*", // 可以通過executeScript或者insertCSS訪問的網站"https://*/*" // 可以通過executeScript或者insertCSS訪問的網站] }

二、測試步驟

1.首先在后臺backgroud定義（右鍵菜單、消息監聽）

---

?1）測試創建右鍵菜單，創建菜單之后，在瀏覽器添加擴展后，打開新頁面，鼠標右鍵可以明顯看到你注冊到的按鈕

//type 類型，可選：["normal", "checkbox", "radio", "separator"]，默認 normal //title 顯示的文字，除非為“separator”類型否則此參數必需，如果類型為“selection”，可以使用%s顯示選定的文本 //contexts 上下文環境，可選：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]，默認page // chrome.contextMenus.create({id:'smq',type: 'normal', title: '測試右鍵按鈕(ALT+W)', contexts: ['all'],onclick: function(params){//點擊事件sendMessage({rightSmq:true });//為了兼容其他瀏覽器不使用getSelected、sendRequest/*chrome.tabs.getSelected(null , function(tab){chrome.tabs.sendRequest(tab.id, {rightSmq: true});}); */ } });

2）消息監聽，這里消息，可以監聽到content_scripts和browser_action發來的消息

chrome.runtime.onMessage.addListener(function(res, sender, sendResponse){console.log(res);//來自alt + s快捷的事件if (res.listenerAlt83){sendMessage("快捷鍵 alt + s觸發的");}sendResponse();return true; });

3）后臺發送消息方式（由content_scripts定義消息監聽）

//發送消息 function sendMessage(paramObject){chrome.tabs.query({active: true, currentWindow: true}, function(tabs){chrome.tabs.sendMessage((tabs.length ? tabs[0].id : null) , paramObject , function(response){});}); }

2.browser_action

1）title定義，簡單的在頁面上添加一個按鈕，注意點：title頁面不能寫內嵌腳本，只能引用腳本。

title.js

$(function(){//獲取后臺對象， title可以獲取到后臺對象操作消息var backGroundObject = chrome.extension.getBackgroundPage();$("#testButton").click(function(){//這個消息最終在content-script backGroundObject.sendMessage({test:"hhahahah"});});});

過程： 按鈕點擊發送消息（backGroundObject.sendMessage({test:"hhahahah"});，被content-script 中的chrome.runtime.onMessage.addListener監聽到打印消息{test:"hhahahah"}。 另外，這個過程你會發現在title中console.log、alter是無效的。

3.content-script

//接收background/popup傳來的消息 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){console.log(request);sendResponse();return true; });//監聽頁面鍵盤 $(document).keydown(function(e){var keycode = e.keyCode || e.which; //監聽alt + sif (e.altKey && keycode == 83){chrome.runtime.sendMessage({listenerAlt83:true}, function(response){});} });

簡單的監聽接收后臺發送的消息，同時在這個js可以添加事件監聽，這里我注冊了alt + s 監聽，當你按照快捷時候，瀏覽器控制臺輸出“快捷鍵 alt + s觸發的”，當然也可以通過瀏覽的注冊監聽。其實這個js就是被嵌套在頁面的js,可以訪問得到頁面的dom結構（backgroud、browser_action是不可以操作dom的）。

到此，backgroud、browser_action、content_scripts之間交互已經完畢。

4.瀏覽器添加擴展，以谷歌為例（火狐有點特別）

在瀏覽器找到更多工具 -> 擴展程序?選擇你開發擴展的目錄，添加之后右上角就會出現圖標了，打開新頁面測試擴展功能，在此頁面石觸發不了的

總結

1、消息機制

? ? 在瀏覽器擴展中，很明顯想要各模塊調用其它模塊方法需要通過消息傳遞觸發。

2、content_scripts與browser_action、backgroud不同

? ? 通過觀察會發現content_scripts會被添加到頁面上，可以順利訪問頁面元素。但是在browser_action、backgroud是做不到的

其它

1、瀏覽器擴展還可以添加系統消息，有興趣可以了解怎么把消息發送到系統桌面。

2、谷歌和狐火擴展開發過程差不多，但是有內置函數的區別，如果想要兼容，就找一些共同的公函，但是它們有各自api

3、我的一個二維碼識別插件GitHub - sakyoka/QrCodeDemo: 二維碼識別瀏覽器擴展

4、本章例子瀏覽器擴展開發測試例子-Javascript文檔類資源-CSDN下載

總結

以上是生活随笔為你收集整理的谷歌、火狐浏览器扩展开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。