****前言****
Chrome瀏覽器擴展開發(fā)算是相當(dāng)簡單的，基本只要掌握HTML+CSS+Javascript刹帕，即可快速開發(fā)一個屬于你的Chrome插件！
****Chrome擴展基本目錄結(jié)構(gòu)****
manifest.json 這是一個配置文件，里面記錄了擴展的使用范圍啦辐、作者卓嫂、版本慷暂、其余需要加載的文件等內(nèi)容;
icon.png 這個一看便知，就是擴展的圖標(biāo)～～～
popup.html 點擊擴展圖標(biāo)晨雳，彈出的面板頁面（如果在manifest.json中配置了default_popup為該文件的話）
popup.js popup面板加載的js腳本文件
popup.css popup面板加載的css樣式文件
- 具體分析manifest.json插件的配置文件
{
"name": "Alic", //插件的名稱
"version": "0.1.0", //擴展的版本
"manifest_version":2, //這個是必須的行瑞，并且值為2
"description": "Chrome擴展demo", //擴展的基本描述
"browser_action": {
"default_icon": "icon.png" , //插件圖標(biāo)icon位置
"default_title": "默認(rèn)標(biāo)題", //鼠標(biāo)hover是的標(biāo)題
"default_popup": "popup.html" //單擊圖標(biāo)popup出來的面板
},
"permissions":[
"http://www.samego.com"
]
}
其它屬性的詳細(xì)說明
permissions
permissions 屬性是一個數(shù)組，它定義了擴展需要向 Chrome 申請的權(quán)限餐禁，比如通過 XMLHttpRequest 跨域請求數(shù)據(jù)血久、訪問瀏覽器選項卡（tabs）、獲取當(dāng)前活動選項卡（activeTab）帮非、瀏覽器通知（notifications）氧吐、存儲（storage）等，可以根據(jù)需要添加末盔。
{
"permissions": [
"http://api.example.com/api/"
"tabs",
"activeTab",
"notifications",
"storage"
]
}
background
background 可以使擴展常駐后臺筑舅，比較常用的是指定子屬性 scripts，表示在擴展啟動時自動創(chuàng)建一個包含所有指定腳本的頁面陨舱。
{
"background": {
"scripts": ["./public/js/background.js"]
}
}
chrome_url_overrides
chrome_url_overrides 屬性可以自定義的頁面替換 Chrome 相應(yīng)默認(rèn)的頁面翠拣，比如新標(biāo)簽頁（newtab）、書簽頁面（bookmarks）和歷史記錄（history）游盲。
{
"chrome_url_overrides": {
"newtab": "tab.html"
}
}
****Chrome擴展調(diào)試****
menu->設(shè)置->擴展程序
注意：將開發(fā)者模式選中～～～
The first = 點擊加載已解壓的擴展程序误墓，并選擇擴展程序的目錄
完成后會在項目的根目錄生成xx.crx以及xx.pem兩個文件
The second = 查看瀏覽器的工具欄
我的插件dir-tree
簡單的擴展插件就完成了 ～～～
****background交互****
簡單來說呢，上面完成的其實就是一個擴展程序的微框架益缎。
background顧名思義呢就是擴展程序的后臺腳本谜慌，該腳本在程序運行之后一直處于后臺運行狀態(tài)。記錄常用的API链峭。
在background里綁定browserAction的點擊事件定義事件響應(yīng)處理
chrome.browserAction.onClicked.addListener(function(){
//to-do
});
調(diào)用chrome.tabs.create()來創(chuàng)建新的tab畦娄，url既可以是path也可以是網(wǎng)址
chrome.tabs.create({url: "./home/index.html"});
content script調(diào)用background方法
在background腳本定義方法
// 創(chuàng)建新標(biāo)簽頁的自定義方法
function testDynamic(){
chrome.tabs.create({url: "./home/index.html"});
}
在content script使用content script里定義的方法
var bg = chrome.extension.getBackgroundPage();
bg.testDynamic();
content script與background交互
content script監(jiān)聽消息：
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {});
background發(fā)送消息：
chrome.tabs.sendRequest(tab.id, data, function(data) {});
相反～～～
background監(jiān)聽消息：
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {});
content script側(cè)發(fā)送消息：
chrome.extension.sendRequest(data, function(data) {});
開發(fā)一個簡單Chrome擴展程序基本是沒有什么大問題的！我的體會呢弊仪，要是主要用于離線的呢熙卡，還是開發(fā)應(yīng)用好點，擴展程序也不是不可以励饵，否則數(shù)據(jù)存儲方面就使用js處理即可驳癌！
****價值源于技術(shù)，貢獻源于分享****
