Google chrome extension 来自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"});
});

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

window.onload = function() {

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

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


}

content.js

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

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

window.onload = function() {

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

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


}

popup.js

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

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

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时，内容脚本将启动，并显示警报框。

首先，我不会在弹出窗口和内容脚本之间传递消息。我会在你和你的内容脚本之间传递消息。您的弹出页面应仅用于显示与应用程序交互的某些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);
  }
});

在你的背景页面（可能是你的弹出窗口？但我不推荐）

以下是将要发生的事件的顺序：

应用程序将把内容脚本注入页面

您的内容脚本将打开一个端口与后台脚本通信

后台脚本将收到端口已打开的通知，允许它向其发送消息，或向其附加消息侦听器

在后台脚本或内容脚本中，可以使用

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创建一个选项卡并导航到它

popup.js被视为“哑视图”：“在具有背景页面的典型扩展中，UI（例如浏览器操作或页面操作以及任何选项页面）由哑视图实现。当视图需要某种状态时，它会从后台页面请求该状态。当背景页面注意到状态更改时，背景页面会通知视图进行更新。“您可以通过将其添加到清单中来添加背景页面：“背景”：{“页面”：“background.html”，“persistent”：true}，不，但这不是消息传递。您甚至不需要内容脚本来更改当前选项卡的url。我将编辑我的答案以向您展示如何做到这一点。在花了两个小时徒劳地浏览官方文档后，这实际上帮助我完成了我想要的。谢谢YOU@aclave1你能介绍一下你前任的所有档案吗有问题，我想自己试试。其他文件（如popup.html）没有在developer.chrome.com/extensions/messaging中明确确定