編寫自己的谷歌插件
本文適合對谷歌插件開發(fā)感興趣的小伙伴閱讀。
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～
作者：廣東靚仔
一、前言
谷歌插件拓展程序地址：
chrome://extensions/
二、谷歌插件模版
廣東靚仔給小伙伴們推薦兩個瀏覽器插件的模版地址：
https://github.com/EmailThis/extension-boilerplate
https://github.com/antfu/vitesse-webext
三、谷歌插件開發(fā)、發(fā)布流程
在開始講解具體內(nèi)容前，我們有必要先了解下谷歌插件的開發(fā)流程：
? ? 開發(fā)語言，是我們熟悉的JavaScript，一個完整的谷歌插件是由4個部分組成：
manifest.json：義插件的屬性，例如名稱、版本、類型等，（后面我們會詳細(xì)講解） .js文件：與瀏覽器互動的腳本 圖標(biāo)：用來在瀏覽器顯示 HTML文件：實現(xiàn)插件的功能
? ? 當(dāng)我們完成谷歌插件編寫后，把編寫好的文件放到同一個文件夾中，然后在谷歌瀏覽器的工具欄中選擇“擴(kuò)展程序”，進(jìn)入擴(kuò)展管理頁，在右側(cè)選擇“開發(fā)人員模式”，再點擊“載入正在開發(fā)的擴(kuò)展程序”按鈕，定位到這個文件夾，將整個文件夾載入Chrome中。如下所示：
? ? 到這里我們已經(jīng)在本機(jī)完成了谷歌插件的搭建，如果想把自己的谷歌推廣給其他用戶使用，我們需要把我們的谷歌插件進(jìn)行發(fā)布，流程如下：
1、注冊Google 帳號，然后登錄網(wǎng)上應(yīng)用商店
2、添加一個新項，如下所示：
3、用zip文件的形式上傳文件（我們的插件壓縮的時候記得選ZIP，不要選了其他類型）
4、最后選擇發(fā)布就可以了，如下所示：
整體的一個流程如上所示，下面我們進(jìn)行具體內(nèi)容的講解。
四、開發(fā)自己的第一個谷歌插件
? ? 廣東靚仔覺得最重要的第一步，是設(shè)計一個好的圖標(biāo)，好的圖標(biāo)讓使用者有一種專業(yè)的felling。一般設(shè)計兩個不同尺寸的圖標(biāo)：
顯示在地址欄右側(cè)：19×19像素
顯示在擴(kuò)展管理頁：48×48像素的圖標(biāo)
manifest.json
? ? 用來定義插件的屬性，這個文件格式比較固定，我們根據(jù)自己需要進(jìn)行更改就可以了，下面例舉了3個配置文件：
簡單的配置文件：
{
??"name":?"廣東靚仔的demo谷歌插件"，
??"version":?"1.0"，
??"description":?"這是我們搭建的谷歌插件描述"，
??"icons":?{?"48":?"icon48.png"?}，?// 定義圖片的大小，可以自己更改
??"page_action":?{?"default_icon":?"icon19.png"?}，// 定義圖片的名稱，可以自己更改
??"background_page":?"background.html"，// 定義HTML名稱，可以自己更改
??"permissions":?[?"tabs"?]，
??"content_scripts":?[{
??"matches":?["http://*.google.com/*"]，
??"js":?["visit.js"]// 定義.js文件名稱，可以自己更改
??}]
}
稍微齊全點的配置文件：
{
????//?清單文件的版本，這個必須寫，而且必須是2
????"manifest_version":?2,
????//?插件的名稱
????"name":?"demo",
????//?插件的版本
????"version":?"1.0.0",
????//?插件描述
????"description":?"簡單的Chrome擴(kuò)展demo",
????//?圖標(biāo)，一般偷懶全部用一個尺寸的也沒問題
????"icons":
????{
????????"16":?"img/icon.png",
????????"48":?"img/icon.png",
????????"128":?"img/icon.png"
????},
????//?會一直常駐的后臺JS或后臺頁面
????"background":
????{
????????//?2種指定方式，如果指定JS，那么會自動生成一個背景頁
????????"page":?"background.html"
????????//"scripts":?["js/background.js"]
????},
????//?瀏覽器右上角圖標(biāo)設(shè)置，browser_action、page_action、app必須三選一
????"browser_action":?
????{
????????"default_icon":?"img/icon.png",
????????//?圖標(biāo)懸停時的標(biāo)題，可選
????????"default_title":?"這是一個示例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://*/*"],
????????????//?"" ?表示匹配所有地址
????????????"matches":?["" ],
????????????//?多個JS按順序注入
????????????"js":?["js/jquery-1.8.3.js",?"js/content-script.js"],
????????????//?JS的注入可以隨便一點，但是CSS的注意就要千萬小心了，因為一不小心就可能影響全局樣式
????????????"css":?["css/custom.css"],
????????????//?代碼注入的時間，可選值：?"document_start",?"document_end",?or?"document_idle"，最后一個表示頁面空閑時，默認(rèn)document_idle
????????????"run_at":?"document_start"
????????},
????????//?這里僅僅是為了演示content-script可以配置多個規(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"],
????//?插件主頁，這個很重要，不要浪費了這個免費廣告位
????"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個都寫，新版Chrome只認(rèn)后面這一個
????"options_ui":
????{
????????"page":?"options.html",
????????//?添加一些默認(rèn)的樣式，推薦使用
????????"chrome_style":?true
????},
????//?向地址欄注冊一個關(guān)鍵字以提供搜索建議，只能設(shè)置一個關(guān)鍵字
????"omnibox":?{?"keyword"?:?"go"?},
????//?默認(rèn)語言
????"default_locale":?"zh_CN",
????//?devtools頁面入口，注意只能指向一個HTML文件，不能是JS文件
????"devtools_page":?"devtools.html"
}完整的配置文檔地址：https://developer.chrome.com/extensions/manifest
重要字段具體解析：
content-scripts和原始頁面共享DOM，但是不共享JS，如要訪問頁面JS（例如某個JS變量），只能通過injected js來實現(xiàn)。content-scripts不能訪問絕大部分chrome.xxx.api，除了下面這4種：chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
chrome.i18n
chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
chrome.storage
background的權(quán)限非常高，幾乎可以調(diào)用所有的Chrome擴(kuò)展API（除了devtools），而且它可以無限制跨域，也就是可以跨域訪問任何網(wǎng)站而無需要求對方設(shè)置cors。
popup 是我們的圖標(biāo)進(jìn)入焦點時，顯示的彈框
injected-script?通過DOM操作的方式向頁面注入的一種JS，廣東靚仔用這個比較多，content-script存在一些不足：（content-script無法訪問頁面中的JS，雖然它可以操作DOM，但是DOM卻不能調(diào)用它。比如：onclick和addEventListener無法使用）
我們可以這樣使用，在content-script通過DOM方式向頁面注入inject-script代碼。示例如下：
第一步，配置文件中加如下代碼：
{
????//?普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
????"web_accessible_resources":?["js/inject.js"],
}
第二步，向頁面注入js：
//?在頁面中注入JS
function?injectCustomJs(jsPath)
{
????jsPath?=?jsPath?||?'js/inject.js';
????var?temp?=?document.createElement('script');
????temp.setAttribute('type',?'text/javascript');
????temp.src?=?chrome.extension.getURL(jsPath);
????temp.onload?=?function()
????{
????????//?執(zhí)行完后移除掉
????????this.parentNode.removeChild(this);
????};
????document.head.appendChild(temp);
}
動態(tài)執(zhí)行js代碼方式如下：
//?動態(tài)執(zhí)行JS代碼
chrome.tabs.executeScript(tabId,?{code:?'document.body.style.backgroundColor="red"'});
//?動態(tài)執(zhí)行JS文件
chrome.tabs.executeScript(tabId,?{file:?'some-script.js'});
override 我們可以覆蓋一些制定頁面，將Chrome默認(rèn)的一些特定頁面替換掉，改為使用擴(kuò)展提供的頁面。
比如：
歷史記錄：從工具菜單上點擊歷史記錄時訪問的頁面，或者從地址欄直接輸入?chrome://history
新標(biāo)簽頁：當(dāng)創(chuàng)建新標(biāo)簽的時候訪問的頁面，或者從地址欄直接輸入?chrome://newtab
書簽：瀏覽器的書簽，或者直接輸入?chrome://bookmarks
我們可以把這些替換成我們想要的頁面，比如新開Tab，我們可以替換成“一些新聞”，看點咨詢等等。
devtools擴(kuò)展
html>
<html>
<head>head>
<body>
????<script?type="text/javascript"?src="js/devtools.js">script>
body>
html>
本地存儲建議使用：chrome.storage
多語言?插件根目錄新建一個名為_locales的文件夾，再在下面新建一些語言的文件夾，如en、zh_CN、zh_TW，然后再在每個文件夾放入一個messages.json，同時必須在清單文件中設(shè)置default_locale。
.js文件
?.js文件文件是連接瀏覽器和插件的橋梁，最基本的代碼就是：chrome.extension.sendRequest();
chrome.tabs
chrome.runtime
chrome.webRequest
chrome.window
chrome.storage
chrome.contextMenus
chrome.devtools
chrome.extension
五、總結(jié)
關(guān)注我，一起攜手進(jìn)階
歡迎關(guān)注前端早茶，與廣東靚仔攜手共同進(jìn)階～