Chrome扩展消息传递无响应求助：popup.js未收到content script回复

嘿，我仔细看了你的代码，发现控制台能打出Sending response但Popup的回调没反应，大概率是Popup窗口在响应返回前就关闭了！

你想啊，Popup是个临时窗口，点击按钮后如果用户不小心点了页面其他地方，或者Popup自动收起，那Popup的JavaScript环境直接就销毁了，后面content script返回的响应自然找不到地方触发回调了。

给你两个靠谱的解决办法：

1. 先保持Popup打开测试验证 #

右键点击Popup页面，选择「检查」打开开发者工具——这时候Popup会一直保持打开状态，不会自动关闭。再点击按钮试试，应该就能看到response.farewell的日志了，这样就能确认是不是生命周期的问题。

2. 用Background Script中转消息（推荐长期方案） #

因为Background Script是长期运行在后台的，不会随Popup关闭而销毁，能完美解决这个问题：

第一步：在manifest.json里声明Background Script #

"background": {
  "scripts": ["background.js"]
},

记得确保manifest里已经有必要的权限（比如"tabs"权限，如果需要的话）。

第二步：修改popup.js，把消息发给Background #

let myButton= document.getElementById('myButton');
myButton.onclick = function(){
  // 直接给Background发消息，让它转交给Content Script
  chrome.runtime.sendMessage(
    {type: "forward_to_content", greeting: "hello"},
    function(response) {
      console.log(response.farewell);
    }
  );
};

第三步：编写background.js，负责中转消息 #

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "forward_to_content") {
    // 找到当前活跃标签页
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      // 给Content Script发消息
      chrome.tabs.sendMessage(tabs[0].id, {greeting: request.greeting}, (response) => {
        // 把Content的响应回传给Popup
        sendResponse(response);
      });
    });
    // 必须return true，告诉Chrome要异步调用sendResponse
    return true;
  }
});

额外检查点 #

• 确认你的Content Script已经正确注入到当前页面：可以打开当前页面的开发者工具，在Sources面板里看看有没有你的content script文件，或者console里有没有Message Received的日志（你说已经有了，这步应该没问题）。
• 确认manifest里的content scripts配置的matches规则匹配当前打开的页面，比如：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 或者你需要的特定URL
    "js": ["content.js"]
  }
]

这样改完之后，不管Popup关不关闭，Background都会帮你处理消息传递，Popup也能正常收到响应啦！

内容的提问来源于stack exchange，提问作者user568551