Chrome扩展page action popup发送的消息为何未被content script接收

你提供的消息收发代码逻辑本身没有错误，你遇到的是Chrome扩展开发中非常常见的调试误区。

核心问题原因 #

你误用了popup的独立调试面板查看content script的运行状态：

• content script是注入到普通网页上下文的脚本，它的控制台输出、断点调试都需要在对应网页的F12调试面板中查看，在控制台的「内容脚本」分类下可以找到你的扩展对应的content.js文件，在这里打断点或查看日志才能确认消息是否正常送达。
• popup的调试面板仅能查看popup.js本身的运行状态，完全隔离于网页的content script上下文，自然看不到content.js的接收日志，你之前就是因为这个误区误以为消息没有发送成功。

其他常见排查点 #

如果后续还是遇到类似问题，可以按以下顺序排查：

• 确认manifest.json配置正确：
  • Manifest V2版本：确认content_scripts的matches字段匹配你正在测试的站点，同时声明了对应站点的权限。
  • Manifest V3版本：除了正确配置content_scripts匹配规则，还要在host_permissions中添加对应站点的访问权限，否则content script可能无法正常注入或接收消息。
• 优化消息发送逻辑：你当前的全标签页群发逻辑没有必要，仅需要向当前激活的标签页发送即可，优化后的popup.js代码如下：

function changeYearInfo() {
    let newYearVal = document.getElementById('yearSessions').value;
    // 仅查询当前激活的窗口下的活跃标签页
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.tabs.sendMessage(tabs[0].id, {
            "message": "Year Value Changed",
            "value": newYearVal
        });
    });
}

• 如果存在popup关闭导致消息发送中断的情况，可以给sendMessage添加回调校验发送结果，或者通过background service worker做消息中转。

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