瀏覽器插件開發-manifest文件解讀
調研資料
360瀏覽器的插件文檔 中文, 雖然內核差不多但是不一定與 Chrome api 一致, 可以作為參考
manifest.json 配置說明
manifest.json 用於描述 Chrome 插件的源數據，配置信息等，基本內容如下
{ "name": "名稱", "description": "描述", "version": "打包完成后用於判斷插件是否需要更新", "manifest_version": 2, "browser_action": { "default_popup": "xxx.html 右上角點擊后的彈窗，可以用一個頁面定義", "default_icon": "xxx.png 顯示在右上角的圖標button" }, }
配置項簡介
1. manifest_version 必填
清單文件格式的版本， Chrome 18 開發 寫 2 即可
2. name 必填
插件名稱
3. version 必填
插件版本，發布新版本后，瀏覽器會比較其已安裝的插件的版本，有更新的版本則會自動更新
4. description
插件的描述，132個字符限制
5. icons
插件的圖標，可以用在 Chrome 商店展示(128 * 128) | 插件管理界面 (48 * 48) | 擴展頁圖標 (16 * 16) 最好是 png 格式
6. browser_action
可以用來定義點擊圖標后展示的窗口，對應接口 chrome.browserAction，這項配置與 page_action 是對立的，只能二選一，以下是 browser_action 子項的配置
default_icon: Object | string 一個或者一組圖標的路徑
default_title 設置 tooltip
default_popup 指定彈出的窗口，可以是任意 html
badges “徽章” 就是小圖標上的一個標記，用來展示一些狀態
7. page_action
代表可以在當前頁面執行的操作，不活動時顯示灰色,對應接口 chrome.pageAction
default_icon: Object | string 一個或者一組圖標的路徑
可用 pageAction.(show|hide) 改變插件活動狀態
browser_action 和 page_action都用來定義放置在工具欄右上角的圖標點擊情況，但是兩者的活動狀態展示 | 點擊后的展示 | 主要負責場景是不一致的
猜測 browser_action 適用於用戶需要點擊圖標后在彈窗中操作的場景 page_action 試用與在后台運行，重要工作是監聽用戶行為的插件
官方建議：如果要實現的功能只針對某一個頁面有用則建議使用 page_action 否則使用 browser_action
8. background
用來定義后台腳本部分
擴展是基於事件的程序，這些事件包括導航到新頁面、刪除書簽、或者關閉選項卡，擴展在他們的后台腳本中監視這些事件，然后用指定的指令進行響應
關於后台腳本的狀態
1、首次下載后或者更新后被加載
2、后台腳本下載后會處於休眠狀態，直到它偵聽的某個事件被觸發，
3、偵聽到事件后，會使用指定的指令響應（怎么相應自定義）
以下情況會需要調用到后台腳本
1、擴展首次下載或者版本更新
2、后台腳本中正在監聽事件，並且這事件被觸發了
3、content_script 或者其他擴展中調用了 sendMessage
4、當前擴展中的其他部分，例如彈窗中調用了 runtime.getBackgroundPage
后台腳本定義選項
{ ... "background": { "scripts": ["bg1.js", "bg2.js"], // 后台腳本可以注冊多個 "persistent": false // 是否是持久的，一般為 false, 某些特殊情況需要參考文檔 } }
事件過濾器，有些事件支持事件過濾，比如選項卡的切換可以監聽
// background.js chrome.webNavigation.onCompleted.addListener(function () {}, { url: [{urlMatches: 'http://www.baidu.com'}] // 過濾 });
9. chrome setting 修改 | chrome 用戶界面展示修改 | chrome 一些內置頁面的替換
1、setting 使用 chrome_settings_overrides 配置，詳細配置查看文檔
2、用戶界面 使用 chrome_ui_overrides 配置，詳細配置查看文檔,可以設置一些書簽方面的規則
3、內置頁面替換 使用 chrome_url_overrides 配置，詳細配置查看文檔，標簽頁、歷史頁、新 tab 都可替換
10. commands
可以通過 commands 選項定義觸發擴展事件的快捷鍵
{ ..., commands: { "xxx": { "suggested_key": { "default": "Ctrl+X", "mac": "Command+X", "windows": "Ctrl+X" } }, "_execute_browser_action": {...}, "_execute_page_action": {...} } }
操作快捷鍵后，插件后台會監聽到對應的事件
// background.js chrome.commands.onCommand.addListener(function(command) {});
注意：\ _execute_browser_action \ _execute_page_action 這兩個命令不會被監聽，他們是觸發 popup 彈出的，要監聽 窗口彈出事件可以使用 popup_page 的onDomReady
11. content_scripts
content_script 在一個特殊的環境中運行，可以稱之為隔離環境，在這里可以訪問所注入頁面的DOM，但是不能訪問里邊的任何 javascript 變量和函數，反之，頁面中的js 也不能訪問 content_script 中的變量和函數
訪問目標網站的 DOM ，可以用來進行通信
分為兩種情況，一種是聲明型注入腳本，使用 content_scripts 配置項，另一種是編程方式注入使用 permissions: ["activeTab"] 選項，
1、聲明型注入腳本 content_scripts 值可以是一個數組，設置不同站點的不同注入文件
1）需要設置 matches: ["http://"] 指定匹配的網址，
2）js 設置注入腳本
3）css 設置注入樣式
4）run_at 定義注入要本的時機 document_idle 表示瀏覽器幫你把握時機，會在 DOM 完成 與 window.onload 之后注入；document_start 在 CSS 注入之后，其他任何腳本或者 DOM 之前注入；document.end DOM 完成之后立即注入，但是在圖像等資源之前
2、編程方式注入，不需要指定可訪問的域名，可以針對當前活動的選項卡運行，獲取臨時訪問權限 permissions: ["tabs"] 編程方式注入會在 chrome.tabs.executeScript(tabId, details, callback) 接口中詳細介紹
通信案例，通過 content_script 與頁面 共享 DOM，來實現頁面與擴展間的通信
// page.js 頁面中觸發一個postMessage document.getElementById('btn').addEventListener('click', () => { window.postMessage({type: 'TO_CONNECT_EXTERNAL', data: 'data'}); }) // content_script.js 中做中轉 var port = chrome.runtime.connect(); window.addEventListener('message', (e) => { if (e.source !== window) {return}; if (event.data.type && (event.data.type == "FROM_PAGE")) { port.postMessage(event.data.data); // 發消息給擴展 } }, false);
12. externally_connectable
這項配置直接實現網站與插件間通信，但是需要在 manifest.json 中作出如下配置
{ "externally_connectable": { "matches": ["http://*.xx.com"] // 只有匹配的網站才可以通信 } }
// page.js 中發出請求 var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc"; chrome.runtime.sendMessage( editorExtensionId, {type: 'MsgFromPage', msg: 'Hello, I am page~'}, function(response) { console.log(response); } ); // background.js chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) { // 可以針對sender做一些白名單檢查 // sendResponse返回響應 if (request.type == 'MsgFromPage') { sendResponse({tyep: 'MsgFromChrome', msg: 'Hello, I am chrome extension~'}); } });
13. offline_enabled
擴展是否需要離線工作，默認為 true, 當chrome 檢測到離線時，程序會被高亮顯示
14. permissions | optional_permissions
聲明 權限（插件實現基礎功能所需要的） | 可選權限 （插件中可選的特性所需要的），兩者的子配置項是一樣的
選項的值是一個數組，代表每一個權限，權限可以是已知的權限字符串 也可以是一個主機的匹配模式
權限字符串大多都對應着一個同名的 chrome[permissionName] API,全部的權限字符串可以點擊上邊鏈接查看，一下列出常用的權限
activeTab 允許用戶在調用擴展時臨時訪問當前活動的選項卡，
background 后台權限，可以用來增加Chrome 運行時間，即開機即運行（雖然是不可見的）
bookmarks 書簽操作權限
browsingData 瀏覽器數據操作權限，主要用來清除瀏覽器數據 cookie storage 等
contentSettings 瀏覽器設置權限
contextMenus 上下文菜單添加權限
cookies cookie 的查詢、修改、onChange 監聽
history 瀏覽器歷史記錄操作權限
storage chrome.storage 的使用權限（注意不是瀏覽器的 localStorage）
tabs 選項卡權限，允許創建、修改、重新排列選項卡
webNavigation 請求進行過程中的操作權限
webRequest | webRequestBlocking 開放 正在運行請求的 攔截、阻塞、或修改的權限
15. web_accessible_resources
指定打包資源的的路徑字符串數組，這些資源是在擴展中是可用了，例如 content_script會用到的資源等,
16. content_security_policy
內容安全策略, 默認的安全策略為 script-src 'self'; object-src 'self' 他會有如下限制
1\禁止 eval 及相關函數
2\禁止內聯<script>塊和內聯事件處理程序(例如，<button onclick="…">)
3\只有擴展包內的腳本和資源才會被加載！通過Web即時下載的將不會被加載
可以通過 白名單 使用通配符設置哪些外部資源是可以訪問的（僅支持 https），如下
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
瀏覽器插件開發-manifest文件解讀調研資料manifest.json 官方文檔Chrome Extension API360瀏覽器的插件文檔 中文, 雖然內核差不多但是不一定與 Chrome api 一致, 可以作為參考Chrome 官方案例庫案例如何實現網頁和Chrome插件之間的通信消息傳遞manifest.json 配置說明manifest.json 用於描述 Chrome 插件的源數據，配置信息等，基本內容如下
{ "name": "名稱", "description": "描述", "version": "打包完成后用於判斷插件是否需要更新", "manifest_version": 2, "browser_action": { "default_popup": "xxx.html 右上角點擊后的彈窗，可以用一個頁面定義", "default_icon": "xxx.png 顯示在右上角的圖標button" },}12345678910配置項簡介1. manifest_version 必填清單文件格式的版本， Chrome 18 開發 寫 2 即可
2. name 必填插件名稱
3. version 必填插件版本，發布新版本后，瀏覽器會比較其已安裝的插件的版本，有更新的版本則會自動更新
4. description插件的描述，132個字符限制
5. icons插件的圖標，可以用在 Chrome 商店展示(128 * 128) | 插件管理界面 (48 * 48) | 擴展頁圖標 (16 * 16) 最好是 png 格式
6. browser_action可以用來定義點擊圖標后展示的窗口，對應接口 chrome.browserAction，這項配置與 page_action 是對立的，只能二選一，以下是 browser_action 子項的配置
default_icon: Object | string 一個或者一組圖標的路徑default_title 設置 tooltipdefault_popup 指定彈出的窗口，可以是任意 htmlbadges “徽章” 就是小圖標上的一個標記，用來展示一些狀態7. page_action代表可以在當前頁面執行的操作，不活動時顯示灰色,對應接口 chrome.pageAction
default_icon: Object | string 一個或者一組圖標的路徑可用 pageAction.(show|hide) 改變插件活動狀態browser_action 和 page_action都用來定義放置在工具欄右上角的圖標點擊情況，但是兩者的活動狀態展示 | 點擊后的展示 | 主要負責場景是不一致的
猜測 browser_action 適用於用戶需要點擊圖標后在彈窗中操作的場景 page_action 試用與在后台運行，重要工作是監聽用戶行為的插件
官方建議：如果要實現的功能只針對某一個頁面有用則建議使用 page_action 否則使用 browser_action
8. background用來定義后台腳本部分
擴展是基於事件的程序，這些事件包括導航到新頁面、刪除書簽、或者關閉選項卡，擴展在他們的后台腳本中監視這些事件，然后用指定的指令進行響應
關於后台腳本的狀態
首次下載后或者更新后被加載后台腳本下載后會處於休眠狀態，直到它偵聽的某個事件被觸發，偵聽到事件后，會使用指定的指令響應（怎么相應自定義）以下情況會需要調用到后台腳本
擴展首次下載或者版本更新后台腳本中正在監聽事件，並且這事件被觸發了content_script 或者其他擴展中調用了 sendMessage當前擴展中的其他部分，例如彈窗中調用了 runtime.getBackgroundPage后台腳本定義選項
{ ... "background": { "scripts": ["bg1.js", "bg2.js"], // 后台腳本可以注冊多個 "persistent": false // 是否是持久的，一般為 false, 某些特殊情況需要參考文檔 }}
12345678事件過濾器，有些事件支持事件過濾，比如選項卡的切換可以監聽
// background.jschrome.webNavigation.onCompleted.addListener(function () {}, { url: [{urlMatches: 'http://www.baidu.com'}] // 過濾});12349. chrome setting 修改 | chrome 用戶界面展示修改 | chrome 一些內置頁面的替換setting 使用 chrome_settings_overrides 配置，詳細配置查看文檔用戶界面 使用 chrome_ui_overrides 配置，詳細配置查看文檔,可以設置一些書簽方面的規則內置頁面替換 使用 chrome_url_overrides 配置，詳細配置查看文檔，標簽頁、歷史頁、新 tab 都可替換10. commands可以通過 commands 選項定義觸發擴展事件的快捷鍵
{ ..., commands: { "xxx": { "suggested_key": { "default": "Ctrl+X", "mac": "Command+X", "windows": "Ctrl+X" } }, "_execute_browser_action": {...}, "_execute_page_action": {...} }}1234567891011121314操作快捷鍵后，插件后台會監聽到對應的事件
// background.jschrome.commands.onCommand.addListener(function(command) {});12注意：\ _execute_browser_action \ _execute_page_action 這兩個命令不會被監聽，他們是觸發 popup 彈出的，要監聽 窗口彈出事件可以使用 popup_page 的onDomReady
11. content_scriptscontent_script 在一個特殊的環境中運行，可以稱之為隔離環境，在這里可以訪問所注入頁面的DOM，但是不能訪問里邊的任何 javascript 變量和函數，反之，頁面中的js 也不能訪問 content_script 中的變量和函數
訪問目標網站的 DOM ，可以用來進行通信
分為兩種情況，一種是聲明型注入腳本，使用 content_scripts 配置項，另一種是編程方式注入使用 permissions: ["activeTab"] 選項，
聲明型注入腳本 content_scripts 值可以是一個數組，設置不同站點的不同注入文件需要設置 matches: ["http://"] 指定匹配的網址，js 設置注入腳本css 設置注入樣式run_at 定義注入要本的時機 document_idle 表示瀏覽器幫你把握時機，會在 DOM 完成 與 window.onload 之后注入；document_start 在 CSS 注入之后，其他任何腳本或者 DOM 之前注入；document.end DOM 完成之后立即注入，但是在圖像等資源之前編程方式注入，不需要指定可訪問的域名，可以針對當前活動的選項卡運行，獲取臨時訪問權限 permissions: ["tabs"] 編程方式注入會在 chrome.tabs.executeScript(tabId, details, callback) 接口中詳細介紹通信案例，通過 content_script 與頁面 共享 DOM，來實現頁面與擴展間的通信
// page.js 頁面中觸發一個postMessage
document.getElementById('btn').addEventListener('click', () => { window.postMessage({type: 'TO_CONNECT_EXTERNAL', data: 'data'});})
// content_script.js 中做中轉
var port = chrome.runtime.connect();
window.addEventListener('message', (e) => { if (e.source !== window) {return};
if (event.data.type && (event.data.type == "FROM_PAGE")) { port.postMessage(event.data.data); // 發消息給擴展 }}, false);
12345678910111213141516171812. externally_connectable這項配置直接實現網站與插件間通信，但是需要在 manifest.json 中作出如下配置
{ "externally_connectable": { "matches": ["http://*.xx.com"] // 只有匹配的網站才可以通信 }}12345// page.js 中發出請求
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
chrome.runtime.sendMessage( editorExtensionId, {type: 'MsgFromPage', msg: 'Hello, I am page~'}, function(response) { console.log(response); });
// background.js
chrome.runtime.onMessageExternal.addListener(function(request, sender, sendResponse) { // 可以針對sender做一些白名單檢查 // sendResponse返回響應 if (request.type == 'MsgFromPage') { sendResponse({tyep: 'MsgFromChrome', msg: 'Hello, I am chrome extension~'}); }});
1234567891011121314151617181920212213. offline_enabled擴展是否需要離線工作，默認為 true, 當chrome 檢測到離線時，程序會被高亮顯示
14. permissions | optional_permissions聲明 權限（插件實現基礎功能所需要的） | 可選權限 （插件中可選的特性所需要的），兩者的子配置項是一樣的
選項的值是一個數組，代表每一個權限，權限可以是已知的權限字符串 也可以是一個主機的匹配模式權限字符串大多都對應着一個同名的 chrome[permissionName] API,全部的權限字符串可以點擊上邊鏈接查看，一下列出常用的權限
activeTab 允許用戶在調用擴展時臨時訪問當前活動的選項卡，background 后台權限，可以用來增加Chrome 運行時間，即開機即運行（雖然是不可見的）bookmarks 書簽操作權限browsingData 瀏覽器數據操作權限，主要用來清除瀏覽器數據 cookie storage 等contentSettings 瀏覽器設置權限contextMenus 上下文菜單添加權限cookies cookie 的查詢、修改、onChange 監聽history 瀏覽器歷史記錄操作權限storage chrome.storage 的使用權限（注意不是瀏覽器的 localStorage）tabs 選項卡權限，允許創建、修改、重新排列選項卡webNavigation 請求進行過程中的操作權限webRequest | webRequestBlocking 開放 正在運行請求的 攔截、阻塞、或修改的權限15. web_accessible_resources指定打包資源的的路徑字符串數組，這些資源是在擴展中是可用了，例如 content_script會用到的資源等,
16. content_security_policy內容安全策略, 默認的安全策略為 script-src 'self'; object-src 'self' 他會有如下限制
禁止 eval 及相關函數禁止內聯<script>塊和內聯事件處理程序(例如，<button onclick="…">)只有擴展包內的腳本和資源才會被加載！通過Web即時下載的將不會被加載可以通過 白名單 使用通配符設置哪些外部資源是可以訪問的（僅支持 https），如下
"content_security_policy": "script-src 'self' https://*.xxx.com; object-src 'self'"
點贊收藏分享
————————————————版權聲明：本文為CSDN博主「mjzhang1993」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。原文鏈接：https://blog.csdn.net/mjzhang1993/article/details/84848899