时间戳

首页 > 解决方案 > chrome 扩展中的背景和内容脚本之间难以传递消息

javascript - chrome 扩展中的背景和内容脚本之间难以传递消息

问题描述

我正在尝试从内容脚本向后台脚本发送消息，并发送响应作为回报。

这是我在后台脚本中得到的： 

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log("Message received");
    if(request.activeStatusRequest == "disable"){
      sendResponse({activeStatusUpdate: "disable"});
    }else if(request.activeStatusRequest == "enable"){
      sendResponse({activeStatusUpdate: "enable"});
    }
    return true;
});

这是我的内容脚本中的内容： 

printReviews.onclick = function(element) {
  if(printReviews.classList.contains("activeButton")){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: `${injectionLiteralGETURL}`}
        );
    });

    toggleClasses(printReviews, "activeButton", "inactiveButton");

    chrome.runtime.sendMessage({activeStatusRequest: "disable"}, function(response){
      console.log("response received");
      console.log(response.activeStatusUpdate);
    });
  }
  else {
    toggleClasses(printReviews, "inactiveButton", "activeButton");
    chrome.runtime.sendMessage({activeStatusRequest: "enable"}, function(response){
      console.log("response received");
      console.log(response.activeStatusUpdate);
    });
  }
  };

上述代码的其余部分按预期工作，除了内容脚本中没有控制台日志运行。但是，后台脚本中的控制台日志确实会运行。有人对我做错了什么有任何想法吗？

标签： javascriptgoogle-chromegoogle-chrome-extension

解决方案

如果你想尝试另一种方法，你可以尝试在内容脚本中添加一个监听器

内容.js

    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        console.log("Message received  from background", response.type, response.activeStatusUpdate);
        switch(request.type){
            case 'SomeFirstAction'
                break;

            case 'SomeSecondAction'
                break;
        }

    });

背景.js

    chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        console.log("Message received");
        if(request.activeStatusRequest == "disable"){
          sendMessageToCurrentTab({type: 'SomeFirstAction', activeStatusUpdate: "disable"});
        }else if(request.activeStatusRequest == "enable"){
          sendMessageToCurrentTab({type: 'SomeSecondAction', activeStatusUpdate: "enable"});
        }
        // return true; -> not needed with that method
    });


    function sendMessageToCurrentTab(message){
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, message);
        }
    }

要玩弹出/背景/内容脚本之间的回调，我更喜欢只玩消息，因为在使用 sendResponse 时，它​​的工作方式会打开一个端口进行通信，但如果有什么变化（标签关闭，弹出关闭），您将遇到错误，因为该端口也将被关闭。使用“全发消息方式”，后台需要明确定位到receiver tab。

我还建议您使用类型或某些独特的动作属性，因为所有侦听器都会侦听所有动作。它将识别操作及其目的。这里我只是在内容脚本中使用了一个开关，但后台可以使用相同的逻辑。

也许这不是最好的做事方式，但对我来说效果很好。

希望这可以帮到你

推荐阅读