怎樣在Chrome外掛裡干涉相關網頁?

本文是我寫的另一篇經驗“怎樣開發Chrome外掛”的進階篇,通過本文,你將更加深入的瞭解Chrome外掛,並能為相關網頁開發出相應的外掛來。

工具/原料

Chrome瀏覽器

文字編輯工具

基本原理

我們知道,Chrome外掛的開發語言是Javascript,而Javascript試執行在網頁中的,而popup.html(就是彈出頁面)只有在點選相應圖示時才能起效果,而不是自動的執行。所以Chrome提供給我們另一種頁面叫background,這個頁面,在外掛載入時被執行,我們只要在裡面註冊函式,就可以在相應的時機執行相應的函式。

最常用的事件,我個人覺得是tabs的事件,比如tabs的updated事件,每當tab更新的時候就會觸發,我們就是在這時,將事先為使用者頁面準備好的Javascript插入到使用者頁面裡。使用者介面指的是tab開啟的介面,比如百度數字大人貼吧的版面。這裡可能有人不禁要問,為什麼要插入程式碼呢?不插入不行麼?答案是不行,如果不插入程式碼,程式碼只能執行在background頁面裡,程式碼操作的是background頁面,而不是使用者頁面,所以,為了能給使用者頁面提供服務,我們必須插入程式碼。

實現相關功能的函式在Chrome外掛開發的文件裡都有,詳細地址見參考資料。

步驟/方法

如果你看了前一篇,你就應該有大概如下的檔案。

怎樣在Chrome外掛裡干涉相關網頁

在配置檔案裡,填寫“background_page”一項,並指明屬性是哪個頁面,當然這個頁面也必須在與配置檔案同一個目錄下才行。例項如下:
{
"name": "TiebaAddin",
backgound_page": "background.html",
...
}

怎樣在Chrome外掛裡干涉相關網頁

在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);

怎樣在Chrome外掛裡干涉相關網頁

儲存,在擴充套件頁面裡,選擇重新載入,最後實驗即可。

怎樣在Chrome外掛裡干涉相關網頁

怎樣在Chrome外掛裡干涉相關網頁

注意事項

對於第2步:Check.js檔案必須在同一個目錄下,而且由於Javascript指令碼語言的特性,可能你寫錯一些什麼就不會執行,所以請千萬確保你寫的程式碼語法正確!

對於第3步:點選小扳手>>"Tools">>"Extensions",然後你就看到了你的工程,重新載入一下。請千萬主要,有的時候,不重新載入也能執行新的程式,但是這不是所有時候都這樣的!請不要抱著僥倖的心理,一定要每次寫完程式碼後重新載入才行!

網頁, 外掛, 外掛裡,
相關問題答案