来自Chrome扩展程序的邮件传递示例

Question

我正在使用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匹配时将触发内容脚本,并且将显示警告框.

Answer 1

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

话虽如此,我将向您展示在后台和内容脚本之间传递消息的方法.

在您的内容脚本中:

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

以下是将要发生的事件序列:

1. 您的应用程序会将您的内容脚本注入页面
2. 您的内容脚本将打开一个端口以与后台脚本进行通信.
3. 您的后台脚本将被通知端口已打开,允许它向其发送消息,或者向其附加消息侦听器.

在后台脚本或内容脚本中,您可以使用侦听消息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});
    });
}
});

这个函数的作用是,它会检查是否有一个包含你想去的网址的标签,如果有的话,切换到它,否则,用该网址创建一个标签并导航到它.