來自Chrome擴展程序的消息傳遞示例

我使用the Google tutorial中的示例，並發現難以將簡單消息從彈出窗口傳遞到內容腳本。來自Chrome擴展程序的消息傳遞示例

您能否提供一些關於如何傳遞簡單消息並在控制檯日誌或警報中查看它的建議？

的manifest.json

{ 
    "manifest_version": 2, 

    "name": "msg-test", 
    "description": "message test", 
    "version": "1.0", 

    "browser_action": { 
    "default_icon": "icon.png", 
    "default_popup": "popup.html" 
    }, 

    "background": { 
    "scripts": ["background.js"], 
    "persistent": true 
    }, 

    "content_scripts": [{ 
    "matches": ["http://*/*","http://www.site.com/*"], 
    "js": ["content.js"], 
    "run_at": "document_end" 
    }], 

    "permissions": [ 
    "tabs", 
    "http://*/*" 
    ] 
}

background.js

chrome.runtime.onConnect.addListener(function(port){ 
    port.postMessage({greeting:"hello"}); 
});

content.js

var port = chrome.runtime.connect({name:"content"}); 
port.onMessage.addListener(function(message,sender){ 
    if(message.greeting === "hello"){ 
    alert(message.greeting); 
    } 
});

popup.js

window.onload = function() { 

    document.getElementById('btn2').onclick = function() { 
     alert("button 2 was clicked"); 
    }; 

    document.getElementById('btn1').onclick = function() { 
     alert("button 1 was clicked"); 
    }; 


}

*注：在這個例子中，當頁面相匹配的manifest.json和警報框將顯示內容腳本會火。

來源

2014-02-13 rrrfusco

@ aclave1您能否介紹一下您的擴展程序的所有文件，我想嘗試一下自己。其他文件（如popup.html）未在developer.chrome.com/extensions/messaging中明確確定 –

首先，我不會在您的彈出窗口和您的內容腳本之間傳遞消息。我會在您的Background page和您的內容腳本之間傳遞消息。您的彈出式頁面只能用於顯示某些用戶界面與您的應用進行交互。

這樣說，我會告訴你在你的背景和你的內容腳本之間傳遞消息的方式。

在您的內容腳本：（？可能是您的彈出，但我不建議這樣做）

//This line opens up a long-lived connection to your background page. 
var port = chrome.runtime.connect({name:"mycontentscript"}); 
port.onMessage.addListener(function(message,sender){ 
    if(message.greeting === "hello"){ 
    alert(message.greeting); 
    } 
});

在你的背景頁面

chrome.runtime.onConnect.addListener(function(port){ 
    port.postMessage({greeting:"hello"}); 
});

這裏是將要發生的事件序列：

您的應用程序會將您的內容腳本注入頁面
您的內容腳本將打開一個端口與後臺腳本進行通信。
您的後臺腳本會被通知端口已打開，允許它向其發送消息或向其添加消息偵聽器。

在後臺腳本或內容腳本中，您可以使用port.onMessage.addListener()來收聽消息。只要端口在範圍內。使用端口更容易掌握，並允許簡單的雙向通信！

編輯：

如果您想將郵件從您的彈出腳本傳遞給你的背景頁面，使用完全相同的方法：

var port = chrome.runtime.connect({name: "popup-port"}); 
port.postMessage({status:"poppedup"});

編輯2：

要導航用戶到新頁面，請執行以下操作：

function navigateToPage(url){ 
    chrome.tabs.query({url: url}, function(tabs) { 
     var tab = tabs[0]; 
     return tab ? chrome.tabs.update(tab.id, {active:true}) : chrome.tabs.create({url: url}); 
    }); 
} 
});

該函數的功能是檢查查看是否存在帶有要轉到的網址的選項卡，如果有，請切換到該選項卡，否則，創建一個包含該網址的選項卡並導航至該選項卡。

來源

2014-02-14 06:13:27 aclave1

popup.js被視爲「啞視圖」：「在具有背景頁面的典型擴展中，UI - 例如，瀏覽器動作或頁面動作以及任何選項頁面 - 都是由愚蠢的視圖實現的，當視圖需要某種狀態時，它從後臺頁面請求狀態，當後臺頁面發現狀態變化時，後臺頁面告訴意見更新。「 – aclave1

您可以通過添加給你的清單中添加一個後臺頁面：「背景」：{ 「頁」：「background.html」，「老大難」：真 }， – aclave1

沒有，但是這並不消息傳遞。您甚至不需要內容腳本來更改當前選項卡的網址。我將編輯我的答案，告訴你如何做到這一點。 – aclave1

來自Chrome擴展程序的消息傳遞示例

回答

相關問題