摘要：相當(dāng)于發(fā)一個(gè)命令。這個(gè)函數(shù)能獲取到當(dāng)前標(biāo)簽的信息對(duì)象并傳遞給回調(diào)函數(shù)。向標(biāo)簽頁(yè)中的發(fā)送消息。接收到消息，執(zhí)行操作。會(huì)彈出一個(gè)控制臺(tái)。這樣我們就完成了一個(gè)簡(jiǎn)單的插件。

最近突然覺(jué)得有些常用的功能可以寫(xiě)成瀏覽器插件，就不用把代碼放到console控制臺(tái)運(yùn)行了。只要點(diǎn)擊插件圖標(biāo)就可以自動(dòng)運(yùn)行。會(huì)方便很多。就去查了下chrome插件開(kāi)發(fā)教程。本質(zhì)上講，chrome插件就是以一些特殊的方式運(yùn)行一些特定的html,css,JavaScript代碼，前端同學(xué)們學(xué)起來(lái)還是很容易的。

比較好的中文的參考資料：
1.360翻譯的文檔：http://open.chrome.#/ext...
2.Chrome擴(kuò)展及應(yīng)用開(kāi)發(fā)：http://www.ituring.com.cn/min...

我們做一個(gè)簡(jiǎn)單的插件：實(shí)現(xiàn)點(diǎn)擊插件圖標(biāo)可以給頁(yè)面上所有的a標(biāo)簽加上一個(gè)target="_blank"，讓點(diǎn)所有鏈接都在新頁(yè)面打開(kāi)。
我們開(kāi)發(fā)的應(yīng)用這樣使用：

1.建立一個(gè)文件夾。a chrome plugin。
2.新建配置文件　manifest.json。前端同學(xué)們對(duì)于這樣的配置文件一定不陌生。
里同包含了版本號(hào)，插件名稱，默認(rèn)頁(yè)面，content_scripts，permissions等基本信息。
這個(gè)文件能將我們插件中的的js，css,JavaScript文件組織起來(lái)。
具體每個(gè)參數(shù)的含義見(jiàn)文檔：http://open.chrome.#/ext...
代碼：

{
    "manifest_version": 2,
    "name": "A",
    "version": "1.0",
    "description": "新標(biāo)簽打開(kāi)鏈接",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "content_scripts":[
        {
            "matches": ["http://*/*","https://*/*"],
            "js": ["back.js"],
            "run_at":"document_end"
        }
    ],
    "permissions": [
        "tabs"
    ]
}

3.建立文件。popup.html。
對(duì)應(yīng)配置文件中的 "default_popup": "popup.html"。

點(diǎn)圖標(biāo)的時(shí)候我們會(huì)加載運(yùn)行這個(gè)html，運(yùn)行這個(gè)html引入的js。
這是一個(gè)普通的html頁(yè)面。里面可以寫(xiě)css。也可以加載JavaScript文件。也可以給里面的節(jié)點(diǎn)添加事件什么的。
不過(guò)這個(gè)文件以及加載的js無(wú)法訪問(wèn)當(dāng)前我們打開(kāi)的標(biāo)簽頁(yè)中的dom節(jié)點(diǎn)。
代碼：

    


    這是popup.html里面。

這里只用來(lái)加載一個(gè)js。

4.popup.js?！opup.html引入的js。這里我們用戶它的做的事是向content_scripts中發(fā)送一個(gè)消息。相當(dāng)于發(fā)一個(gè)命令。告訴content script，去辦事吧。content_scripts的內(nèi)容在后面，看完再回過(guò)來(lái)看一次這里。

    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {greeting: "hello"}, function(response) {
            // console.log(response.farewell);
        });
    });

chrome.tabs.getSelected()這個(gè)函數(shù)能獲取到當(dāng)前標(biāo)簽的信息對(duì)象并傳遞給回調(diào)函數(shù)。　
獲取到tabId就是tab.id?？梢宰约篶onsole.log(tab)出來(lái)看一下。文章后面有對(duì)應(yīng)調(diào)試控制臺(tái)的打開(kāi)方式。tab相關(guān)的接口可以查看：http://open.chrome.#/ext...　很多接口都要用到這個(gè)參數(shù)：tabId ( integer )，其實(shí)就是用這個(gè)接口拿到tabId。

chrome.tabs.sendRequest()這個(gè)函數(shù)是向某個(gè)標(biāo)簽的content_script中發(fā)送一個(gè)消息。也需要tabId這個(gè)參數(shù)。chrome插件之間的通信接口可查看 ：http://open.chrome.#/ext...

5.back.js。也是我們這個(gè)插件中的content script。
這個(gè)文件是我們插入到當(dāng)前標(biāo)簽頁(yè)中運(yùn)行的代碼。它可以訪問(wèn)標(biāo)簽頁(yè)面中的dom節(jié)點(diǎn)。
我們這里用它來(lái)是監(jiān)聽(tīng)消息，消息來(lái)了就運(yùn)行設(shè)置標(biāo)簽的函數(shù)。操作標(biāo)簽頁(yè)中的dom節(jié)點(diǎn)。

對(duì)應(yīng)配置文件中content_scripts下的back.js。
這個(gè)參數(shù)中的內(nèi)容會(huì)被加載到當(dāng)前打開(kāi)的網(wǎng)頁(yè)中，可以訪問(wèn)當(dāng)前標(biāo)簽頁(yè)的節(jié)點(diǎn)。
所以，我們對(duì)頁(yè)面的操作往往會(huì)寫(xiě)在這個(gè)腳本里。有需要的話甚至可以加載個(gè)jQuery到里面。
但是這里的JavaScript與網(wǎng)頁(yè)上原本的JavaScript不是一個(gè)環(huán)境下運(yùn)行。具體區(qū)別可以自己去看開(kāi)發(fā)文檔。http://open.chrome.#/ext...
代碼：

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({});
          }
      }
      );

可能比較要注意的一點(diǎn)是popup.html與content_script之間的通信。
popup.html向標(biāo)簽頁(yè)中的content_script發(fā)送消息。
content_script接收到消息，執(zhí)行操作。

6.調(diào)試方式：
popup.html加載的js調(diào)試。
右鍵點(diǎn)擊插件圖標(biāo)，選擇審查彈出內(nèi)容。（或者在彈出框里右鍵點(diǎn)擊檢查。）會(huì)彈出一個(gè)控制臺(tái)。
點(diǎn)source可以看到我們的html和js資源。

content_script的調(diào)試：
打開(kāi)頁(yè)面控制臺(tái)，點(diǎn)sources，然后點(diǎn)Contents scripts，可以看到瀏覽器插件會(huì)作用到頁(yè)面的代碼。

注意每次修改了代碼要重新加載插件。

這樣我們就完成了一個(gè)簡(jiǎn)單的chrome插件。

github:https://github.com/liusaint/J...
本文同步發(fā)表在我的csdn博客上：http://blog.csdn.net/liusaint...