Javascript Chrome扩展-修改消息事件的弹出页面

嗨，我有一个chrome扩展，它的内容脚本将消息事件发送到后台页面 我想修改消息事件的弹出背景页面。背景页最初是空白的

我试过：

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
   console.log('message received');
   chrome.extension.getBackgroundPage().document.innerHTML = 'hello world';
}

但当我点击扩展图标时，它仍然是空白的。你能帮我吗？

---

我可以在控制台中看到，该消息已收到。

弹出窗口虽然是扩展页，但不是背景页。它只有在打开时才可访问。因此，根据其他信息更改弹出页面的最佳方法是从弹出页面本身启动消息。我认为您正在使用内容脚本在页面上获取某种信息，然后根据该信息更改弹出窗口。您可以准备数据并在内容脚本本身中设置一个

onMessage

侦听器，也可以将信息传递到后台页面并从弹出窗口请求它。第一个例子是：

内容脚本

...
//assume that you already have the info you want stored in 'info'

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  sendResponse(info);
});

// same assumption that info is already defined as the info you want
chrome.runtime.sendMessage({'method':'setInfo','info':info});

弹出窗口

chrome.tabs.query({'active': true,'currentWindow':true},function(tab){
  chrome.tabs.sendMessage(tab[0].id,"stuff", function(response){
    //assuming that info was html markup then you could do
    document.body.innerhtml = response;
    //I personally wouldn't do it like this but you get the idea
  });
});

chrome.runtime.sendMessage({'method':'getInfo'},function(response){
  //response is now the info collected by the content script.
  console.log(response);
});

根据要求，此处使用背景页面作为中介：

内容脚本

...
//assume that you already have the info you want stored in 'info'

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
  sendResponse(info);
});

// same assumption that info is already defined as the info you want
chrome.runtime.sendMessage({'method':'setInfo','info':info});

背景页面

var info;
chrome.runtime.onMessage(function(message,sender,sendResponse){
  // When we get a message from the content script
  if(message.method == 'setInfo')
    info = message.info;
  // When we get a message from the popup
  else if(message.method == 'getInfo')
    sendResponse(info);
});

弹出窗口

chrome.tabs.query({'active': true,'currentWindow':true},function(tab){
  chrome.tabs.sendMessage(tab[0].id,"stuff", function(response){
    //assuming that info was html markup then you could do
    document.body.innerhtml = response;
    //I personally wouldn't do it like this but you get the idea
  });
});

chrome.runtime.sendMessage({'method':'getInfo'},function(response){
  //response is now the info collected by the content script.
  console.log(response);
});

---

当然，您可以用比简单的全局变量更好的方式将信息存储在后台页面中。一个好方法是使用。

谢谢您的回复。我要试试看it@BeardFist您能提供第二种情况的示例吗。@Ryanglush我添加了您想要的示例。@BeardFist感谢您的回复，manifest_版本2缺少文档。也许存储API或本地存储是一条出路。下面是我在contentscript.js示例中看到的错误消息

uncaughtreferenceerror:info未定义

。。。background.js

未捕获类型错误：对象的属性“onMessage”不是函数

。。。popup.js

端口错误：无法建立连接。接收端不存在。

@RyanGrush如果您想开始自己的问题，我可以提供更好的答案，当您确定要发布代码时。