Chrome擴(kuò)展是什么
Chrome extension看著像一個(gè)app，我們經(jīng)常會(huì)誤認(rèn)為它是一個(gè)exe或者是一個(gè)app。但是就本質(zhì)而言，Chrome extension是一個(gè)網(wǎng)頁(yè)。它由manifest.json配置文件以及一系列的html、css、js、圖片等組成。所以對(duì)于一個(gè)前端開發(fā)而言，寫一個(gè)Chrome擴(kuò)展是一個(gè)不算太難的事情。
一個(gè)擴(kuò)展的基礎(chǔ)組成
Chrome擴(kuò)展都包含一個(gè)Manifest文件——manifest.json，這個(gè)文件可以告訴Chrome關(guān)于這個(gè)擴(kuò)展的相關(guān)信息，它是整個(gè)擴(kuò)展的入口，也是Chrome擴(kuò)展必不可少的部分。
Chrome擴(kuò)展的Manifest必須包含name（名稱）、version（版本）和manifest_version屬性，目前來(lái)說(shuō)manifest_version屬性值只能為數(shù)字2。
其他常用的可選屬性還有browser_action、page_action、background、permissions、options_page、content_scripts。
官方有給出一份完整的Manifest.json的屬性列表。
以下是一份從官方復(fù)制過(guò)來(lái)的manifest.json文件，我對(duì)它進(jìn)行了一下簡(jiǎn)略處理，可以先感受一下，從這里可以大致的看到一個(gè)擴(kuò)展書寫的規(guī)則。
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
?
// Recommended
"default_locale": "en",
"description": "A plain text description",
"icons": {...},
?
// Pick one (or none)
"browser_action": {...},
"page_action": {...},
?
// Optional
"action": ...,
"author": ...,
"automation": ...,
"background": {
// Recommended
"persistent": false,
// Optional
"service_worker":
},
"homepage_url": "http://path/to/homepage",
"permissions": ["tabs"]
}
我們來(lái)看一下其中一些配置項(xiàng)的意義。
首先是必填的幾個(gè)屬性
name：名稱version：版本manifest_version：只能為2
其次是幾個(gè)我認(rèn)為有必要說(shuō)明一下的：
icon：擴(kuò)展程序的圖標(biāo)，可以有一個(gè)或多個(gè)。使用的地方有很多，比如用在extensions的管理界面，安裝extension程序的時(shí)候等等。browser_action與page_action
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "我的時(shí)鐘",
"default_popup": "popup.html"
}
brower_action與page_action的功能類似，都是用來(lái)處理擴(kuò)展在瀏覽器工具欄上的表現(xiàn)行為。 brower_action擴(kuò)展可以適用于任何頁(yè)面。page_action擴(kuò)展只能作用于某一頁(yè)面，當(dāng)打開該頁(yè)面時(shí)觸發(fā)該Google Chrome擴(kuò)展，關(guān)閉頁(yè)面則Google Chrome擴(kuò)展也隨之消失。
browser_action指定擴(kuò)展的圖標(biāo)放在Chrome的工具欄中，browser_action中的default_icon屬性定義了相應(yīng)圖標(biāo)文件的位置，default_title定義了當(dāng)用戶鼠標(biāo)懸停于擴(kuò)展圖標(biāo)上所顯示的文字，default_popup則定義了當(dāng)用戶單擊擴(kuò)展圖標(biāo)時(shí)所顯示頁(yè)面的文件位置。
- content_scripts
"content_scripts": [
{
"matches": ["*://www.google.com/"],
"js": ["js/...js"]
}
]
如果你想要你的擴(kuò)展可以操作用戶頁(yè)面，就需要用到這個(gè)屬性。這個(gè)屬性可以指定將哪些腳本何時(shí)注入到哪些頁(yè)面中，當(dāng)用戶訪問(wèn)這些頁(yè)面后，相應(yīng)腳本即可自動(dòng)運(yùn)行，從而對(duì)頁(yè)面DOM進(jìn)行操作。切這個(gè)屬性只與頁(yè)面共享DOM，而不與頁(yè)面中的js共享命名空間。
content_scripts屬性值為數(shù)組類型，數(shù)組的每個(gè)元素可以包含matches、exclude_matches、css、js、run_at、all_frames、include_globs和exclude_globs等屬性
-- matches定義了哪些頁(yè)面會(huì)被注入腳本
-- exclude_matches定義了哪些頁(yè)面不會(huì)被注入腳本
-- css和js定義了需要被注入頁(yè)面的js和css
-- run_at定義了何時(shí)被注入
- permissions
由于瀏覽器受限于同源策略，但是如果extension也需要受限的話，功能實(shí)現(xiàn)會(huì)大打折扣，所以chrome是允許extensions不受同源策略影響的，只不過(guò)需要進(jìn)行一些額外的操作。
{
...
"permissions": [
"third party url"
]
}
比如說(shuō)，你需要獲取到一個(gè)第三方頁(yè)面的數(shù)據(jù)，就需要在permissions中進(jìn)行聲明。再比如說(shuō)，在background里使用一些高級(jí)的chrome api（downloads，webRequest，proxy，system等），這些api也是需要授權(quán)才能使用的。如果對(duì)高級(jí)api用法感興趣可以在官方文檔中查詢。
- background
如果你的擴(kuò)展需要常駐后臺(tái)，比如實(shí)現(xiàn)一些實(shí)時(shí)推送的功能。那就需要用到這個(gè)屬性。background可以包含三種屬性，分別是scripts、page和persistent。通常來(lái)說(shuō)，我們只需要使用到scripts。如果指定了scripts`屬性，則Chrome會(huì)在擴(kuò)展啟動(dòng)時(shí)自動(dòng)創(chuàng)建一個(gè)包含所有指定腳本的頁(yè)面。persistent屬性描述了常駐后臺(tái)的方式，可選值為true和false。
更多屬性大家可以參照上方鏈接中給出的官方文檔說(shuō)明，發(fā)掘一下還是可以創(chuàng)造出很多有意思的功能的。
數(shù)據(jù)存儲(chǔ)
我們寫一個(gè)程序不可避免都是需要用到數(shù)據(jù)存儲(chǔ)的，對(duì)于Chrome擴(kuò)展也是這樣。
通常來(lái)說(shuō)，Chrome擴(kuò)展用到的存儲(chǔ)方式有三種，localStorage，Chrome提供的存儲(chǔ)API，web SQL Database。
localStorage的使用眾所周知，這邊就不贅述。
Chrome提供的存儲(chǔ)API是對(duì)localStorage的改進(jìn)，它與localStorage相比有以下區(qū)別：
如果儲(chǔ)存區(qū)域指定為
sync，數(shù)據(jù)可以自動(dòng)同步到用戶當(dāng)前在Chrome上登陸的Google賬戶，如果沒(méi)有網(wǎng)絡(luò)連接的話，sync儲(chǔ)存的數(shù)據(jù)的讀寫與local一致；content_scripts可以直接讀取數(shù)據(jù)，而不必通過(guò)background頁(yè)面，區(qū)別于localStorage需要受限于域名；在隱身模式下仍然可以讀出之前存儲(chǔ)的數(shù)據(jù)；
讀寫速度更快；
用戶數(shù)據(jù)可以以對(duì)象的類型保存。
值得注意的是，使用Chrome存儲(chǔ)API必須要在Manifest的permissions中聲明，之后才有權(quán)限調(diào)用。
chrome.storage.StorageArea提供了5個(gè)方法，分別是get、getBytesInUse、set、remove和clear。
get用于讀取數(shù)據(jù)，set用于寫入數(shù)據(jù)，remove用于刪除數(shù)據(jù)，clear用于清空數(shù)據(jù)，getBytesInUse方法為獲取一個(gè)數(shù)據(jù)或多個(gè)數(shù)據(jù)所占用的總空間，返回結(jié)果的單位是字節(jié)。
擴(kuò)展頁(yè)面間通信
對(duì)于頁(yè)面間的通信，chrome提供了4個(gè)頁(yè)面之間通信的接口。
runtime.sendMessage
runtime.onMessage
runime.connect，更高級(jí)用法，參考官方文檔
runtime.onConnect，更高級(jí)用法，參考官方文檔
這一節(jié)主要說(shuō)一下sengMessage和onMessage。
一般而言，chrome提供的API是不允許在content_scripts中運(yùn)行的，但是runtime.sendMessage和runtime.onMessage可以。所以擴(kuò)展的其他頁(yè)面也可以同content_scripts相互通信。
用法如下：
chrome.runtime.sendMessage(extensionId, message, options, callback)</pre>
extensionId為所發(fā)送消息的目標(biāo)擴(kuò)展，如果不指定這個(gè)值，則默認(rèn)為發(fā)起此消息的擴(kuò)展本身；message為要發(fā)送的內(nèi)容，類型隨意，內(nèi)容隨意；options是一個(gè)可選參數(shù)，屬性的值決定擴(kuò)展發(fā)起此消息時(shí)是否要將TLS通道ID發(fā)送給監(jiān)聽此消息的外部擴(kuò)展。tls參考文檔callback回調(diào)函數(shù)，用于接收返回結(jié)果；
chrome.runtime.onMessage.addListener(callback)
此處的callback為必選參數(shù)，為回調(diào)函數(shù)。callback接收到的參數(shù)有三個(gè)，分別是message、sender和sendResponse，即消息內(nèi)容、消息發(fā)送者相關(guān)信息和相應(yīng)函數(shù)。
chrome擴(kuò)展推薦
最后推薦幾個(gè)我自己常用的擴(kuò)展。
- 草料二維碼，非常方便將url轉(zhuǎn)化成二維碼
- 1px，用于和前端頁(yè)面和設(shè)計(jì)稿進(jìn)行還原度對(duì)比
- charset，方便修改當(dāng)前頁(yè)面的charset
- Momentum，chrome新開頁(yè)自定義dashboard
