Chrome瀏覽器擴充套件開發系列之三:Google Chrome瀏覽器擴充套件的架構

weixin_34015860發表於2017-07-28

1) 不可視的background頁面

Google Chrome擴充套件往往包含一個不可見的background頁面,Google Chrome擴充套件的主要業務邏輯都位於此。有兩種型別的background 頁面,一種是persistent background pages,另一種是event pages。Persistent background pages持續執行,隨時可訪問。而Event pages是事件驅動執行的,只有在事件發生的時候才可以訪問。

Persistent background pages預設載入入記憶體,持續執行在後臺。在manifest.json文中註冊Persistent background page如下:

{

"background": {

"scripts": [myBackgroundPage.js],

"persistent": true

]

}

Event pages預設是不載入的,只在事件發生時載入並執行。觸發載入Event pages的場景如下:

· Google Chrome擴充套件第一次被安裝或升級到新版本

· 發生了Event pages監聽的事件

· content script或其他Google Chrome擴充套件發出了一個message

· Google Chrome擴充套件中的其他頁面呼叫了chrome.runtime.getBackgroundPage()方法

Google Chrome擴充套件通過chrome.runtime.onInstalled.addListener(onInit)要求監聽onInstalled事件,Chrome瀏覽器跟蹤當前發生的所有事件。一旦被監聽的事件發生,Chrome瀏覽器就會載入Event pages。

如果Google Chrome擴充套件通過removeListener取消了對某事件的監聽,則該事件發生時Chrome瀏覽器也不會載入Event pages。

當事件不再被監聽器引用後解除安裝以釋放記憶體併發出chrome.runtime.onSuspend事件。

在manifest.json文中註冊Event page如下:

{

"background": {

"scripts": [myEventPage.js],

"persistent": false

]

}

2) 可視頁面

Google Chrome擴充套件可以完全執行在後臺,也可以為使用者提供可視介面。Google Chrome擴充套件最常用的可視介面為如下兩種形式(兩者是互斥的):

· browser actions,這樣的Google Chrome擴充套件可以適用於任何頁面。圖示往往位於瀏覽器位址列外右側。點選圖示將彈出視窗。

· page actions,這樣的Google Chrome擴充套件只能作用於某一頁面,當開啟該頁面時觸發該Google Chrome擴充套件,關閉頁面則Google Chrome擴充套件也隨之消失。圖示往往位於瀏覽器位址列內右端。

此外,Google Chrome擴充套件還支援其他的可視介面:

· context menu,右鍵選單

· options 頁面,Google Chrome擴充套件可以有一個options 頁面,支援使用者定製Chrome擴充套件的執行引數。

· override頁面,Google Chrome擴充套件中的override頁面可以替換瀏覽器中開啟的預設頁面,如標籤管理器頁面chrome://bookmarks、瀏覽歷史記錄頁面chrome://history或新建Tab頁面chrome://newtab。不過,一個Google Chrome擴充套件只能替換一個預設頁面。

· 通過chrome.tabs.create()或window.open()開啟的頁面

3) Google Chrome擴充套件與Web頁面/伺服器之間的互動

· 通過content scripts,可以實現Google Chrome擴充套件與使用者開啟的Web頁面之間的互動。

· 通過跨域的 XMLHttpRequest,可以實現Google Chrome擴充套件與其他伺服器之間的互動。

content scripts是一組JavaScript檔案,執行在瀏覽器當前開啟的頁面的上下文中,可以讀取並修改當前開啟的頁面DOM結構。事實上,content scripts可以被看作是當前開啟的頁面的組成部分。

4) 使用chrome.* API

Google Chrome擴充套件除了使用javascript的通用標準API之外,還可以使用Chrome瀏覽器專有的API(稱為chrome.* API).

不過,大多數chrome.* API都是非同步呼叫,呼叫之後立即返回而不等待呼叫結果,所以對chrome.* API的呼叫往往都需要一個回撥函式作為引數以處理呼叫結果。

當然,也有少量chrome.* API是同步呼叫。這樣的chrome.* API往往都有一個返回型別,也無需回撥函式作為引數。

5) Google Chrome擴充套件中的頁面之間的資料通訊

Google Chrome擴充套件中的不同頁面之間往往要通訊,以呼叫彼此方法共享資料。由於一個Google Chrome擴充套件中的所有頁面都執行於同一個程式中的同一個執行緒,所以各個頁面可以通過一定的方法直接呼叫。

如通過chrome.extension.getViews()獲得所有可視頁面的window物件的陣列,通過chrome.extension.getBackgroundPage()獲得不可視的background頁面的window物件。通過頁面的window物件就可以對頁面的DOM進行任何操作。

相關文章