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è)前端開(kāi)發(fā)而言，寫(xiě)一個(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（名稱(chēng)）、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ò)展書(shū)寫(xiě)的規(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：名稱(chēng)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)似铁孵，都是用來(lái)處理擴(kuò)展在瀏覽器工具欄上的表現(xiàn)行為锭硼。 brower_action擴(kuò)展可以適用于任何頁(yè)面。page_action擴(kuò)展只能作用于某一頁(yè)面蜕劝，當(dāng)打開(kāi)該頁(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)用戶(hù)鼠標(biāo)懸停于擴(kuò)展圖標(biāo)上所顯示的文字，default_popup則定義了當(dāng)用戶(hù)單擊擴(kuò)展圖標(biāo)時(shí)所顯示頁(yè)面的文件位置烫止。
- content_scripts
"content_scripts": [
{
"matches": ["*://www.google.com/"],
"js": ["js/...js"]
}
]
如果你想要你的擴(kuò)展可以操作用戶(hù)頁(yè)面蒋荚，就需要用到這個(gè)屬性。這個(gè)屬性可以指定將哪些腳本何時(shí)注入到哪些頁(yè)面中馆蠕，當(dāng)用戶(hù)訪問(wèn)這些頁(yè)面后期升，相應(yīng)腳本即可自動(dòng)運(yùn)行，從而對(duì)頁(yè)面DOM進(jìn)行操作互躬。切這個(gè)屬性只與頁(yè)面共享DOM播赁，而不與頁(yè)面中的js共享命名空間。
content_scripts屬性值為數(shù)組類(lèi)型吼渡，數(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用法感興趣可以在官方文檔中查詢(xún)。
- 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ǔ)
我們寫(xiě)一個(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)同步到用戶(hù)當(dāng)前在Chrome上登陸的Google賬戶(hù)滑燃，如果沒(méi)有網(wǎng)絡(luò)連接的話，sync儲(chǔ)存的數(shù)據(jù)的讀寫(xiě)與local一致喂柒；content_scripts可以直接讀取數(shù)據(jù)不瓶，而不必通過(guò)background頁(yè)面，區(qū)別于localStorage需要受限于域名灾杰；在隱身模式下仍然可以讀出之前存儲(chǔ)的數(shù)據(jù)蚊丐；
讀寫(xiě)速度更快；
用戶(hù)數(shù)據(jù)可以以對(duì)象的類(lèi)型保存艳吠。
值得注意的是麦备，使用Chrome存儲(chǔ)API必須要在Manifest的permissions中聲明，之后才有權(quán)限調(diào)用昭娩。
chrome.storage.StorageArea提供了5個(gè)方法凛篙，分別是get、getBytesInUse栏渺、set呛梆、remove和clear。
get用于讀取數(shù)據(jù)磕诊，set用于寫(xiě)入數(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)容徒河，類(lèi)型隨意，內(nèi)容隨意送漠；options是一個(gè)可選參數(shù)顽照，屬性的值決定擴(kuò)展發(fā)起此消息時(shí)是否要將TLS通道ID發(fā)送給監(jiān)聽(tīng)此消息的外部擴(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新開(kāi)頁(yè)自定義dashboard
