chrome擴充套件開發：[10]訊息傳遞

2019-12-19 12:47:56

介紹chrome瀏覽器擴充套件的訊息傳遞（Message Passing）機制

1

前面幾篇文章我們介紹了browser action 、background pages、content scripts。

他們是在不同的上下文中執行的，不能彼此直接存取，有什麼辦法在他們之間傳遞資料或訊息嗎？答案是:訊息傳遞（Message Passing）.下面是官方文件的截圖：

2

訊息分為三種，一次性訊息、長效訊息、擴充套件間訊息，就是文件中所說的，?one-time requests，?long-lived connections，?cross-extension messages

3

一次性訊息（one-time requests）從content script傳送給background：chrome.runtime.sendMessage({cmd: "mycmd"}, function(response) { ?console.log(response);});從background向content script傳送訊息：chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { ?chrome.tabs.sendMessage(tabs[0].id, {cmd: "mycmd"}, function(r

esponse) { ? ?console.log(response); ?});});接收方程式碼：chrome.runtime.onMessage.addListener( ?function(request, sender, sendResponse) {?console.log(sender.tab ? ?"from a content script:" + sender.tab.url : ? ? ? ? ? ? ? ?"from the extension");?if (request.cmd== "mycmd")??? ? ?sendResponse( "ok");???});

quest, sender, sendResponse) {?console.log(sender.tab ? ?"from a content script:" + sender.tab.url : ? ? ? ? ? ? ? ?"from the extension");?if (request.cmd== "mycmd")??? ? ?sendResponse( "ok");???});

4

長效訊息（long-lived connections）是現在訊息的收發雙方建立通道，然後通過這個通道收發訊息。連線主動方：var port = chrome.runtime.connect({name: "con1"});port.postMessage({cmd: "mycmd"});port.onMessage.addListener(function(msg) { ?if (msg.recmd== remycmd")??? ?port.postMessage({cmd: "mycmd2"});???else if (msg.recmd== "remycmd2")??? ?port.postMessage

({cmd: "mycmd3"});?});連線被動方：chrome.runtime.onConnect.addListener(function(port) { ?console.assert(port.name == "con1"); ?port.onMessage.addListener(function(msg) {?? ?if (msg.cmd== "mycmd") ? ???port.postMessage({recmd: "remycmd"});?? ?else if (msg.cmd == "mycmd2")??? ? ?port.postMessage({recmd: "remycmd2"});?? ?else if (msg.cmd== "mycmd3")?? ? ?port.postMessage({recmd: "remycmd3"});??});?});

name == "con1"); ?port.onMessage.addListener(function(msg) {?? ?if (msg.cmd== "mycmd") ? ???port.postMessage({recmd: "remycmd"});?? ?else if (msg.cmd == "mycmd2")??? ? ?port.postMessage({recmd: "remycmd2"});?? ?else if (msg.cmd== "mycmd3")?? ? ?port.postMessage({recmd: "remycmd3"});??});?});

5

擴充套件間訊息（cross-extension messages）是在不同的擴充套件之間收發訊息。

下面是官方文件的程式碼範例：

1

我們修改下前面幾節的程式碼，演示一下one-time requests的機制。基本思路是：cs1.js獲取到新聞列表後傳送給background，background將其儲存到變數中popup每次彈出時向background獲取其儲存的列表，然後顯示到彈出視窗中。

2

cs1.js中傳送新聞列表的程式碼：var newsArray=[];for(var i=0;i<len;i++){newsArray.push($(alist[i]).attr('title'));}chrome.extension.sendMessage({cmd: "setNewsArr",'arr':newsArray},function(response) {});

3

background.js中處理訊息的程式碼：chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {if(request.cmd=='setNewsArr'){console.log(request.arr)g_newsArr=request.arr;}else if(request.cmd=='getNewsArr'){sendResponse({'arr':g_newsArr});}})

4

popup.js中，獲取新聞列表的程式碼：chrome.extension.sendMessage({cmd: "getNewsArr"},function(response) {if(response.arr){var len=response.arr.length;for(var i=0;i<len;i++){$('body').append("<br>"+response.arr[i]+'<br>');}}});

5

重新載入擴充套件，開啟csdn首頁，幾秒鐘後點選擴充套件圖示。

chrome擴充套件開發：[10]訊息傳遞

1

2

3

4

5

1

2

3

4

5

熱門文章