如何在 Chrome 扩展程序中将消息从 content.js 传递到 background.js 再到 popup.js？

Question

我想编写一个 Chrome 扩展程序，它本质上必须将信息 (1) 从

content.js

脚本传递到

background.js

，然后将信息发送到外部 Node.js 服务器，然后 (2)

background.js

必须将服务器的响应转发到

popup.js

，以便可以在 popup.html 中显示。每次访问页面时都应该发生此过程。

我实现了信息一路传递到 popup.js，但我每次都使用

chrome.runtime.sendMessage

将信息从内容传递到后台，再从那里传递到弹出窗口，并且在每种情况下我都使用

chrome.runtime.onMessage.addListener

接收消息。但是，popup.js 现在既接收到 content.js 传递到 background.js 的消息，又接收到从 background.js 正确传递到 popup.js 的消息。我只想让 popup.js 收到后一条消息。

这是我的

background.js

代码：

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {

        console.log("received from content.js:\n" + request.content_message);
    
        sendResponse({check: "to content.js: background recieved content_message"});

        fetch('http://localhost:3000/message', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ message: request.content_message})
        })
        .then(response => response.json())
        .then(data => {
            console.log(data.response);

            const to_popup = data.response;

            chrome.runtime.sendMessage({res: to_popup }, function(response) {
                console.log(response.popup_answer);
            });
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }
);

这是我的

popup.js

代码：

chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
  alert(JSON.stringify({request}));

  sendResponse({popup_answer: "to background: popup recieved message"});
});

我将我的代码与此处提供的答案进行了比较。我查了一下在码头传递的消息，上面写着：

如果多个页面正在侦听 onMessage 事件，则只有第一个针对特定事件调用 sendResponse() 的页面才会成功发送响应。对该事件的所有其他响应都将被忽略。

这似乎只能解决回复但没有收到消息的情况。

我想过

让 popup.js 过滤每条消息的发件人，并且仅在发件人处于后台时对其执行某些操作，

1. 在背景和弹出窗口之间创建长期连接。
在我看来，必须有一种更好、更聪明的方法。您对我有什么建议吗？谢谢！

Answer 1

// constants.js
export const backgroundScriptCommands = {
  FETCH_DATA_FROM_SERVER: 'fetch-data-from-server',
  ...
};
export const popupCommands = {
  PRINT_DATA: 'print-data',
  ...
};

// Your content-script.js
chrome.runtime.sendMessage({ type: backgroundScriptCommands.FETCH_DATA_FROM_SERVER });

// Your background-script.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  switch (request.type) {
    case backgroundScriptCommands.FETCH_DATA_FROM_SERVER:
      // do something
  }
});

// Your popup.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  switch (request.type) {
    case popupCommands.PRINT_DATA:
      // do something
  }
});

通过这种方式，您可以了解该消息是发给谁的，并且如果该消息是发给谁的，则无需做出反应，例如 

background-script

。

不过，这里有几点需要注意，

chrome.runtime.onMessage

中的

popup.js

侦听器仅在用户单击弹出图标后才起作用。如果弹出窗口关闭，将停止工作。也许您可以使用

popup.js

来做一些工作，如 @woxxom 在评论中所写，或者只是向

service-worker

→

chrome.runtime.sendMessage({ type: backgroundScriptCommands.FETCH_DATA_FROM_SERVER })

发送消息。此外，如果您尝试从

background-script

向

popup.js

发送消息（如果该消息处于非活动状态），您将收到异常。