如何在后台脚本和页面（弹出）脚本之间进行通信？答案

【问题标题】：How to communicate between background script and page (popup) script?如何在后台脚本和页面（弹出）脚本之间进行通信？
【发布时间】：2016-10-08 08:06:13
【问题描述】：

如何从页面（弹出）脚本控制后台脚本中的变量？
为了每 10 秒获取一次资源，我在下面的代码中使用了 setTimeout 循环。
但是当我取消选中弹出页面（browser_action）中的复选框时，以下代码不会停止循环。

我希望当我（选中或取消选中）弹出窗口中的复选框时，page_script 将消息发送到后台脚本，如果后台收到 stop_loop 消息，后台脚本将 settimeout_loop_controller 更改为 false 以停止 settimeout 循环。

但是当我点击复选框时，这些代码没有反应。

两个脚本之间如何通信？

let settimeout_loop_controller = true;

function fetching() {
    if (settimeout_loop_controller) { 
    // if 'settimeout_loop_controller become false, the loop will stop.
        fetch("http://url.com/example").then((getval) => { do_something })...  ;
        setTimeout(fetching, 10000);
    } else {
        return;
    }
}

fetching();

chrome.runtime.onMessage.addListener((message) => {
    if message.type === "stop_loop" {
        settimeout_loop_controller = false;
    }
    else if (message.type === "start_loop") {
        settimeout_loop_controller = true;
        fetching();
    }
});

弹出脚本：

let checkbox = document.getElementById("checkbox");

checkbox.onchange((e) => {
    if (checkbox.checked) {
        chrome.runtime.sendMessage({"type": "start_loop"});
    }
    else {
        chrome.runtime.sendMessage({"type": "stop_loop"});
    }
});

【问题讨论】：

请edit 成为主题：包括一个完整 minimal reproducible example 复制问题。通常，包括 manifest.json、一些背景、内容、弹出脚本和 HTML。寻求调试帮助的问题（“为什么这段代码不工作？”）必须包括：►期望的行为，►特定问题或错误和►必要的最短代码重现它在问题本身。没有明确问题陈述的问题对其他读者没有用处。请参阅：“如何创建 minimal reproducible example”、What topics can I ask about here? 和 How to Ask。
我对@987654326@ 的回答提供了一个功能齐全的、在 Firefox 和 Chrome 中经过测试的示例，展示了在选项/弹出页面和后台脚本之间进行通信的四种（有些）不同方式。
之所以需要minimal reproducible example，是因为我们想提供帮助。如果我们不必重新创建复制问题所需的所有代码，那么提供帮助会要容易得多。这是您已经拥有的代码。因此，请帮助我们帮助您并提供一个完整的 minimal reproducible example 以重复此类问题的问题。如果没有minimal reproducible example，甚至开始帮助您所需的努力量很多更高，这显着减少了愿意/能够帮助您的人数。即使我们付出了额外的努力，我们也必须猜测您可能遇到的问题的很大一部分。

标签： javascript firefox-addon-webextensions

【解决方案1】：

页面脚本中不存在chrome.runtime.sendMessage API，但可以在内容脚本中访问。典型用法是页面脚本使用window.postMessage({"type": "stop_loop"},"*")向内容脚本发布消息，然后在内容脚本中转发消息。
对于 Firefox 49 及更新版本，您可以Sharing objects with page scripts。例如，您可以先在内容脚本中定义一个函数notify()和exportFunction(notify, window, {defineAs:'notify'});。页面脚本将能够调用window对象中暴露的函数。

window.notify("来自页面脚本的消息！");

【讨论】：