webExtension 瀏覽器插件(chrome)

介紹

擴(kuò)展由不同的但相互聯(lián)系的組件組成智哀。組件可以包括后臺腳本留美，內(nèi)容腳本拇颅，選項(xiàng)頁奏司，UI元素和各種邏輯文件。擴(kuò)展組件是使用Web開發(fā)技術(shù)創(chuàng)建的：HTML蔬蕊，CSS和JavaScript结澄。擴(kuò)展的組件將取決于其功能，并且可能不需要所有選項(xiàng)岸夯。

manifest.json

{
    // 清單文件的版本麻献，這個(gè)必須寫，而且必須是2
    "manifest_version": 2,
    // 插件的名稱
    "name": "demo",
    // 插件的版本
    "version": "1.0.0",
    // 插件描述
    "description": "簡單的Chrome擴(kuò)展demo",
    // 圖標(biāo)猜扮，一般偷懶全部用一個(gè)尺寸的也沒問題
    "icons":
    {
        "16": "img/icon.png",
        "48": "img/icon.png",
        "128": "img/icon.png"
    },
    // 會一直常駐的后臺JS或后臺頁面
    "background":
    {
        // 2種指定方式勉吻，如果指定JS，那么會自動生成一個(gè)背景頁
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
    // 瀏覽器右上角圖標(biāo)設(shè)置旅赢，browser_action齿桃、page_action、app必須三選一
    "browser_action": 
    {
        "default_icon": "img/icon.png",
        // 圖標(biāo)懸停時(shí)的標(biāo)題煮盼，可選
        "default_title": "這是一個(gè)示例Chrome插件",
        "default_popup": "popup.html"
    },
    // 當(dāng)某些特定頁面打開才顯示的圖標(biāo)
    /*"page_action":
    {
        "default_icon": "img/icon.png",
        "default_title": "我是pageAction",
        "default_popup": "popup.html"
    },*/
    // 需要直接注入頁面的JS
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個(gè)JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // JS的注入可以隨便一點(diǎn)短纵，但是CSS的注意就要千萬小心了，因?yàn)橐徊恍⌒木涂赡苡绊懭謽邮?            "css": ["css/custom.css"],
            // 代碼注入的時(shí)間僵控，可選值： "document_start", "document_end", or "document_idle"香到，最后一個(gè)表示頁面空閑時(shí)，默認(rèn)document_idle
            "run_at": "document_start"
        },
        // 這里僅僅是為了演示content-script可以配置多個(gè)規(guī)則
        {
            "matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
            "js": ["js/show-image-content-size.js"]
        }
    ],
    // 權(quán)限申請
    "permissions":
    [
        "contextMenus", // 右鍵菜單
        "tabs", // 標(biāo)簽
        "notifications", // 通知
        "webRequest", // web請求
        "webRequestBlocking",
        "storage", // 插件本地存儲
        "http://*/*", // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
        "https://*/*" // 可以通過executeScript或者insertCSS訪問的網(wǎng)站
    ],
    // 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
    "web_accessible_resources": ["js/inject.js"],
    // 插件主頁悠就，這個(gè)很重要千绪，不要浪費(fèi)了這個(gè)免費(fèi)廣告位
    "homepage_url": "https://www.baidu.com",
    // 覆蓋瀏覽器默認(rèn)頁面
    "chrome_url_overrides":
    {
        // 覆蓋瀏覽器默認(rèn)的新標(biāo)簽頁
        "newtab": "newtab.html"
    },
    // Chrome40以前的插件配置頁寫法
    "options_page": "options.html",
    // Chrome40以后的插件配置頁寫法，如果2個(gè)都寫梗脾，新版Chrome只認(rèn)后面這一個(gè)
    "options_ui":
    {
        "page": "options.html",
        // 添加一些默認(rèn)的樣式荸型，推薦使用
        "chrome_style": true
    },
    // 向地址欄注冊一個(gè)關(guān)鍵字以提供搜索建議，只能設(shè)置一個(gè)關(guān)鍵字
    "omnibox": { "keyword" : "go" },
    // 默認(rèn)語言
    "default_locale": "zh_CN",
    // devtools頁面入口炸茧，注意只能指向一個(gè)HTML文件瑞妇，不能是JS文件
    "devtools_page": "devtools.html"
}

實(shí)戰(zhàn)

訪問百度網(wǎng)頁時(shí)增加一個(gè)紅色框

創(chuàng)建文件夾
```
mkdir borderify
```

創(chuàng)建 manifest.json文件進(jìn)行配置

{
  "name": "添加邊框",
  "manifest_version": 2,
  "version": "1.0",
  "description": "添加邊框",

  "browser_action": {
    "default_icon": "img/icon.png",
    "default_title": "添加邊框"
  },

  "icons": {
    "16": "img/icon.png",
      "48": "img/icon.png",
      "128": "img/icon.png"
  },
  
  "content_scripts": [
    {
      "matches": ["*://*.baidu.com/*"],
      "js": ["borderify.js"]
    }
  ]
}

matches：匹配規(guī)則只匹配百度網(wǎng)址

js：需要直接注入頁面的JS 文件

icons：圖標(biāo)

創(chuàng)建icon圖片img/icon.png

創(chuàng)建borderify.js文件

document.body.style.border = "5px solid red"

整體目錄結(jié)構(gòu)

image-20201229170601117.png

添加插件

image-20201229170909111.png

image-20201229171034037.png
訪問百度，查看效果

image-20201229171216812.png

參考資料

【干貨】Chrome插件(擴(kuò)展)開發(fā)全攻略
 官方文檔
 API Reference
ReferenceError: browser is not defined
webextension-polyfill
Chrome擴(kuò)展及應(yīng)用開發(fā)
Firefox Extension

最后編輯于：2020.12.29 17:22:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者