關(guān)注 “弋凡”（YiFan）微信公眾號(hào)吧 記錄簡(jiǎn)單筆記 做你的最?lèi)?ài)

關(guān)于Chrome Extension

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

Chrome API
manifest.json
消息交互
網(wǎng)頁(yè)和Chrome插件之間的通信

大致流程(個(gè)人理解)

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

• 簡(jiǎn)單記錄

{"name": "名稱(chēng)", -- 必須"description": "描述", "version": "版本號(hào)", -- 必須"manifest_version": 2, -- 必須"icons":{"16": "圖標(biāo).png","46": "圖標(biāo).png","128": "圖標(biāo).png"},// 權(quán)限"permissions": [ "contextMenus", // 右鍵菜單"tabs", // 標(biāo)簽"notifications", // 通知"webRequest", // web請(qǐng)求"webRequestBlocking""<all_urls>",],"browser_action": {"default_popup": "popup.html 右上角點(diǎn)擊后的彈窗，可以用一個(gè)頁(yè)面定義","default_icon": "xxx.png 顯示在右上角的圖標(biāo)按鈕"},// 插件運(yùn)行的環(huán)境，會(huì)一直常駐的后臺(tái)JS或后臺(tái)頁(yè)面 為了告訴腳本哪些文件被引用，這些文件有什么作用"background": {"scripts": ["background.js"]},// 訪問(wèn)目標(biāo)網(wǎng)站的 DOM ，可以用來(lái)進(jìn)行通信"content_scripts": [{//"matches": ["http://*/*", "https://*/*"],// "<all_urls>" 表示匹配所有地址"matches": ["<all_urls>"],// js按需加載順序注入"js": ["content.js"]},// 可訪問(wèn)Web的資源"web_accessible_resources": ["*.html"],// 定義觸發(fā)擴(kuò)展事件的快捷鍵"commands": {"xxx": {"suggested_key": {"default": "Ctrl+X","mac": "Command+X","windows": "Ctrl+X"}},"_execute_browser_action": {...},"_execute_page_action": {...}}// 操作快捷鍵后，插件后臺(tái)會(huì)監(jiān)聽(tīng)到對(duì)應(yīng)的事件// background.js// chrome.commands.onCommand.addListener(function(command) {});// 注意： _execute_browser_action _execute_page_action 這兩個(gè)命令不會(huì)被監(jiān)聽(tīng)，他們是觸發(fā) popup 彈出的// ...... }

快來(lái)關(guān)注“弋凡”微信公眾號(hào)吧

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。