chrome插件編寫基本入門
作為一名程序猿，怎么能不會寫chrome插件呢[笑]
所以今天就教教大家怎么寫最基本的chrome插件，不對，確切地說是互相學習一起學習。
（我是不會告訴你說我也是剛學會沒多久的！）
基礎知識：
首先，我們要知道一個 chrome插件需要哪些文件
其實很簡單
- 配置（入口）文件 manifest.json
- xx.html
- xx.css
- xx.js
- 圖片
這就OK了，如果再看這篇文章的你 是一位前端攻城獅、程序猿，那么恭喜你，你的學習難度會很小分分鍾的事情，很容易就能學會（當然我指的是基礎，最基本的寫法）
由於 html、css、js 及文件組織，跟普通的 web 開發一樣，那寫 Chrome 擴展主要就是 manifest 文件的編寫和擴展的調試了
manifest.json
-
基本屬性
包括擴展的名稱（name）、版本（version）、描述（description）、圖標位置（icons）和 manifest 版本（manifestversion）等信息。
name、version 和 manifestversion 是必須的，而且 manifest_version 必須為 2（別問我為啥是2，我也不知道）
舉個栗子：
{ //這是必須的 "name": "coding冒泡點贊狂魔", "manifest_version": 2, "version": "1.0", //這是可選的 "description": "coding點贊腳本" }Markup -
browser_action
browseraction指定擴展的圖標放在Chrome工具欄中，它定義了擴展圖標文件位置（defaulticon）、懸浮提示（defaulttitle）和點擊擴展圖標所顯示的頁面位置（defaultpopup）
用 browser actions 可以在chrome主工具條的地址欄右側增加一個圖標。作為這個圖標的延展，一個browser action圖標還可以有tooltip、badge和popup。
如果你想創建一個不總是可見的圖標, 可以使用page action來代替browser action.舉個栗子
{ ... "browser_action": { "default_icon": "1.png", "default_title": "我是點贊狂魔", "default_popup": "popup.html" }, ...Markup}
-
permissions
這個牛逼了，比較重要的permissions 屬性是一個數組，它定義了擴展需要向 Chrome 申請的權限，比如通過 XMLHttpRequest 跨域請求數據、訪問瀏覽器選項卡（tabs）、獲取當前活動選項卡（activeTab）、瀏覽器通知（notifications）、存儲（storage）等，可以根據需要添加。
擴展或app將使用的一組權限。每個權限是一列已知字符串列表中的一個，如geolocatioin或者一個匹配模式，來指定可以訪問的一個或者多個主機。權限可以幫助限定危險，如果你的擴展或者app被攻擊。一些權限在安裝之前，會告知用戶
如果一個擴展api需要你的聲明一個權限在manifest文件，一般的，api的文檔將告訴怎么做。例如，Tabs頁面告訴你這么聲明一個tabs權限。
這是一個擴展的manifest文件的權限設置的一部分。舉個栗子
{ ... "permissions": [ "tabs", "bookmarks", "http://www.blogger.com/", "http://*.google.com/", "unlimitedStorage", ... ], ... }Markup -
background
擴展常常用一個單獨的長時間運行的腳本來管理一些任務或者狀態。
background 可以使擴展常駐后台，比較常用的是指定子屬性 scripts，表示在擴展啟動時自動創建一個包含所有指定腳本的頁面。舉個栗子
{ ... "background": { "scripts": ["myscript.js"] }, ... } -
content_scripts
Content scripts是在Web頁面內運行的javascript腳本。通過使用標准的DOM，它們可以獲取瀏覽器所訪問頁面的詳細信息，並可以修改這些信息。
舉個栗子
{ ... "content_scripts": [ { "matches": ["https://coding.net/*"], // 這是必須項 "js": ["jquery.min.js"], // 這是可選 "css": ["xx.css"]， // 這是可選 ... } ] ... }使用 contentscripts 字段，一個擴展可以向一個頁面注入多個contentscript腳本；每個content script腳本可以包括多個javascript腳本和css文件。
簡單的說content_scripts會根據你在它內部定義的 matches規則 去匹配url，然后在匹配成功的url頁面中注入 你指定的js和css等
好了， 學會這些之后，你就能做一個簡單的 chrome插件了，有一點要注意content scripts是打開頁面后直接注入你可以不需要background和permissions，而如果你想點擊你的插件圖標再執行注入的話你就必須使用background和permissions 將代碼注入頁面，擴展必須具有cross-origin 權限， 還必須可以使用chrome.tabs模塊。 可以通過在manifest文件的permissions字段里聲明來取得這些權限。一旦設置好了權限，就可以通過調用executeScript()來注入javascript腳本。如果要注入css，可以調用insertCSS()。
舉個栗子
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{code:"document.body.bgColor='red'"}); });
這樣 你就可以點擊圖標之后把對應網頁的背景色變成紅色
然而，有時候我們的代碼可能會比較多，直接寫在executeScript()中不美觀，那么我們就可以新建一個文件
舉個栗子
/* action.js */ document.body.bgColor='red'; alert('已改變背景色');
/* main.js */ chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"action.js"}); });
總結
最后我們來總結一下上面所學習的部分，把所有代碼整合到一起，就拿我的一個簡單的基本插件為例：
目錄結構：
---- 插件文件夾
-------- manifest.json
-------- jquery.min.js
-------- like.js
-------- myscript.js
-
manifest.js
{ "name": "coding冒泡點贊狂魔", "manifest_version": 2, "version": "1.0", "description": "coding點贊腳本", "browser_action": { "default_icon": "1.png" "default_title": "我是點贊狂魔" }, "permissions": [ "tabs", "https://coding.net/*" ], "background": { "scripts": ["myscript.js"] }, "content_scripts": [ { "matches": ["https://coding.net/*"], "js": ["jquery.min.js"] } ] }
-
myscript.js
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.executeScript(null,{file:"like.js"}); });
-
like.js
jQuery('.heart.icon.empty').click(); console.log('已點贊'); console.log(jQuery('.heart.icon.empty').click()); alert('已點贊 '+ jQuery('.heart.icon.empty').click().length + '條');