1 前言
對于一個web前端開發(fā)者，chrome瀏覽器是一個工作，學(xué)習(xí)和生活的必備工具。除了chrome本身的基本能力（控制臺等）外，能大幅提高這個神器的使用體驗的是，可擴(kuò)展能力（插件）以及豐富的插件生態(tài)。
每個人根據(jù)使用習(xí)慣會有自己的一套插件配置（鼠標(biāo)手勢、代理配置等等），這些插件包括具體的插件的配置信息，甚至可以和你的google賬號綁定，當(dāng)你換一臺電腦，只要使用相同的google賬號登錄chrome，就會享受到一致的使用體驗。
當(dāng)你打開chrome的“擴(kuò)展程序”界面，看著琳瑯滿目的插件，有沒有想過親自動手，打造一個自己的插件呢？當(dāng)然，這種想法不應(yīng)該是閑著某個部位疼，刻意的去開發(fā)一個連自己都不會實際使用的插件。而應(yīng)該是發(fā)現(xiàn)現(xiàn)在的插件庫里，沒有一個能解決自已在使用chrome過程中某個痛點的插件。
好，假設(shè)現(xiàn)在你在chrome的使用上想要一個擴(kuò)展功能，但用各種關(guān)鍵字在各種可能找到答案的地方都搜索了，仍然沒有看到想要的插件。這個時候，就可以考慮自己開發(fā)了。如果剛好你是一個web前端開發(fā)者，那么恭喜你，幾乎沒有門檻（只要有能看懂chrome extentions API文檔就行），因為所有用到的技術(shù)都是你所熟悉的： json配置, js邏輯， css+html展示。
2 初步探索
chrome extension的官方文檔上，有著簡單的demo指引，全面的API文檔，以及對于各種API的豐富例子。對于初次開發(fā)chrome插件的人來說，建議先看入門指引小demo，篇幅很小，很快可以看完?？赐曛髮hrome插件的基本配置和文件結(jié)構(gòu)會有一個大致的認(rèn)識，同時也學(xué)會了如何在chrome上加載自己在本地開發(fā)的插件。
chrome extention支持的擴(kuò)展點以及擴(kuò)展功能很多，對于初學(xué)者不可能一下子看完官方所有文檔再去動手。而應(yīng)該是先根據(jù)自己用過的插件，腦海中有個大致的印象：插件可以在哪些地方起到效果。chrome插件最常見的功能莫過到url欄右側(cè)的那些小圖標(biāo)了，就是這些：
如果看完上入門指引小demo后，你肯定知道了怎么樣實現(xiàn)這樣一個功能。這里就不講官方文檔里已經(jīng)講過的細(xì)節(jié)，主要講一下比較重要的配置文件 manifest.json 。官方小demo的配置文件內(nèi)容如下：
{ 'manifest_version': 2, // 插件標(biāo)準(zhǔn)版本，目前統(tǒng)一是2'name': 'Getting started example', // 插件名稱，顯示在插件詳情和插件商店中'description': 'This extension shows a Google Image search result for the current page', // 簡介'version': '1.0', // 插件版本,發(fā)布到插件商店后，如果有修改插件代碼，需要修改這里'browser_action': { // 就是url欄右側(cè)那些小圖標(biāo)啊'default_icon': 'icon.png', // 展示出來的圖標(biāo)圖片'default_popup': 'popup.html' // 點擊圖標(biāo)后展示的氣泡框頁面（獨立頁面，可加載js / css）}, 'permissions': [ // 插件權(quán)限設(shè)置，規(guī)則較多，建議看官方文檔'activeTab', 'https://ajax.googleapis.com/']}
插件配置文件里配置的文件路徑，都是相對于mainfest.json的相對路徑。所以當(dāng)插件邏輯并不復(fù)雜時，通常就將配置文件和插件代碼直接放在同一層目錄下。插件配置文件中，配置了該插件擴(kuò)展的描述信息、擴(kuò)展的功能，以及插件的訪問權(quán)限。插件功能除了browser_action配置的popup頁面外，還支持什么功能呢？用過鼠標(biāo)手勢類插件的肯定知道，插件可以訪問和修改頁面dom，因為這類插件本質(zhì)就是在dom上繪制鼠標(biāo)路徑。那么在哪里配置控制頁面dom的代碼呢？在content_scripts中：
{ 'name': 'My extension',... 'content_scripts': [ // 這里配置的腳本和樣式將直接按順序注入到影響的頁面中{ 'matches': ['http://www.google.com/*'], 'css': ['mystyles.css'], 'js': ['jquery.js', 'myscript.js']}],...}
content_scripts實際上是運行在受插件影響的頁面中，在devtool中可以看到插件注入的這些內(nèi)容:
目前我們已經(jīng)掌握了插件兩個功能點的配置了。如果用過evernote剪裁插件的人應(yīng)該知道，插件可以改變chrome在頁面上的右鍵菜單：
這里在哪里實現(xiàn)的呢？以上的兩個配置點無法實現(xiàn)，是在background項中配置的：
{ 'name': 'My extension',... 'background': { // 在瀏覽器運行環(huán)境中運行的后臺腳本，只要開啟插件就會生效'scripts': ['background.js']}
了解了上面三種擴(kuò)展點的配置方法后，就可以開始開發(fā)功能豐富的插件了。
3 插件開發(fā)示例
本人開發(fā)了一個插件，通過介紹這個插件的開發(fā)流程，讓大家熟悉幾個常用的API。
初衷/痛點：平時看一些文章/博客，要處理手頭上其他事情，不得不中斷。為了下次再看，通常是保存到書簽/筆記。使用書簽/筆記的方法，有兩個弊端：一個是下次再進(jìn)入時，不記得上次看到哪里了，又得重頭開始看，或者拼命回憶上次看到哪里；另一個是，下次根本不記得哪些是沒有看完的（除非專門建一個分類標(biāo)簽）。
期望：有個插件，能夠記錄那些沒看完，但又非常想繼續(xù)看完的文章，即使關(guān)閉瀏覽器，換個瀏覽器，也能夠獲取到這些記錄，并且打開再次打開文章時，能自動跳轉(zhuǎn)到上次看到的位置。
這個插件的主要功能是：
記錄沒有看完的文章/博客（在頁面上通過右鍵菜單添加標(biāo)記）,保存進(jìn)度（按高度百分比）。
下次從記錄（url欄右側(cè)插件功能點）中進(jìn)入文章頁面時，頁面會滾動到上次標(biāo)記的位置。
3.1 配置文件
這個插件用到了2節(jié)中講到了3個插件擴(kuò)展點： browser_action , content_scripts 和 background。配置文件如下：
{ 'manifest_version': 2, 'name': 'Progress Bookmark', 'description': 'save progress of articles that has not been read completely', 'version': '1.1.5', 'browser_action': { 'default_icon': 'icon48.png', 'default_popup': 'popup.html', 'default_title': 'Progress Bookmark', 'default_badgetext': 'test'}, 'icons': { '16': 'icon16.png', '48': 'icon48.png', '128': 'icon128.png'}, 'background': { 'scripts': ['background.js']}, 'content_scripts': [{ 'matches': [ 'http://*/*', 'https://*/*'], 'js': [ 'jquery-2.2.0.min.js', 'content_script.js'], 'css': ['mystyle.css']}], 'permissions': [ 'contextMenus', 'storage', 'tabs', 'http://*/*', 'https://*/*']}
上面的配置文件已經(jīng)包含了大部分需要開發(fā)的文件名： popup.html, background.js, content_script.js mystyle.css。另外，各種尺寸的icon圖片，用于插件在不同地方（插件logo，pop圖標(biāo)，插件商店等等）展示。目錄結(jié)構(gòu)如下：
3.2 數(shù)據(jù)存儲和數(shù)據(jù)流
本插件的功能類似于書簽，需要保存目標(biāo)頁面的一些信息（標(biāo)題, url, 進(jìn)度）。那么有沒有一種好的方法，可以保存這些數(shù)據(jù)，并且在同一個google賬號上共享呢？還真有：chrome.storage。官方文檔中詳細(xì)介紹了其用法，以及如何在同賬號不同瀏覽器上自動同步數(shù)據(jù)。
基于chrome.storage，本插件的各種擴(kuò)展點的數(shù)據(jù)流操作圖如下：
上圖中，content_script和background的腳本運行環(huán)境不一樣，通過message來進(jìn)行通訊。
###３.3 popup頁面 本插件的popup頁面用于展示已經(jīng)保存記錄的未讀完頁面，頁面展示效果如下:
該頁面負(fù)責(zé)展示和刪除保存的記錄，頁面主要邏輯如下:
// popup.js in popup.htmldocument.addEventListener('DOMContentLoaded', function() {loadStorage();bindEvents();});function loadStorage() { // 讀取storage中的記錄并renderchrome.storage.sync.get(null, function(data) { var list = [],prop,html; //console.log(data);for (prop in data) { if (data.hasOwnProperty(prop)) { if (data[prop].pageX !== undefined) {list.push($.extend({}, data[prop], { url: prop}));}}}html = renderList(list);$('#content').html(html);});}function bindEvents() {$(document).on('click', '.js-remove', function(e) { // 監(jiān)聽和刪除記錄//console.log('click remove');var $this = $(this),$link = $this.closest('tr').find('.text-title a'),url = $link.attr('href');chrome.storage.sync.remove(url, function() {loadStorage();});});}
3.4 content_script
content_script主要有兩個功能：
在頁面中操作（新增 、滾動到指定位置、刪除）記錄坐標(biāo)的元素 ；
向background發(fā)送坐標(biāo)消息和刪除坐標(biāo)的消息。 主要功能代碼如下：
// content_script.jsfunction checkBookmark(e) { // 初始化時檢測storage中當(dāng)前頁面的書簽信息var url = location.href;chrome.storage.sync.get(url, function(data) {data = data[url]; if (!data) { return;} //console.log('get: ' + JSON.stringify(data));insertBookTag(data);$scrollElems[0].animate({ scrollTop: data.pageY}, 1000); // body scroll失敗，嘗試html scrollif ($scrollElems[0].scrollTop() !== data.pageY) {$scrollElems[1].animate({ scrollTop: data.pageY}, 1000);}});}function bindEvents() { // 事件和消息$doc.on('mouseup', function(e) { // 右鍵記錄當(dāng)前位置，并發(fā)送message給background//console.log(e.which);if (e.which === 3) {chrome.runtime.sendMessage({ type: 'bookmark-position', pageX: e.pageX, pageY: e.pageY, title: document.title, progress: Math.floor(e.pageY * 100 / $doc.height())});}}).on('ready', checkBookmark).on('click', '#book-mark-tag .js-delete', function(e) {chrome.runtime.sendMessage({ type: 'remove-bookmark'});});chrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { // background返回的回調(diào)消息if (request.type === 'add-bookmark-cb') {insertBookTag(request);} else if (request.type === 'remove-bookmark-cb') {deleteTag();}});}
3.5 background
background負(fù)責(zé)的任務(wù)有：
添加右鍵菜單
接收content_script發(fā)來的消息并處理
// background.jsfunction createMenu() { // 添加右鍵菜單var contexts = ['page', 'selection', 'link', 'editable', 'image', 'video', 'audio'];contextId = chrome.contextMenus.create({ 'title': 'Set progress tag here', 'contexts': contexts, 'onclick': menuHandle});}function menuHandle() { // 右鍵菜單點擊時的處理函數(shù)//console.log('click');var value = {},key = senderCur.url,obj = {};value.pageX = requestCur.pageX;value.pageY = requestCur.pageY;value.progress = requestCur.progress;value.title = requestCur.title;obj[key] = value; //console.log(obj);chrome.storage.sync.set(obj, function() { //console.log('send callback');chrome.tabs.query({ // 查找當(dāng)前tabactive: true, currentWindow: true}, function(tabs) { // 發(fā)送消息到當(dāng)前tab,添加書簽相關(guān)dom節(jié)點chrome.tabs.sendMessage(tabs[0].id, { type: 'add-bookmark-cb', pageX: requestCur.pageX, pageY: requestCur.pageY});});});}function bindEvents() { // 響應(yīng)來自content_script的messagechrome.runtime.onMessage.addListener(function(request, sender, sendRequest) { if (request.type === 'bookmark-position') { // 添加/update書簽requestCur = request;senderCur = sender;} else if (request.type === 'remove-bookmark') { // 刪除書簽//console.log('sendRequest: ' + sendRequest);chrome.storage.sync.remove(sender.url, function() {chrome.tabs.query({ // 查找當(dāng)前激活的標(biāo)簽tabactive: true, currentWindow: true}, function(tabs) { // 發(fā)送消息到當(dāng)前tab,刪除書簽相關(guān)dom節(jié)點chrome.tabs.sendMessage(tabs[0].id, { type: 'remove-bookmark-cb'});});});}});}
4 插件調(diào)試方法
5 插件發(fā)布
需要google賬戶+信用卡（為了成為google認(rèn)證的開發(fā)者） 參考鏈接：https://segmentfault.com/a/1190000000354014
