1. 程式人生 > >Content指令碼與擴充套件的其他頁面指令碼的訊息傳遞

Content指令碼與擴充套件的其他頁面指令碼的訊息傳遞

               

我正在實現一個Chrome瀏覽器擴充套件來解析某社交網站的資料(也就是扒網頁)。點選擴充套件的圖示,它將會pop up出一個氣泡視窗,上面顯示當前解析的結果。解析的工作由content page的一個javascript指令碼負責。更具體的資料流程是:點選圖標出現氣泡視窗(popup.html),氣泡視窗的javascript指令碼(popup.js)將傳送一個訊息給content page的指令碼(content.js),content.js計算解析content page(即社交網站)得到結果,將其通過訊息回撥函式返回給popup.js,然後popup.js再把結果顯示到popup.html上,氣泡視窗上就能看到扒網頁的結果了。

這裡訊息的傳送方popup.js使用了chrome.tabs.query函式和chrome.tabs.sendMessage函式,具體程式碼如下:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){    chrome.tabs.sendMessage(tabs[0].id, {message:"calculate"}, function(response) {  var result = document.createElement("div")  result.textContent=response.result  document
.body.appendChild(result)    });  });

chrome.tabs.query函式用來定位當前標籤頁,因為chrome.tabs.sendMessage需要明確指出訊息傳送給誰(第一個引數)。訊息的內容是第二個引數,一個json物件。

方法體裡面的三行其實是回撥函式的內容,也就是popup.js得到content.js的回覆後執行的操作:將結果新增到氣泡視窗popup.html中。

需要指出的是谷歌官方的開發文件和示例裡用的是chrome.tabs.getSelected函式和chrome.extension.sendRequest函式,這兩個函式在新的Chrome裡已經廢棄了。

訊息的接收方content.js實現了訊息監聽器,具體程式碼如下:

chrome.extension.onMessage.addListener(  function(request, sender, sendResponse) {   if (request.message == "calculate")  sendResponse({result: calculate()}) else  sendResponse({result: "不告訴你"})  });
calculate函式在content.js裡實現,返回值是解析的結果,也是一個json物件。

和前述一樣,監聽器從前用chrome.extension.onRequest,現在用chrome.extension.onMessage。

其實訊息只是傳送給了該擴充套件的content page,並沒有指出是哪個指令碼。如果有多個指令碼的話,誰實現了onMessage監聽器誰就能接收到訊息。如果多個指令碼都實現了onMessage監聽器呢?那就不知道誰會搶到了,應該只有一個監聽器能得到訊息吧,因為這種實現訊息傳遞的方法是一次性的,用過即銷燬。若要長期連線,還得用port物件和connect函式。