javascript - 后台脚本和页面(弹出)脚本之间如何通信？

Question

如何从页面(弹出)脚本控制后台脚本中的变量？
为了每 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"});
    }
});

Answer 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("Message from the page script!");