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

關于Chrome Extension

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

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

大致流程(個人理解)

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 彈出的// ...... }

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

總結

以上是生活随笔為你收集整理的浏览器插件开发简介的全部內容，希望文章能夠幫你解決所遇到的問題。

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