日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

Chrome瀏覽器擴(kuò)展:Content腳本與擴(kuò)展的其他頁面腳本的消息傳遞

 典刻華章 2017-11-20

我正在實(shí)現(xiàn)一個(gè)Chrome瀏覽器擴(kuò)展來解析某社交網(wǎng)站的數(shù)據(jù)(也就是扒網(wǎng)頁)。點(diǎn)擊擴(kuò)展的圖標(biāo),它將會(huì)pop up出一個(gè)氣泡窗口,上面顯示當(dāng)前解析的結(jié)果。解析的工作由content page的一個(gè)javascript腳本負(fù)責(zé)。更具體的數(shù)據(jù)流程是:點(diǎn)擊圖標(biāo)出現(xiàn)氣泡窗口(popup.html),氣泡窗口的javascript腳本(popup.js)將發(fā)送一個(gè)消息給content page的腳本(content.js),content.js計(jì)算解析content page(即社交網(wǎng)站)得到結(jié)果,將其通過消息回調(diào)函數(shù)返回給popup.js,然后popup.js再把結(jié)果顯示到popup.html上,氣泡窗口上就能看到扒網(wǎng)頁的結(jié)果了。

這里消息的發(fā)送方popup.js使用了chrome.tabs.query函數(shù)和chrome.tabs.sendMessage函數(shù),具體代碼如下:

[javascript] view plain copy
print?
  1. chrome.tabs.query({active: true, currentWindow: true}, function(tabs){  
  2.     chrome.tabs.sendMessage(tabs[0].id, {message:"calculate"}, function(response) {  
  3.         var result = document.createElement("div")  
  4.         result.textContent=response.result  
  5.         document.body.appendChild(result)  
  6.     });    
  7. });  

chrome.tabs.query函數(shù)用來定位當(dāng)前標(biāo)簽頁,因?yàn)閏hrome.tabs.sendMessage需要明確指出消息發(fā)送給誰(第一個(gè)參數(shù))。消息的內(nèi)容是第二個(gè)參數(shù),一個(gè)json對(duì)象。

方法體里面的三行其實(shí)是回調(diào)函數(shù)的內(nèi)容,也就是popup.js得到content.js的回復(fù)后執(zhí)行的操作:將結(jié)果添加到氣泡窗口popup.html中。

需要指出的是谷歌官方的開發(fā)文檔和示例里用的是chrome.tabs.getSelected函數(shù)和chrome.extension.sendRequest函數(shù),這兩個(gè)函數(shù)在新的Chrome里已經(jīng)廢棄了。

消息的接收方content.js實(shí)現(xiàn)了消息監(jiān)聽器,具體代碼如下:

[javascript] view plain copy
print?
  1. chrome.extension.onMessage.addListener(  
  2.   function(request, sender, sendResponse) {  
  3.     if (request.message == "calculate")  
  4.         sendResponse({result: calculate()})  
  5.     else  
  6.         sendResponse({result: "不告訴你"})  
  7.   });  
calculate函數(shù)在content.js里實(shí)現(xiàn),返回值是解析的結(jié)果,也是一個(gè)json對(duì)象。

和前述一樣,監(jiān)聽器從前用chrome.extension.onRequest,現(xiàn)在用chrome.extension.onMessage。

其實(shí)消息只是發(fā)送給了該擴(kuò)展的content page,并沒有指出是哪個(gè)腳本。如果有多個(gè)腳本的話,誰實(shí)現(xiàn)了onMessage監(jiān)聽器誰就能接收到消息。如果多個(gè)腳本都實(shí)現(xiàn)了onMessage監(jiān)聽器呢?那就不知道誰會(huì)搶到了,應(yīng)該只有一個(gè)監(jiān)聽器能得到消息吧,因?yàn)檫@種實(shí)現(xiàn)消息傳遞的方法是一次性的,用過即銷毀。若要長期連接,還得用port對(duì)象和connect函數(shù)。

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多