瀏覽器插件開發簡介

關注 “弋凡”（YiFan）微信公衆號吧 記錄簡單筆記 做你的最愛

關於Chrome Extension

Chrome Extension 瀏覽器的功能擴展插件,由html、css、js和一個描述文件manifest.json組成,在瀏覽器中顯示圖標,本質上其實就是一個由html、css、js、圖片等資源組成的一個.crx後綴的壓縮包

Chrome API
manifest.json
消息交互
網頁和Chrome插件之間的通信

大致流程(個人理解)

1. manifest.json 配置說明(必須文件)

   • 簡單記錄

   {
       "name": "名稱",			 -- 必須
       "description": "描述",	
       "version": "版本號",	    -- 必須
       "manifest_version": 2,	  -- 必須
       "icons":{
           "16": "圖標.png",
           "46": "圖標.png",
           "128": "圖標.png"
       },
   	// 權限
   	"permissions": [ 
           "contextMenus", // 右鍵菜單
           "tabs", // 標籤
           "notifications", // 通知
           "webRequest", // web請求
           "webRequestBlocking"
           "<all_urls>",
          
       ],
       "browser_action": {
           "default_popup": "popup.html 右上角點擊後的彈窗，可以用一個頁面定義",
           "default_icon": "xxx.png 顯示在右上角的圖標按鈕"
       },
   	// 插件運行的環境，會一直常駐的後臺JS或後臺頁面 爲了告訴腳本哪些文件被引用，這些文件有什麼作用
       "background":    
   	{
   		"scripts": ["background.js"]
   	},
   	// 訪問目標網站的 DOM ，可以用來進行通信
   	"content_scripts": [
       {
           //"matches": ["http://*/*", "https://*/*"],
           // "<all_urls>" 表示匹配所有地址
           "matches": ["<all_urls>"],
           // js按需加載順序注入
           "js": ["content.js"]
       },
       // 可訪問Web的資源
       "web_accessible_resources": ["*.html"],
   	// 定義觸發擴展事件的快捷鍵
   	"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 彈出的
       // ......  
   }
   

快來關注“弋凡”微信公衆號吧