本文是我寫的另一篇經驗“怎樣開發Chrome外掛”的進階篇,通過本文,你將更加深入的瞭解Chrome外掛,並能為相關網頁開發出相應的外掛來。
工具/原料
Chrome瀏覽器
文字編輯工具
基本原理
我們知道,Chrome外掛的開發語言是Javascript,而Javascript試執行在網頁中的,而popup.html(就是彈出頁面)只有在點選相應圖示時才能起效果,而不是自動的執行。所以Chrome提供給我們另一種頁面叫background,這個頁面,在外掛載入時被執行,我們只要在裡面註冊函式,就可以在相應的時機執行相應的函式。
最常用的事件,我個人覺得是tabs的事件,比如tabs的updated事件,每當tab更新的時候就會觸發,我們就是在這時,將事先為使用者頁面準備好的Javascript插入到使用者頁面裡。使用者介面指的是tab開啟的介面,比如百度數字大人貼吧的版面。這裡可能有人不禁要問,為什麼要插入程式碼呢?不插入不行麼?答案是不行,如果不插入程式碼,程式碼只能執行在background頁面裡,程式碼操作的是background頁面,而不是使用者頁面,所以,為了能給使用者頁面提供服務,我們必須插入程式碼。
實現相關功能的函式在Chrome外掛開發的文件裡都有,詳細地址見參考資料。
步驟/方法
如果你看了前一篇,你就應該有大概如下的檔案。
在配置檔案裡,填寫“background_page”一項,並指明屬性是哪個頁面,當然這個頁面也必須在與配置檔案同一個目錄下才行。例項如下:
{
"name": "TiebaAddin",
backgound_page": "background.html",
...
}
在background頁面裡,寫一個Javascript函式,名字為InsertFunc,並在這個函式裡註冊相關程式碼。之後在最後,向Chrome註冊這個函式資訊,讓每當tab更新時觸發。
function InsertFunc(tabId,changeInfo,tab)
{
//讓使用者介面執行程式碼。
chrome.tabs.executeScript(tabId,{code : "alert('看看這是那個頁面彈出的!');"});
//讓使用者介面執行一個檔案的JS。
chrome.tabs.executeScript(tabId,{file : "Check.js"});
}
//註冊事件的響應函式
chrome.tabs.onUpdated.addListener(InsertFunc);
儲存,在擴充套件頁面裡,選擇重新載入,最後實驗即可。
注意事項
對於第2步:Check.js檔案必須在同一個目錄下,而且由於Javascript指令碼語言的特性,可能你寫錯一些什麼就不會執行,所以請千萬確保你寫的程式碼語法正確!
對於第3步:點選小扳手>>"Tools">>"Extensions",然後你就看到了你的工程,重新載入一下。請千萬主要,有的時候,不重新載入也能執行新的程式,但是這不是所有時候都這樣的!請不要抱著僥倖的心理,一定要每次寫完程式碼後重新載入才行!