如何将多个 content.js 消息路由到多个 background.js 听众？

Question

我有一个带有 background.js 和 content.js 的 Chrome 扩展名。 content.js 两次向 background.js 发送消息。

目前，当我从 content.js 发送第一个请求时，它会发送到 background.js 中的两个侦听器。我如何告诉请求只转到我想要的后台脚本（所以 articleUrl 转到第一个侦听器，而 articleData 转到第二个侦听器？）

content.js

    chrome.runtime.sendMessage({ "articleUrl": articleUrl }, function (response) {
        console.log("sending articleUrl");
        console.log(response);
    });

button.addEventListener("click", function () {
    chrome.runtime.sendMessage({ "title": title, "image_url": image, "url": url, "snippet": "test" }, function (response) {
        console.log("sending articleData");
        console.log(response);
    });
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("receiving articleUrl");
    console.log(request);
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    console.log("recieving articleData");
    console.log(request);
});

Answer 1

只为消息设置一个侦听器，并根据消息的类型将数据定向到适当的函数。类似于：

content.js

chrome.runtime.sendMessage({ "type": "articleUrl", "articleUrl": articleUrl }, function (response) {
    console.log("sending articleUrl");
    console.log(response);
});

button.addEventListener("click", function () {
    chrome.runtime.sendMessage({ "type": "articleData", "title": title, "image_url": image, "url": url, "snippet": "test" }, function (response) {
        console.log("sending articleData");
        console.log(response);
    });
});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "articleUrl") {
        // Handle articleUrl
    }
    else if (request.type == "articleData") {
        // Handle articleData
    }
});

如何将多个 content.js 消息路由到多个 background.js 听众？

how to route multiple content.js messages multiple background.js listeners?

javascript

message-passing

google-chrome-extension