1. 簡介
Chrome插件是一個(gè)用Web技術(shù)開發(fā)醋界、用來增強(qiáng)瀏覽器功能的軟件,Chrome瀏覽器擴(kuò)展開發(fā)算是相當(dāng)簡單的喉磁，基本只要掌握HTML+CSS+Javascript菩帝，即可快速開發(fā)一個(gè)屬于你的Chrome插件！它其實(shí)就是一個(gè)由HTML姐呐、CSS豁跑、JS廉涕、圖片等資源組成的一個(gè).crx后綴的壓縮包.
2. 學(xué)習(xí)Chrome插件開發(fā)有什么意義？
增強(qiáng)瀏覽器功能艇拍，輕松實(shí)現(xiàn)屬于自己的“定制版”瀏覽器狐蜕，等等。
Chrome插件提供了很多實(shí)用API供我們使用卸夕，包括但不限于：
- 書簽控制层释；
- 下載控制；
- 窗口控制快集；
- 標(biāo)簽控制贡羔；
- 網(wǎng)絡(luò)請求控制窄陡，
- 各類事件監(jiān)聽条摸；
- 自定義原生菜單；
- 完善的通信機(jī)制蓬网；
等等院溺；
4. 開發(fā)與調(diào)試
Chrome插件沒有嚴(yán)格的項(xiàng)目結(jié)構(gòu)要求楣嘁，只要保證本目錄有一個(gè)manifest.json即可，普通的web開發(fā)工具即可珍逸。
從右上角菜單->更多工具->擴(kuò)展程序可以進(jìn)入 插件管理頁面逐虚，也可以直接在地址欄輸入 chrome://extensions 訪問。
5. 核心介紹
manifest.json是一個(gè)Chrome插件最重要也是必不可少的文件弄息，用來配置所有和插件相關(guān)的配置痊班，必須放在根目錄勤婚。
下面給出的是一些常見的配置項(xiàng)摹量，均有中文注釋，完整的配置文檔請戳 這里 。
{
//必選
/*
指定您的應(yīng)用包要求的清單文件格式的版本缨称。從 Chrome 18 開始凝果，開發(fā)人員應(yīng)該指定 2
*/
"manifest_version": 2,
"name":"我的應(yīng)用名稱",
"version":"我的應(yīng)用版本",
//推薦
/*
清單文件-默認(rèn)語言 指定_locales中的子目錄，包含該應(yīng)用默認(rèn)字符串睦尽。
對于含有 _locales 目錄的應(yīng)用來說這一屬性是必需的器净，
在沒有 _locales 目錄的應(yīng)用中該屬性不能存在
*/
"default_locale":"en",
/*
這個(gè)描述在安裝應(yīng)用之后可以看見
*/
"description":"關(guān)于應(yīng)用的描述",
/*一個(gè)或多個(gè)代表應(yīng)用、應(yīng)用或主題背景的圖標(biāo)*/
"icons":{
"16":"icon16.png",
"48":"icon48.png"
},
/*
選擇某一個(gè)（或者無）
browser_action（瀏覽器按鈕）
page_action（頁面按鈕）
*/
// 如果有 browser_action, 即在 chrome toolbar 的右邊添加了一個(gè) icon
"browser_action": {
"default_icon": "advicedog.jpg",
"default_title": "Google Mail", // tooltip, 光標(biāo)停留在 icon 上時(shí)顯示
"default_popup": "popup.html" // 如果有 popup 的頁面, 則用戶點(diǎn)擊圖標(biāo)就會渲染此 HTML 頁面
},
// 如果并不是對每個(gè)網(wǎng)站頁面都需要使用插件, 可以使用 page_action(頁面按鈕） 而不是 browser_action（瀏覽器按鈕）
// browser_action 應(yīng)用更加廣泛
// 如果 page_action 并不應(yīng)用在當(dāng)前頁面, 會顯示灰色
"page_action":{
"default_icon": { // 可選
"19": "images/icon19.png", // 可選
"38": "images/icon38.png" // 可選
},
"default_title": "Google Mail", // 可選当凡，在工具提示中顯示
"default_popup": "popup.html" // 可選
},
//可選
"author":"開發(fā)者",
"automation":"",
/*
后臺網(wǎng)頁
1.應(yīng)用通常需要有一個(gè)長時(shí)間運(yùn)行的腳本來管理一些任務(wù)或狀態(tài)山害，而后臺網(wǎng)頁就是為這一目的而設(shè)立。
通常情況下沿量，后臺頁面不需要任何 HTML 標(biāo)記浪慌，這種情況下后臺頁面可以單獨(dú)使用 JavaScript文件實(shí)現(xiàn)。
后臺頁面將由應(yīng)用系統(tǒng)生成朴则，包含 scripts 屬性中列出的每一個(gè)文件权纤。
2.page：如果您需要在您的后臺頁面中指定 HTML，您可以改用 page 屬性：
3.persistent：應(yīng)用和應(yīng)用通常需要長時(shí)間運(yùn)行的腳本來管理某些任務(wù)或狀態(tài)乌妒，這就是事件頁面的作用汹想。
事件頁面只在需要時(shí)加載，當(dāng)事件頁面不活動時(shí)就會卸載撤蚊，以便釋放內(nèi)存和其他系統(tǒng)資源古掏。
如何得到事件頁面 就是設(shè)置一個(gè)"persistent"鍵，如果沒有設(shè)置拴魄，你將得到一個(gè)普通的后臺頁面冗茸。
*/
"background":{
"scripts":["background.js"],
"page": "background.html",
"persistent":false
},
/*
內(nèi)容腳本:其實(shí)就是向你想要的網(wǎng)頁中插入一個(gè)腳本代碼，執(zhí)行你想要做的事情
內(nèi)容腳本是在網(wǎng)頁的上下文中運(yùn)行的 JavaScript 文件匹中，
它們可以通過標(biāo)準(zhǔn)的文檔對象模型（DOM）來獲取瀏覽器訪問的網(wǎng)頁詳情夏漱，或者作出更改。
1.run_at 可選顶捷。
控制 js 中的 JavaScript 文件何時(shí)插入挂绰，
可以為 "document_start"、
"document_end" 或 "document_idle"服赎，默認(rèn)為 "document_idle"葵蒂。
1.1如果是 "document_start"，這些文件將在 css 中指定的文件之后重虑，但是在所有其他 DOM 構(gòu)造或腳本運(yùn)行之前插入践付。
1.2.如果是 "document_end"，文件將在 DOM 完成之后立即插入缺厉，但是在加載子資源（如圖像與框架）之前插入永高。
1.3.如果是 "document_idle"隧土，瀏覽器將在 "document_end" 和剛發(fā)生 window.onload 事件這兩個(gè)時(shí)刻之間選擇合適的時(shí)候插入，
具體的插入時(shí)間取決于文檔的復(fù)雜程度以及加載文檔所花的時(shí)間命爬，并且瀏覽器會盡可能地為加快頁面加載速度而優(yōu)化曹傀。
2.all_frames 可選。
控制內(nèi)容腳本運(yùn)行在匹配頁面的所有框架中還是僅在頂層框架中饲宛。 默認(rèn)為 false皆愉，意味著僅在頂層框架中運(yùn)行
content_scripts還有一些其他不是很常用的屬性
*/
"content_scripts": [{
"matches": ["https://*.pingan.com.cn/*"], //匹配的地址網(wǎng)頁
"exclude_matches":[],
"js": ["jquery.js","ideacome.js"], //插入的js
"css": ["mystyles.css"], //css改變樣式
"run_at":"document_idle",
"all_frames": true //該匹配下面的所有窗口
},{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"] //可以針對不同的規(guī)則插入不同的內(nèi)容
}],
// 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
"web_accessible_resources": [
"images/*.png",
"style/double-rainbow.css",
"script/double-rainbow.js",
"script/main.js",
"templates/*"
],
/**
如果不是通過 chrome web store 自動更新插件
我們希望擴(kuò)展能自動升級艇抠，理由和讓chrome自動升級一樣：修改程序bug和安全漏洞 幕庐，增加新功能，提升性能家淤，改善體驗(yàn)翔脱。
一個(gè)擴(kuò)展的manifest文件里面必須指定一個(gè)"update_url"來執(zhí)行升級檢測。
擴(kuò)展可以托管在Chrome Web Store媒鼓，也可以發(fā)布到極速瀏覽器應(yīng)用開放平臺上届吁。
如果托管在Chrome Web Store則update_url應(yīng)該是：http://clients2.google.com/service/update2/crx
**/
"update_url": "https://clients2.google.com/service/update2/crx",
// 插件主頁，這個(gè)很重要绿鸣，不要浪費(fèi)了這個(gè)免費(fèi)廣告位
"homepage_url": "https://www.baidu.com",
/*
擴(kuò)展或app將使用的一組權(quán)限疚沐。每個(gè)權(quán)限是一列已知字符串列表中的一個(gè)，
如geolocatioin或者一個(gè)匹配模式潮模，來指定可以訪問的一個(gè)或者多個(gè)主機(jī)亮蛔。
權(quán)限可以幫助限定危險(xiǎn)，如果你的擴(kuò)展或者app被攻擊擎厢。
一些權(quán)限在安裝之前究流，會告知用戶
*/
"permissions":[
"tabs", //Required if the extension uses the chrome.tabs or chrome.windows module.
"bookmarks", //使用chrome.bookmarks模塊來創(chuàng)建、組織和管理書簽
"http://www.blogger.com/",
"http://*.google.com/",
"unlimitedStorage", //提供了一個(gè)無限的HTML5配額來存儲客戶端數(shù)據(jù),如數(shù)據(jù)庫和本地存儲文件动遭。沒有這個(gè)權(quán)限,擴(kuò)展僅限于5 MB的本地存儲
"history" //歷史記錄的使用權(quán)限 chrome.history
"notifications",//提示
"cookies",//Required if the extension uses the chrome.cookies module.
],
/**開發(fā)時(shí)為擴(kuò)展指定的唯一標(biāo)識值芬探。
注意：通常您并不需要直接使用這個(gè)值，而是在您的代碼中使用相對路徑或者chrome.extension.getURL()得到的絕對路徑厘惦。
這個(gè)值并不是開發(fā)時(shí)顯式指定的偷仿，而是Chrome在安裝.crx時(shí)輔助生成的。(開發(fā)時(shí)可以通過上傳擴(kuò)展或者手工打包生成crx文件)宵蕉。 安裝完crx酝静，在Chrome的用戶數(shù)據(jù)目錄下的Default/Extensions/<extensionId>/<versionString>/manifest.json文件中，您可以看到這個(gè)擴(kuò)展的key羡玛。**/
key:'',
"commands": {
// commands API 用來添加快捷鍵
// 需要在 background page 上添加監(jiān)聽器綁定 handler
"toggle-feature-foo": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y"
},
"description": "Toggle feature foo",
"global": true
// 當(dāng) chrome 沒有 focus 時(shí)也可以生效的快捷鍵
// 僅限 Ctrl+Shift+[0..9]
},
"_execute_browser_action": {
"suggested_key": {
"windows": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y",
"chromeos": "Ctrl+Shift+U",
"linux": "Ctrl+Shift+J"
}
},
"_execute_page_action": {
"suggested_key": {
"default": "Ctrl+Shift+E",
"windows": "Alt+Shift+P",
"mac": "Alt+Shift+P"
}
},
...
},
"content_capabilities": ...,
"optional_permissions": ["tabs"], // 其他需要的 permission, 在使用 chrome.permissions API 時(shí)用到, 并非安裝插件時(shí)需要
"short_name": "Short Name", // 插件名字簡寫
"storage": {
"managed_schema": "schema.json"
}, // 使用 storage.managed api 的話, 需要一個(gè) schema 文件指定存儲字段類型等, 類似定義數(shù)據(jù)庫表的 column
......
//還有很多其他的配置
}
5.1 content-scripts
所謂content-scripts别智，其實(shí)就是Chrome插件中向頁面注入腳本的一種形式（雖然名為script，其實(shí)還可以包括css的）稼稿，借助content-scripts我們可以實(shí)現(xiàn)通過配置的方式輕松向指定頁面注入JS和CSS薄榛，最常見的比如：廣告屏蔽浓若、頁面CSS定制，等等蛇数。
content-scripts和原始頁面共享DOM，但是不共享JS是越，如要訪問頁面JS（例如某個(gè)JS變量）耳舅，只能通過injected js來實(shí)現(xiàn)。content-scripts不能訪問絕大部分chrome.xxx.api倚评，除了下面這4種：
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
這些API絕大部分時(shí)候都夠用了浦徊，非要調(diào)用其它API的話，你還可以通過通信來實(shí)現(xiàn)讓background來幫你調(diào)用天梧。
5.2 background
后臺y頁面盔性，這是一個(gè)常駐的頁面，它的生命周期是插件中所有類型頁面中最長的呢岗，它隨著瀏覽器的打開而打開冕香，隨著瀏覽器的關(guān)閉而關(guān)閉，所以通常把需要一直運(yùn)行的后豫、啟動就運(yùn)行的悉尾、全局的代碼放在background里面。
background的權(quán)限非常高挫酿，幾乎可以調(diào)用所有的Chrome擴(kuò)展API（除了devtools）构眯，而且它可以無限制跨域，也就是可以跨域訪問任何網(wǎng)站而無需要求對方設(shè)置CORS早龟。
經(jīng)過測試惫霸，其實(shí)不止是background，所有的直接通過chrome-extension://id/xx.html這種方式打開的網(wǎng)頁都可以無限制跨域葱弟。
配置中壹店，background可以通過page指定一張網(wǎng)頁，也可以通過scripts直接指定一個(gè)JS芝加，Chrome會自動為這個(gè)JS生成一個(gè)默認(rèn)的網(wǎng)頁：
{
// 會一直常駐的后臺JS或后臺頁面
"background":
{
// 2種指定方式茫打，如果指定JS，那么會自動生成一個(gè)背景頁
"page": "background.html"
//"scripts": ["js/background.js"]
},
}
#######5.3 event-pages
這里順帶介紹一下event-pages妖混，它是一個(gè)什么東西呢老赤？鑒于background生命周期太長，長時(shí)間掛載后臺可能會影響性能制市，所以Google又弄一個(gè)event-pages抬旺，在配置文件上，它與background的唯一區(qū)別就是多了一個(gè)persistent參數(shù)：
{
"background":
{
"scripts": ["event-page.js"],
"persistent": false
},
}
它的生命周期是：在被需要時(shí)加載祥楣，在空閑時(shí)被關(guān)閉开财，什么叫被需要時(shí)呢汉柒？比如第一次安裝、插件更新责鳍、有content-script向它發(fā)送消息碾褂，等等。
5.4 popup
popup是點(diǎn)擊browser_action或者page_action圖標(biāo)時(shí)打開的一個(gè)小窗口網(wǎng)頁历葛，焦點(diǎn)離開網(wǎng)頁就立即關(guān)閉正塌，一般用來做一些臨時(shí)性的交互。
popup可以包含任意你想要的HTML內(nèi)容恤溶，并且會自適應(yīng)大小乓诽。可以通過default_popup字段來指定popup頁面咒程，也可以調(diào)用setPopup()方法鸠天。
需要特別注意的是，由于單擊圖標(biāo)打開popup帐姻，焦點(diǎn)離開又立即關(guān)閉稠集，所以popup頁面的生命周期一般很短，需要長時(shí)間運(yùn)行的代碼千萬不要寫在popup里面饥瓷。
在權(quán)限上巍杈，它和background非常類似，它們之間最大的不同是生命周期的不同扛伍，popup中可以直接通過chrome.extension.getBackgroundPage()獲取background的window對象筷畦。
5.5 homepage_url
開發(fā)者或者插件主頁設(shè)置
5.6 injected-script
指的是通過DOM操作的方式向頁面注入的一種JS。為什么需要通過這種方式注入JS呢刺洒？
這是因?yàn)閏ontent-script有一個(gè)很大的“缺陷”鳖宾，也就是無法訪問頁面中的JS，雖然它可以操作DOM逆航，但是DOM卻不能調(diào)用它鼎文，也就是無法在DOM中通過綁定事件的方式調(diào)用content-script中的代碼（包括直接寫onclick和addEventListener2種方式都不行），但是因俐，“在頁面上添加一個(gè)按鈕并調(diào)用插件的擴(kuò)展API”是一個(gè)很常見的需求拇惋，那該怎么辦呢？其實(shí)這就是本小節(jié)要講的抹剩。
在content-script中通過DOM方式向頁面注入inject-script代碼示例：
// 向頁面注入JS
function injectCustomJs(jsPath)
{
jsPath = jsPath || 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 獲得的地址類似：chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function()
{
// 放在頁面不好看撑帖，執(zhí)行完后移除掉
this.parentNode.removeChild(this);
};
document.head.appendChild(temp);
}
manifest.json
{
// 普通頁面能夠直接訪問的插件資源列表，如果不設(shè)置是無法直接訪問的
"web_accessible_resources": ["js/inject.js"],
}
6. Chrome插件的7種展示形式
6.1 browserAction(瀏覽器右上角)
通過配置browser_action可以在瀏覽器的右上角增加一個(gè)圖標(biāo)澳眷，一個(gè)browser_action可以擁有一個(gè)圖標(biāo)胡嘿，一個(gè)tooltip(即劃過顯示title)，一個(gè)badge(圖標(biāo)上面的文字钳踊，有字?jǐn)?shù)限制）和一個(gè)popup衷敌。
6.2 pageAction(地址欄右側(cè))
pageAction和普通的browserAction一樣也是放在瀏覽器右上角缴罗，也可以說地址欄的右側(cè)更為準(zhǔn)確助琐。只不過沒有點(diǎn)亮?xí)r是灰色的，點(diǎn)亮了才是彩色的面氓，灰色時(shí)無論左鍵還是右鍵單擊都是彈出選項(xiàng)：
// manifest.json
{
"name": "測試",
"description": "........",
"version": "1.0",
"permissions": [
"declarativeContent"
],
"background":{
"scripts":["background.js"]
},
"page_action": {
"default_icon": "icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},
"manifest_version": 2
}
// background.js
chrome.runtime.onInstalled.addListener(function(){
chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
// 只有打開百度才顯示pageAction
new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}
]);
});
});
6.3 右鍵菜單（api地址）
通過開發(fā)Chrome插件可以自定義瀏覽器的右鍵菜單兵钮，主要是通過chrome.contextMenusAPI實(shí)現(xiàn)，右鍵菜單可以出現(xiàn)在不同的上下文侧但，比如普通頁面、選中的文字航罗、圖片禀横、鏈接，等等
//manifest.json
"permissions": [
"declarativeContent",
"contextMenus",
"tabs"
],
"background":{
"scripts":["background.js"]
},
//background.js
//可以右鍵看看
chrome.contextMenus.create({
title: "測試右鍵菜單",
onclick: function(){alert('您點(diǎn)擊了右鍵菜單粥血！');}
});
//選擇某些文字才出現(xiàn)這個(gè)右鍵菜單
chrome.contextMenus.create({
title: '使用度娘搜索：%s', // %s表示選中的文字
contexts: ['selection'], // 只有當(dāng)選中文字時(shí)才會出現(xiàn)此右鍵菜單
onclick: function(params)
{
// 注意不能使用location.href柏锄，因?yàn)閘ocation是屬于background的window對象
chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
}
});
6.3.2 右鍵菜單一些基本的api
hrome.contextMenus.create({
type: 'normal'， // 類型复亏，可選：["normal", "checkbox", "radio", "separator"]趾娃，默認(rèn) normal
title: '菜單的名字', // 顯示的文字，除非為“separator”類型否則此參數(shù)必需缔御，如果類型為“selection”抬闷，可以使用%s顯示選定的文本
contexts: ['page'], // 上下文環(huán)境，可選：["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"]耕突，默認(rèn)page
onclick: function(){}, // 單擊時(shí)觸發(fā)的方法
parentId: 1, // 右鍵菜單項(xiàng)的父菜單項(xiàng)ID笤成。指定父菜單項(xiàng)將會使此菜單項(xiàng)成為父菜單項(xiàng)的子菜單
documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些頁面顯示此右鍵菜單
});
// 刪除某一個(gè)菜單項(xiàng)
chrome.contextMenus.remove(menuItemId)；
// 刪除所有自定義右鍵菜單
chrome.contextMenus.removeAll();
// 更新某一個(gè)菜單項(xiàng)
chrome.contextMenus.update(menuItemId, updateProperties);
6.4. override(覆蓋特定頁面)
使用override頁可以將Chrome默認(rèn)的一些特定頁面替換掉眷茁，改為使用擴(kuò)展提供的頁面炕泳。
//一個(gè)擴(kuò)展只能替代一個(gè)頁面；
"chrome_url_overrides":
{
"newtab": "newtab.html"
"history": "history.html",
"bookmarks": "bookmarks.html"
}
6.5 option(選項(xiàng)頁)
為了讓用戶自定義您的應(yīng)用的行為上祈，您可能會提供一個(gè)選項(xiàng)頁面培遵。
所謂選項(xiàng)(options)頁，就是插件的設(shè)置頁面登刺，有2個(gè)入口籽腕，一個(gè)是右鍵圖標(biāo)有一個(gè)“選項(xiàng)”菜單，還有一個(gè)在插件管理頁面：
//manifest.json
//Chrome40以前的插件配置頁寫法
"options_page":"xx.html",
//Chrome40以后的插件配置頁寫法纸俭，只是樣式不一樣了节仿，以彈出框的形式顯示
"options_ui":
{
"page": "options.html",
// 添加一些默認(rèn)的樣式，推薦使用
"chrome_style": true
},
//為了兼容掉蔬，建議2種都寫廊宪，如果都寫了矾瘾，Chrome40以后會默認(rèn)讀取新版的方式；
頁面內(nèi)容看你自己發(fā)揮了箭启。這邊有一個(gè)示例可以看看
6.6 omnibox
omnibox是向用戶提供搜索建議的一種方式壕翩。具體看api
6.7 桌面通知
Chrome提供了一個(gè)chrome.notificationsAPI以便插件推送桌面通知，暫未找到chrome.notifications和HTML5自帶的Notification的顯著區(qū)別及優(yōu)勢傅寡。
在后臺JS中放妈，無論是使用chrome.notifications還是Notification都不需要申請權(quán)限（HTML5方式需要申請權(quán)限），直接使用即可荐操。
"permissions": [
"notifications"
],
chrome.contextMenus.create({
title: "測試右鍵菜單",
onclick: function(){
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'icon.png',
title: '這是標(biāo)題',
message: '您剛才點(diǎn)擊了自定義右鍵菜單芜抒！'
});
}
});
實(shí)戰(zhàn)1：（platform項(xiàng)目險(xiǎn)企報(bào)價(jià)）
為了實(shí)現(xiàn)險(xiǎn)企賬號的管理，使得出單人員在各個(gè)險(xiǎn)企報(bào)價(jià)時(shí)托启，不需要自己記錄管理險(xiǎn)企的登錄地址宅倒，以后手動輸入賬號密碼。
或者在報(bào)價(jià)頁面插入一些已知的報(bào)價(jià)填寫信息屯耸。
文件目錄
-
manifest.json清單文件
具體配置：
-
popup.html：根據(jù)上面的描述我們知道拐迁，這是點(diǎn)擊瀏覽器按鈕會彈出顯示。 -
icon.png：browser_action里面配置的icon顯示圖標(biāo) -
ideacome.js: 除了本腳本之外疗绣，其他的腳本都是依賴线召。
在這個(gè)腳本里面我們可以訪問其插入的頁面的dom元素，cookie,localStorage,發(fā)送ajax請求等等操作多矮。來完成我們想要的效果缓淹。
完成上面的工作，我們?nèi)绾问棺约旱拇a轉(zhuǎn)換成一個(gè)可在ChromeL瀏覽器里面安裝擴(kuò)展程序呢塔逃？
接下來我們需要對我們編寫的文件進(jìn)行打包割卖。應(yīng)用打包為已簽名的 ZIP 文件，文件擴(kuò)展名為“crx”患雏，如：myextension.crx鹏溯。
當(dāng)您為應(yīng)用打包時(shí)，應(yīng)用將獲得唯一的密鑰對淹仑，應(yīng)用的標(biāo)識符基于公鑰的散列丙挽，私有密鑰用來為每一個(gè)版本的應(yīng)用簽名，必須嚴(yán)格保護(hù)匀借，不能由公眾訪問颜阐。注意千萬不要將您的私有密鑰包含在應(yīng)用中！
打包步驟：
- 進(jìn)入以下URL吓肋，打開應(yīng)用管理頁面：
chrome://extensions - 確保右上角的開發(fā)者模式復(fù)選框已選中凳怨。
- 單擊打包應(yīng)用按鈕，出現(xiàn)一個(gè)對話框。
- 在應(yīng)用根目錄字段中肤舞，指定應(yīng)用所在文件夾的路徑紫新，例如，C:\myext李剖。（忽略其他字段芒率，您第一次為一個(gè)應(yīng)用打包時(shí)不需要指定私有密鑰文件。）
- 單擊打包應(yīng)用篙顺。打包程序?qū)?chuàng)建兩個(gè)文件：一個(gè) .crx 文件偶芍，是實(shí)際的可安裝的應(yīng)用；另一個(gè)是 .pem 文件德玫，包含私有密鑰匪蟀。
安裝圖片：
不要丟失私有密鑰！確保 .pem 文件保密宰僧，并存放在安全的地方材彪。如果您今后需要做如下事情，您需要這一文件：
- 更新應(yīng)用： 更新應(yīng)用與安裝步驟一樣撒桨。不同的是此時(shí)密鑰已經(jīng)存在查刻。
學(xué)習(xí)參考文件
