1. 參考文檔

• Chrome插件開(kāi)發(fā)教程： https://dev.crxhome.org/guide/what-is-extensions.html#%E4%BB%80%E4%B9%88%E6%98%AF%E6%89%A9%E5%B1%95
• Chrome插件開(kāi)發(fā)全攻略： http://get.ftqq.com/9167.get
• manifest.json文件詳解： https://blog.csdn.net/fyyyr/article/details/80949965
• chrome extensions api：https://www.cnblogs.com/chear/articles/4964945.html
• 360瀏覽器應(yīng)用開(kāi)發(fā)平臺(tái)： http://open.chrome.#/extension_dev/overview.html
• 結(jié)合vue-cli3開(kāi)發(fā)Chrome插件： https://blog.csdn.net/weixin_34404393/article/details/91476348
• 其他：https://www.cnblogs.com/rubekid/p/11769395.html

2. 文件結(jié)構(gòu)

文件結(jié)構(gòu).png

3. manifest.json

3.1 配置項(xiàng)

3.2 background

常駐的后臺(tái)頁(yè)面，它的生命周期是插件中所有類型頁(yè)面中最長(zhǎng)的，它隨著瀏覽器的打開(kāi)而打開(kāi)，隨著瀏覽器的關(guān)閉而關(guān)閉，所以通常把需要一直運(yùn)行的、啟動(dòng)就運(yùn)行的、全局的代碼放在background里面。

{
    "background":
    {
        "page": "background.html"
        //"scripts": ["js/background.js"]
    },
}

3.3 content-scripts

Chrome插件中向頁(yè)面注入腳本的一種形式，借助content-scripts我們可以實(shí)現(xiàn)通過(guò)配置的方式輕松向指定頁(yè)面注入js和css

{
    "content_scripts": 
    [
        {
            //"matches": ["http://*/*", "https://*/*"],
            // "<all_urls>" 表示匹配所有地址
            "matches": ["<all_urls>"],
            // 多個(gè)JS按順序注入
            "js": ["js/jquery-1.8.3.js", "js/content-script.js"],
            // css注入
            "css": ["css/custom.css"],
            // 代碼注入的時(shí)間，可選值： "document_start", "document_end", or "document_idle"，最后一個(gè)表示頁(yè)面空閑時(shí)，默認(rèn)document_idle
            "run_at": "document_start"
        }
    ],
}

3.4 homepage url

開(kāi)發(fā)者或者插件主頁(yè)設(shè)置

"homepage_url": "http://zha-spstv-w10:4000/#/overall"

home_page.png

3.5 options page

options頁(yè)設(shè)置

"options_page": "html/options.html",

option_page.png

3.6 覆蓋特定頁(yè)面

使用替代頁(yè)，可以將Chrome默認(rèn)的一些特定頁(yè)面替換掉，改為使用擴(kuò)展提供的頁(yè)面。

擴(kuò)展可以替代如下頁(yè)面：

• 書(shū)簽管理器(bookmarks)：從工具菜單上點(diǎn)擊書(shū)簽管理器時(shí)訪問(wèn)的頁(yè)面，或者從地址欄直接輸入 chrome://bookmarks。
• 歷史記錄(history)：從工具菜單上點(diǎn)擊歷史記錄時(shí)訪問(wèn)的頁(yè)面，或者從地址欄直接輸入 chrome://history。
• 新標(biāo)簽頁(yè)(newtabs)：當(dāng)創(chuàng)建新標(biāo)簽的時(shí)候訪問(wèn)的頁(yè)面，或者從地址欄直接輸入 chrome://newtab。

注意：

• 一個(gè)擴(kuò)展只能替代一個(gè)頁(yè)面。
• 如果你替代隱身窗口的頁(yè)面，請(qǐng)注意要在manifest中將 incognito 屬性指定為 "spanning"。
• 不能替代隱身窗口的新標(biāo)簽頁(yè)。

{
    "chrome_url_overrides": {
    "newtab": "html/newtab.html",
    // "history": "history.html",
    // "bookmarks": "bookmarks.html"
  },
}

3.7 桌面通知

3.8 Omnibox

omnibox 應(yīng)用程序界面允許向Google Chrome的地址欄注冊(cè)一個(gè)關(guān)鍵字，地址欄也叫omnibox。當(dāng)用戶輸入你的擴(kuò)展關(guān)鍵字，用戶開(kāi)始與你的擴(kuò)展交互。每個(gè)擊鍵都會(huì)發(fā)送給你的擴(kuò)展，擴(kuò)展提供建議作為相應(yīng)的響應(yīng)。

 "omnibox": { "keyword" : "go" }, 

omnibox.png

4. contextMenus

• type (optional enumerated string ["normal", "checkbox", "radio", "separator"] )
  
  右鍵菜單項(xiàng)的類型。默認(rèn)為“normal”。

• title ( optional string )
  
  右鍵菜單項(xiàng)的顯示文字；除非為“separator”類型，否則此參數(shù)是必須的。

• checked ( optional boolean )
  
  checkbox或者radio的初始狀態(tài)：true代表選中，false代表未選中。在給定的radio中只能有一個(gè)處于選中狀態(tài)。

• contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )
  
  右鍵菜單項(xiàng)將會(huì)在這個(gè)列表指定的上下文類型中顯示。默認(rèn)為“page”。

• onclick ( optional function )
  
  當(dāng)菜單項(xiàng)被點(diǎn)擊時(shí)觸發(fā)的函數(shù)。

5. Permissions權(quán)限列表

https://blog.csdn.net/guoqiankunmiss/article/details/110491523

6. 結(jié)合vue-cli3開(kāi)發(fā)Chrome插件

6.1 搭建環(huán)境

1. 安裝vue-cli3:npm install -g @vue/cli
2. 創(chuàng)建一個(gè)vue-cli3項(xiàng)目：vue create vue-extension，對(duì)話流程選擇默認(rèn)就行。
3. 安裝vue-cli-plugin-chrome-ext插件：vue add chrome-ext,根據(jù)安裝對(duì)話選項(xiàng)設(shè)置好。
4. 安裝element-ui：npm install element-ui
5. npm install babel-plugin-component -D

6.2 運(yùn)行項(xiàng)目

1. npm run build-watch 運(yùn)行開(kāi)發(fā)環(huán)境
2. npm run build 運(yùn)行生產(chǎn)環(huán)境編譯打包