chrome插件開發

前言：

　　最近有個課程項目，由于對插件開發很感興趣，是以花了較大的功夫去研究chrome extension開發。最近一陣，讀文檔、别人的總結、示例代碼不在少數，怕以後自己忘了，是以還是趁熱打鐵寫下來。由于本人了解能力有限，對于一些現象給出的解釋可能不全面或者有偏差，歡迎大家指正！

　　寫部落格的經曆不是很豐富，在此請允許一個小有心得的菜鳥談談chrome插件開發的一些知識，希望能對和我一樣菜鳥級别起步的人提供便利！

　　先來講講如何建立屬于自己的chrome插件！我假設讀者和我一樣，會一點點js的文法，能夠看得懂jQuery語句。注釋中的内容可以無視！

　　（實在不會，可以看看 http://www.w3school.com.cn/ 一個絕佳的自學的網站,碰到不懂的時候我也會經常查查這個網站）

=========================華麗麗的切割線================================================

進入正題:

　　首先，我們需要manifest.json檔案來聲明我要寫的插件的相關資訊。可以把manifest.json了解成插件的入口，即chrome需要通過manifest.json來了解你的插件要引用哪些檔案、需要哪些權限、插件圖示等資訊。ok，那就先來寫manifest.json檔案吧：

　　

{
    "manifest_version": 2,
    "name": "cyber watcher",
    "version": "0.0.1",
    "background": { "scripts": ["jquery.min.js", "background.js"] },
    "browser_action": {
        "default_icon": "ico.png",
        "default_title": "cyber watcher", 
        "default_popup": "popup/popup.html"
    },
    "permissions" : ["tabs","http://*/*"],
    "content_scripts":[{
        "matches":["http://*/*"],
        "js":["jquery.min.js", "watcher.js"],
        "run_at":"document_end"
    }]
}      

“manifest_version”現在都是第二個版本了，現在都需要适應新的規範，是以照着寫就可以了（第一個版本我也隻是在别人的插件代碼中看到過，主要是一些manifest變量命名的方法和文法不同）；“name”就是你的插件的名稱啦~在需要擴充程式顯示名稱的時候顯示出來的文字；“version”是版本号；“background”定義背景的一些特性，比如可以為背景（背景有什麼作用？先留個疑問吧！）添加腳本；“browser_action”設定擴充欄的資訊，也就是為你的插件在擴充欄裡面添加一個圖示（ico.png），滑鼠懸浮的時候顯示插件名稱（cyber watcher），滑鼠點選的時候顯示一個彈出頁面（popup.html）；其實還有一個“page_action”，設定的是位址欄的資訊，其中位址欄的圖示可以控制它是否顯現。

"permission"設定插件的權限，其中"tabs"允許插件通路标簽頁，後面的網址允許插件向這些網址發送ajax請求（同時還擷取了其他權限，不過對于小插件一般用不到），“http:/

-------------------------------------------------------------

--------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

至此，一個插件就配置好了！在寫一個實用的插件之前，我們可以先來做點簡單的測試項目：

比如我可以在把manifest中的content_scripts寫成：

"content_scripts":[{
        "matches":["http://www.baidu.com/*"],
        "js":["test.js"]
    }]      

在test.js中寫：

var div = document.createElement("div");
var body = document.getElementsByTagName("body")[0];
div.innerHTML = "Hello,World!";
div.style.position = "fixed";/*固定定位*/
div.style.left = "100px";
div.style.top = "100px";　　/*顯示在距離視窗左邊100px，頂部100px的位置*/
div.style.color = "red";　　/*字型顔色紅色*/
div.style.fontSize = "50px";/*字型大小50px*/
body.appendChild(div);      

然後把manifest寫好，按照之前的方法配置一遍， 如果你已經配置過了，就點選“重新加載”。

登陸 百度，看看是不是在左上角顯示了一個大大的“hello,world”呢？

如果你寫了popup.html檔案，那麼你點選右上角自己的插件圖示，看看彈出的是不是你寫的頁面？

====================最後的華麗麗的分割線=================================================

參考閱讀：

以上内容，含部分言論，可參見我讀過的一篇部落格：

[1] http://www.cnblogs.com/guogangj/p/3235703.html 谷歌chrome自然而然找到的部落格，寫得很好，剛開始起步寫插件可以下載下傳他的作品參考（我就是這麼做的），我的總結，很大部分是對他的總結的再總結（摻雜了一點點我個人的了解方式）

順便貼下我寫的插件代碼（王婆賣瓜，見笑了！TAT）：

[2] watcher.zip 追蹤自己上網的記錄的一個小插件，多一份代碼，多一份參考吧...

[3] http://developer.chrome.com/extensions/getstarted chrome插件開發手冊上給的樣例，全英文的，不過挺好懂的，寫的也比較簡單，不過絕對是參考範本！

chrome插件（二）-差別三個環境

前言：

　　這句話一定要寫在前面：這隻是一個剛開始學習寫插件的人寫的總結，我盡可能嚴謹，但能力限制不允許啊TAT！是以有什麼錯誤，歡迎指正交流~

　　注釋部分大多為個人了解，未經詳細考察推敲，可以直接無視。如有錯誤，歡迎戳我，及時糾正我的了解誤區！thx----q:894355570

　　進入正題：在extension的編寫過程中，會發現：比如我在background.js裡面定義了一個函數，然後在popup頁面中不能調用！進一步研究，你會發現背景和popup兩者之間，并不能共享變量。事實上，這裡有三個環境（上下文），為了描述友善，我喜歡稱之為background、popup、content。算上浏覽頁面自身的腳本，一共有四個環境。他們互相獨立，擁有不同的上下文，不能共享任何js變量。

===============================華麗麗的分割線===============================================

使用控制台：

　　在chrome中，按F12後選擇console标簽，或者ctrl+shift+J都可以快速啟動目前頁面的控制台。

　　

　　在console中，你可以通路頁面腳本的變量，或者調用頁面腳本中的函數。

　　關于console的更多巧妙用法，可以參考開發手冊：

　　http://developer.chrome.com/devtools/docs/console

　　以下挑出console中兩個非常有用的函數，簡直就是在控制台中檢測程式的神器：

　　1.console.log(msg)：在控制台中輸出資訊。如果參數是對象的話，會輸出[Object Object]。

　　2.console.dir(obj)：在控制台中輸出資訊。不過能夠輸出對象，通過展開/折疊可以檢視對象的各個屬性。如下圖！

　　

　　

背景background：

　　背景的腳本檔案在manifest的“background”屬性中設定，比如設定為“background.js”。

　　如果你在background裡面定義了一個變量，你會發現在ctrl+shift+J跳出來的console裡面通路不到該變量！這個時候可以深刻體會到背景和頁面腳本處于不同的環境！

　　不過，通過在背景控制頁面==>點選 generated_background_page.html 就會彈出背景的console啦！在彈出來的console裡面，可以與background.js裡面的變量/函數進行互動。

-------------------------------------------------------------------------------------------------------------------------------------

　　

-------------------------------------------------------------------------------------------------------------------------------------

彈出頁面popup：

　　所謂彈出頁面，就是你點選插件圖示時，彈出來的頁面。同樣，它既不能直接通路背景，也不能通路頁面腳本，也處于一個獨立的環境之中。

　　

　　可以直接右鍵==>審查彈出内容，或者點開彈出頁面==>右鍵==>審查元素 就可以調用popup的專屬console啦~

　-----------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

插件腳本content：

　　

　　特别需要知道的是，content和頁面腳本也是互相獨立的兩個環境，即便content給你的感覺像是和頁面腳本距離最近的一個！

　　所謂獨立，也就是說你不可能在content_scripts的js檔案裡面，調用原網頁腳本的任何變量/函數。

　　然而，相當高端的事是：content環境可以通路原頁面的DOM結構，也就是說，它和頁面腳本一樣，能夠操作頁面的任意一個元素！這就意味着，你可以全面幹預最終顯示在你眼前的頁面！

　　之前說過了，你在浏覽頁面調用出來的控制台，和你的浏覽的頁面腳本屬于同一個環境，也就是說：這個控制台不能通路content_scripts的js檔案中的任何變量/函數。說白了，就是content環境沒有屬于自己的控制台。

關于Debug：

　　在控制台中，有很多手段可以輔助你debug，我自己也是菜鳥，我就貼兩個我最常用的手段吧！

　　1. 設定斷點，在控制台頁面選擇“Sources”标簽，找到你想檢查的腳本，然後直接點選行号即可設定斷點；

　　

　　2.console.log()+console.dir()這兩個函數配套使用，加到源代碼中，可以在控制台中輸出臨時變量，便于檢測邏輯的正确性。

　　除此之外，雖然笨，但别忘了還有alert()函數，相當于内置在你源碼中的斷點：運作到alert函數時，會顯示一個警告框，在警告框被處理之前，腳本暫停運作。

============================華麗麗的分割線呦=======================================================

小結：

　　說到底，寫插件的時候，務必要意識到background、popup、content是三個互相獨立的環境，算上原頁面的腳本環境，一共就有四個獨立環境了。其中，content和頁面腳本共享頁面的DOM結構，能夠對文檔元素進行修改！我自己畫了個圖，便于理清我自己的了解，如有錯誤，歡迎盡早指正（至少我的了解在我目前的編寫過程中屢試不爽）：

　　

===================================華麗麗的分割線=============================================

參考閱讀：

[1]http://developer.chrome.com/extensions/overview 開發手冊上給出的一個整體視圖的了解

=================2014/4/8=補=============================

這裡補充一個功能，即chrome.tabs.executeScript函數，它也可以向指定頁面植入腳本。

可以看看這裡：

所不同的是，這個函數隻能在background.js裡面使用（至少我測試出來是這樣，或者我的測試方法有問題），可以傳遞三個參數，即：

1.目标标簽頁的id，這個可以通過tabs.query函數來擷取特定的标簽頁；

2.具體插入的腳本，可以直接是代碼，{code：“代碼”}，也可以是檔案{file：“code.js”}；

3.回調函數。

由于是動态導入的，也就是是說你可以在任何特定情況下導入js代碼。

另外，雖然content_scripts是事先準備好的，而executScript是動态導入的，但是，它們屬于同一個上下文，也就是說，動态導入的時候，是可以通路到你在content_scripts中定義的變量或者函數的。（這點親測通過）

=======================================================

和論壇上另外好友交流的時候我又學到了一招，受教于他人才知道的，在這裡交流一下：

由于content_scripts和原頁面腳本不屬于同一個上下文，那問題來了：我偏偏就想調用原頁面腳本裡面的函數，我就是想通路它的變量或者函數，怎麼辦？

首先，要基于這樣一個前提：我對原頁面腳本充分了解，我的目标代碼也隻針對特定網頁

方法：找到原頁面腳本所在的<script>标簽，然後append要添加的代碼

一般來說頁面的腳本在<head>标簽裡面，

1	$( "script" , "head" ).append( "alert('hello,world!')" );

在本地親測通過，成功調用原頁面腳本中定義的函數。由于一般網站構架過于複雜，尚未在知名網站上測試成功過（在百度上測過，跪了，尚不知曉原因）

轉自：http://www.cnblogs.com/leenham/p/3597705.html