Chrome扩展程序中的消息传递示例

rrrfusco 发表于 Dev

Rrfusco

我正在使用Google教程中的示例，发现很难将简单的消息从弹出窗口传递到内容脚本。

您能否提供一些有关如何传递简单消息并在控制台日志或警报中查看它的建议？

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匹配时，内容脚本将触发，并显示警告框。

aclave1

首先，我不会在您的弹出窗口和内容脚本之间传递消息。我会在您的背景页面和内容脚本之间传递消息。您的弹出页面应仅用于显示一些与应用程序交互的用户界面。

话虽如此，我将向您展示在背景和内容脚本之间传递消息的方法。

在您的内容脚本中：

//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});
    });
}
});

该功能的作用是检查是否有一个带有您要访问的URL的选项卡，如果有，请切换到该选项卡，否则，请创建具有该URL的选项卡并导航至该选项卡。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。