https://www.ituring.com.cn/book/miniarticle/60272
2.5 擴展頁面間的通信
有時需要讓擴展中的多個頁面之間,或者不同擴展的多個頁面之間相互傳輸數據,以獲得彼此的狀態。比如音樂播放器擴展,當用戶鼠標點擊popup頁面中的音樂列表時,popup頁面應該將用戶這個指令告知后台頁面,之后后台頁面開始播放相應的音樂。
Chrome提供了4個有關擴展頁面間相互通信的接口,分別是runtime.sendMessage
、runtime.onMessage
、runtime.connect
和runtime.onConnect
。做為一部入門級教程,此節將只講解runtime.sendMessage
和runtime.onMessage
接口,runtime.connect
和runtime.onConnect
做為更高級的接口請讀者依據自己的興趣自行學習,你可以在http://developer.chrome.com/extensions/extension得到有關這兩個接口的完整官方文檔。
請注意,Chrome提供的大部分API是不支持在content_scripts
中運行的,但runtime.sendMessage
和runtime.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
接收到的參數有三個,分別是message
、sender
和sendResponse
,即消息內容、消息發送者相關信息和相應函數。其中sender
對象包含4個屬性,分別是tab
、id
、url
和tlsChannelId
,tab
是發起消息的標簽,有關標簽的內容可以參看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下載到。