關於chrome插件編寫的小結

一個插件的大體目錄結構以下：

其中manifest文件最爲重要，它定義/指明插件應用的相關信息（權限、版本、功能說明等），點此查看Manifest的詳情>>

 

這裏有一篇chrome官方提供的插件編寫的例子<Getting Started:Building a Chrome Extension>

 

popup.html的說明，就是瀏覽器導航上的插件按鈕點擊後的彈出頁面

background.htm是一個始終運行於瀏覽器後臺的頁面，瀏覽器關閉時它才被關閉，能夠做爲一個監聽者

地址欄訪問：chrome://extensions/  載入編寫插件的目錄

點擊後，彈出調試器

 

content_scripts 能夠直接操做網頁，至關於指定域名下頁面，外鏈了一個JS文件。

 

注：插件的icon尺寸大小 width * height = 128px * 128px，能夠經過http://www.easyicon.net/進行搜索

 

 

下面說一下幾個容易混淆的地方：

1、插件的做用域

插件環境：popup.html、background_page

頁面環境：content_scripts

全部content_scripts沒法直接獲取popup.html頁中經過localStorage存儲的數據，須要藉助background.htm進行中轉。

popup.html可使用ajax進行跨域請求數據，但受manifest中的permissions選項的限制（須要指定相應的域名），content_scripts跟頁面同樣，不能直接跨域請求數據

 

2、腳本的載入

全部的頁面(html/htm)不能直接嵌入內聯JavaScript函數，都必須使用script標籤引入，若是使用內聯腳本，控制檯會報錯

 

3、生命週期

popup.html 能夠認爲它是一個網頁，由導航上的插件按鈕點擊時載入（裏面的腳本開始執行），關閉彈出層時也就關閉了這個網頁（裏面的代碼亦不會再執行）

background.htm 在插件啓用後瀏覽器進程存在的狀況下開始，瀏覽器關閉時或插件卸載時結束

content_scripts 與瀏覽的頁面生命週期同步

 

4、消息傳遞

通常來說，是在popup.html中操做後，須要同步至各content_scripts中，這就存在幾個問題：

一、popup.html被激活時，如何廣播消息至各tab頁；

二、當激活指定的tab頁時，content_scripts如何獲取popup.html中存儲的相關數據；

 

當popup.html關閉時，content_scripts須要經過background.htm赤獲取數據，當popup.html激活並得到相關數據後，須要廣播消息出去。

 

一、content_scripts 獲取數據

調用chrome.extension.sendRequest方法，發送相應的數據出去。background.htm的處理腳本監聽到消息後，調用sendResponse方法返回數據

 

 

二、popup.html 廣播消息至各頁面

popup.html的處理腳本，在獲得數據後，調用chrome.tabs.sendRequest方法廣播。可是chrome.tabs.sendRequest方法須要指定tab選項卡的id （tab頁的一個標識ID）

在我嘗試過一些方法，如：getCurrent、getAllInWindow等方法後，感受達不到效果，若是當前並非選中指定的頁面呢？後來嘗試使用query方法，被我發現能夠遍歷得到全部知足條件的tab頁

經過URL這個屬性就能夠進行過濾，而後拿到tabId，再調用sendRequest方法，content_scripts 再監聽消息得到數據就能夠對頁面進行任意修改了。

這樣在popup.html頁面操做後，全部知足條件的頁面均能實現自動更新（包括刷新頁面操做）

 

popup.html相應的腳本代碼處理方法（查詢併發送消息）

 

content_scripts 對應的腳本處理函數（接受消息）

 

參考資料：

Getting Started: Building a Chrome Extension

chrome.tabs

360極速瀏覽器應用開放平臺 - 消息傳遞

BootStrap Form Builder

Chrome 網上應用商店 CRX生成工具