Question

我有一个相当标准的用例，其中我在chrome扩展中有popup.html和background.js。我需要做两件事

当用户点击弹出窗口中的按钮时，让background.js知道它
从背景发送一些数据到弹出窗口

现在要实现这些功能，我正在考虑使用Chrome扩展文档中概述的long-lived connections。对于那个措施，这就是我所拥有的

# popup.js

var port = chrome.extension.connect({name: "LOGGERCHANNEL"});

function sendMessage(msg) {
  port.postMessage(msg);
  port.onMessage.addListener(function(msg) { 
    console.log("message recieved"+ msg); 
  });
}

sendMessage("hello world");


# background_page.js

chrome.extension.onConnect.addListener(function(port){
  console.log("Connected to Popup");
  console.assert(port.name == "LOGGERCHANNEL");


  port.onMessage.addListener(function(msg){
    console.log('Background got message:', msg);
  });
});

这完全正常，但是，我对如何为sendMessage完成background.js函数感到茫然。理想情况下，我想在某个事件发生时sendMessage('hello from bg')做什么？这怎么可能？

其次，正如this answer中所述，我只需使用chrome.extension.getViews()和chrome.extension.getBackgroundPage()即可通过共享变量来完成此任务。

哪种解决此类问题的推荐方法？

Answer 1

我想你正在尝试做类似的事情 - 在背景和弹出窗口之间获取/设置选项。这就是我处理的方式：

popup.js

document.addEventListener('DOMContentLoaded', function () {
  chrome.extension.sendMessage({"msg":"getOptions"}, function(response){
    $('#clientId').val(response.options.clientId);
  });

  $("#setOptions" ).on("click", function(){
    chrome.extension.sendMessage({
      "msg":"saveOptions",
      "options":{ "clientId" : $('#clientId').val() }
    }); //sengMessage
  }); //on

}); //addEventListener

background.js

chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.msg == "getOptions") {
    var options = {
      clientId : localStorage.getItem('clientId') || ""
    };
    sendResponse({"msg" : "setOptions", "options" : options})
  }

在某些情况下，sendResponse无效，即从后台页面读取Cookie时，请改为sendMessage而不是使用它。

何时使用chrome传递消息

1 个答案: