每次加载页面时，如何从后台向 Chrome 扩展程序中的弹出窗口发送消息？

Question

我可以通过以下方式从弹出窗口向后台发送消息：

背景.js

chrome.runtime.onMessage.addListener(
  function(request) {
    alert(request.data.subject);
  }
);

弹出窗口.js

chrome.runtime.sendMessage({
  msg: "something_completed", 
  data: {
      subject: "Loading...",
      content: "Just completed!"
  }
});

警报加载正常，但我需要做相反的事情。我希望后台在加载页面时发送 api 调用，并将该 api 调用的结果发送到 popup.js，以便它可以对 DOM 进行更改。当我切换上面的代码时，没有显示任何警报。我的manifest.json：

{
    "name": "example",
    "version": "0.0.1",
    "description": "Chrome Extension's message passing example",
    "browser_action": {
      "default_icon": "images/get_started32.png",
      "default_popup": "popup.html"
    },
    "background": {
      "scripts": ["background.js"]
    },
    "content_scripts":[{
      "matches":["http://*/*", "https://*/*"],
      "js":["popup.js"]
    }],
    "permissions": [
      "background","webRequest","webRequestBlocking","webNavigation","tabs","notifications"
    ],
    "manifest_version": 2
}

Answer 1

从技术上讲，chrome.runtime.sendMessage将向所有扩展页面（包括弹出窗口）发送消息，但这不是通信的组织方式。

请注意，弹出窗口仅在显示时运行，因此如果它被隐藏，则无法接收消息。

假设弹出窗口已经可见，解决方案通常是简单地使用 等待后台脚本的响应return true。

popup.js 发送一条消息：

chrome.runtime.sendMessage({foo: 'bar'}, response => {
  // use the response here
});

后台脚本：

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.foo === 'bar') {
    doSomeProcessing(msg).then(sendResponse);
    return true;
  }
});

function doSomeProcessing(msg) {
  return new Promise(resolve => {
    // do something async
    resolve({data: 123});
  });
}