最近突然覺得有些常用的功能可以寫成瀏覽器插件，就不用把代碼放到console控制檯運行了。只要點擊插件圖標就可以自動運行。會方便很多。就去查了下chrome插件開發教程。本質上講，chrome插件就是以一些特殊的方式運行一些特定的html,css,JavaScript代碼，前端同學們學起來還是很容易的。
比較好的中文的參考資料：
2.Chrome擴展及應用開發：http://www.ituring.com.cn/minibook/950
我們做一個簡單的插件：實現點擊插件圖標可以給頁面上所有的a標籤加上一個target="_blank"，讓點所有鏈接都在新頁面打開。
我們開發的應用這樣使用：
1.建立一個文件夾。a chrome plugin。
2.新建配置文件 manifest.json。前端同學們對於這樣的配置文件一定不陌生。
裏同包含了版本號，插件名稱，默認頁面，content_scripts，permissions等基本信息。
這個文件能將我們插件中的的js，css,JavaScript文件組織起來。
代碼：
{
"manifest_version": 2,
"name": "A",
"version": "1.0",
"description": "新標籤打開鏈接",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts":[
{
"matches": ["http://*/*","https://*/*"],
"js": ["back.js"],
"run_at":"document_end"
}
],
"permissions": [
"tabs"
]
}3.建立文件。popup.html。
對應配置文件中的 "default_popup": "popup.html"。
點圖標的時候我們會加載運行這個html，運行這個html引入的js。
這是一個普通的html頁面。裏面可以寫css。也可以加載JavaScript文件。也可以給裏面的節點添加事件什麼的。
不過這個文件以及加載的js無法訪問當前我們打開的標籤頁中的dom節點。
代碼：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
這是popup.html裏面。
</body>
</html>
<script src="popup.js"></script>
這裏只用來加載一個js。
4.popup.js。 popup.html引入的js。這裏我們用戶它的做的事是向content_scripts中發送一個消息。相當於發一個命令。告訴content script，去辦事吧。content_scripts的內容在後面，看完再回過來看一次這裏。
chrome.tabs.getSelected(null, function(tab) {
chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
// console.log(response.farewell);
});
});chrome.tabs.getSelected()這個函數能獲取到當前標籤的信息對象並傳遞給回調函數。
獲取到tabId就是tab.id。可以自己console.log(tab)出來看一下。文章後面有對應調試控制檯的打開方式。tab相關的接口可以查看：http://open.chrome.360.cn/extension_dev/tabs.html 很多接口都要用到這個參數：tabId ( integer )，其實就是用這個接口拿到tabId。
chrome.tabs.sendRequest()這個函數是向某個標籤的content_script中發送一個消息。也需要tabId這個參數。chrome插件之間的通信接口可查看 ：http://open.chrome.360.cn/extension_dev/messaging.html
5.back.js。也是我們這個插件中的content script。
這個文件是我們插入到當前標籤頁中運行的代碼。它可以訪問標籤頁面中的dom節點。
我們這裏用它來是監聽消息，消息來了就運行設置標籤的函數。操作標籤頁中的dom節點。
對應配置文件中content_scripts下的back.js。
這個參數中的內容會被加載到當前打開的網頁中，可以訪問當前標籤頁的節點。
所以，我們對頁面的操作往往會寫在這個腳本里。有需要的話甚至可以加載個jQuery到裏面。
但是這裏的JavaScript與網頁上原本的JavaScript不是一個環境下運行。具體區別可以自己去看開發文檔。http://open.chrome.360.cn/extension_dev/content_scripts.html
代碼：
function setA(){
var aDoms = document.getElementsByTagName('a');
var len = aDoms.length;
for (var i = 0; i < len; i++) {
aDoms[i].setAttribute("target","_blank")
}
}
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "hello"){
setA();
// sendResponse({farewell: "goodbye"});
}else{
// sendResponse({});
}
}
);可能比較要注意的一點是popup.html與content_script之間的通信。
popup.html向標籤頁中的content_script發送消息。
content_script接收到消息，執行操作。
6.調試方式：
popup.html加載的js調試。
右鍵點擊插件圖標，選擇審查彈出內容。（或者在彈出框裏右鍵點擊檢查。）會彈出一個控制檯。
點source可以看到我們的html和js資源。
content_script的調試：
打開頁面控制檯，點sources，然後點Contents scripts，可以看到瀏覽器插件會作用到頁面的代碼。
這樣我們就完成了一個簡單的chrome插件。
