Chrome擴展及應用開發-擴展頁面間的通信


https://www.ituring.com.cn/book/miniarticle/60272

2.5 擴展頁面間的通信

 

有時需要讓擴展中的多個頁面之間,或者不同擴展的多個頁面之間相互傳輸數據,以獲得彼此的狀態。比如音樂播放器擴展,當用戶鼠標點擊popup頁面中的音樂列表時,popup頁面應該將用戶這個指令告知后台頁面,之后后台頁面開始播放相應的音樂。

Chrome提供了4個有關擴展頁面間相互通信的接口,分別是runtime.sendMessageruntime.onMessageruntime.connectruntime.onConnect。做為一部入門級教程,此節將只講解runtime.sendMessageruntime.onMessage接口,runtime.connectruntime.onConnect做為更高級的接口請讀者依據自己的興趣自行學習,你可以在http://developer.chrome.com/extensions/extension得到有關這兩個接口的完整官方文檔。

請注意,Chrome提供的大部分API是不支持在content_scripts中運行的,但runtime.sendMessageruntime.onMessage可以在content_scripts中運行,所以擴展的其他頁面也可以同content_scripts相互通信。

runtime.sendMessage完整的方法為:

chrome.runtime.sendMessage(extensionId, message, options, callback)

其中extensionId為所發送消息的目標擴展,如果不指定這個值,則默認為發起此消息的擴展本身;message為要發送的內容,類型隨意,內容隨意,比如可以是'Hello',也可以是{action: 'play'}2013['Jim', 'Tom', 'Kate']等等;options為對象類型,包含一個值為布爾型的includeTlsChannelId屬性,此屬性的值決定擴展發起此消息時是否要將TLS通道ID發送給監聽此消息的外部擴展1,有關TLS的相關內容可以參考http://www.google.com/intl/zh-CN/chrome/browser/privacy/whitepaper.html#tls,這是有關加強用戶連接安全性的技術,如果這個參數你捉摸不透,不必理睬它,options是一個可選參數;callback是回調函數,用於接收返回結果,同樣是一個可選參數。

1 此屬性僅在擴展和網頁間通信時才會用到。

runtime.onMessage完整的方法為:

chrome.runtime.onMessage.addListener(callback)

此處的callback為必選參數,為回調函數。callback接收到的參數有三個,分別是messagesendersendResponse,即消息內容、消息發送者相關信息和相應函數。其中sender對象包含4個屬性,分別是tabidurltlsChannelIdtab是發起消息的標簽,有關標簽的內容可以參看4.5節的內容。

為了進一步說明,下面舉一個例子。

在popup.html中執行如下代碼:

chrome.runtime.sendMessage('Hello', function(response){
    document.write(response);
});

在background中執行如下代碼:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    if(message == 'Hello'){
        sendResponse('Hello from background.');
    }
});

查看popup.html頁面會發現有輸出“Hello from background.”。

 

 


擴展內部通信Demo的運行畫面

上面這個小例子的源代碼可以從https://github.com/sneezry/chrome_extensions_and_apps_programming/tree/master/runtime.sendMessage_runtime.onMessage_demo下載到。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM