最近有接到任務(wù)需要開發(fā)一款具備自動(dòng)抓取功能的chrome插件菊匿，借此機(jī)會(huì)也對(duì)chrome插件開發(fā)工作有了初步的認(rèn)識(shí)，下面給大家分享一下心得：
1.綜述
應(yīng)該說chrome插件的開發(fā)環(huán)境對(duì)于開發(fā)人員來說是非常友好的（等于不需要配置開發(fā)環(huán)境）跌捆，只要有編譯器就可以了。只要會(huì)js姆钉、html抄瓦、css，就能進(jìn)行開發(fā)了钙姊；
2.基本結(jié)構(gòu)
根據(jù)官方文檔中g(shù)et start的內(nèi)容，chrome插件最基本需要四個(gè)文件：
1.manifest.json——這是一個(gè)配置文件煞额，里面記錄了插件的使用范圍、作者胀莹、版本婚温、其余需要加載的文件等內(nèi)容;
2.icon.png——這個(gè)一看便知描焰，就是插件的圖標(biāo)栅螟；
3.popup.html——點(diǎn)擊插件圖標(biāo)，彈出的頁面（如果在manifest.json中配置了default_popup為該文件的話）萄凤；
4.popup.js——彈出頁面需要加載的js文件搪哪；
上述只是該插件最基本的需求靡努，根據(jù)實(shí)際的開發(fā)經(jīng)驗(yàn)來看，使用popup作為彈出的基本菜單的架構(gòu)兽泄，無法滿足自動(dòng)抓取功能的要求漾月，因此采用了以background為主的設(shè)計(jì)思路，下文會(huì)詳解這方面的內(nèi)容梁肿；
3.加載插件
插件可以打包后加載，也可以直接加載（把上述四個(gè)文件放在一個(gè)文件夾內(nèi)即可）吩蔑，在chrome瀏覽器的設(shè)置中的擴(kuò)展功能中，可以選擇加載插件隧期，非常方便赘娄；
4.設(shè)計(jì)思路
這塊內(nèi)容比較重要，這次我先一一列舉性置，以后有必要的話暑诸，再細(xì)說：
1.background.js是核心文件辟灰，在配置文件中設(shè)置"background": { "page": "background.html" }，在background.html中引用必要的文件（如background.js芥喇，jquery以及其他一些有必要加載的文件）；
2.當(dāng)點(diǎn)擊插件圖標(biāo)時(shí)械馆，一個(gè)background服務(wù)就已經(jīng)開啟了武通；
3.不同頁面之間是無法直接通訊的霹崎，想要控制不同的頁面處理不同的工作冶忱，就需要在background.js中定義一系列監(jiān)聽事件（1.點(diǎn)擊插件圖標(biāo)的事件；2.新建或更新tab的事件；3.捕捉message的事件等）劳淆；
4.無論任何新建或更新tab的事件都會(huì)被background.js捕捉到默赂，可以做后續(xù)處理（比如注入一些js文件）；
5.幾個(gè)特別重要的方法：
chrome.tabs.executeScript(tab_id, code_or_action)——指定某個(gè)tab運(yùn)行特定的代碼或方法缆八；
chrome.runtime.sendMessage { action: 'stop_grab_list', other_params: xxx}——發(fā)送消息；
chrome.runtime.onMessage.addListener (request, sender, sendResponse) ->——捕捉上面的消息蜈缤，request.action就能獲取'stop_grab_list'冯挎，request.other_params就能獲取xxx。sender就是發(fā)消息的主體房官，用sender.tab就能獲得發(fā)送消息的tab頁；sendResponse用于返回結(jié)果翰守；
chrome.browserAction.onClicked.addListener (tab) ->定義點(diǎn)擊插件圖標(biāo)之后，執(zhí)行的代碼了袁；
chrome.tabs.onCreated.addListener (tab) ->——定義新建tab之后自動(dòng)執(zhí)行的代碼湿颅；
chrome.tabs.onUpdated.addListener (tab_id, info, tab) ->定義更新tab之后自動(dòng)執(zhí)行的代碼，其中的info可以調(diào)用info.status == 'complete'來判斷頁面是否已經(jīng)加載完成油航，這個(gè)很重要！
這次的內(nèi)容主要以拋出一些概念為主谊囚，如果需要深入了解，建議直接去看chrome extension的官方文檔函筋，后期我也會(huì)再以某個(gè)實(shí)例進(jìn)行一次分享奠伪。
