Chrome扩展侧边栏向内容脚本发消息失败：连接问题排查

1. 内容脚本匹配规则缺失协议头 #

你的manifest.json中content_scripts的matches字段格式错误，缺少HTTP/HTTPS协议前缀，导致内容脚本无法被注入到目标页面，自然不存在消息接收端。

原错误配置：

"matches": ["www.pageurl.com/*"]

修复后（兼容HTTP和HTTPS，或根据目标网站实际协议选择）：

"matches": ["*://www.pageurl.com/*"]

2. 内容脚本命名混淆（非功能性问题，建议修正） #

你将内容脚本命名为background.js，但它并非后台脚本，容易造成概念混淆。建议重命名为content.js，同时同步更新manifest.json中的路径：

"js": ["./utilities/content.js"]

3. 消息发送的健壮性优化（可选） #

chrome.tabs.sendMessage在Manifest V3中返回Promise，当前代码未处理发送失败的场景，建议添加错误捕获：

document.getElementById("triggerBtn").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
  try {
    await chrome.tabs.sendMessage(tab.id, "TEST");
  } catch (err) {
    console.error("消息发送失败：", err);
    // 可在此提示用户当前页面不支持该扩展
  }
});

验证步骤 #

1. 修改manifest.json后，在Chrome扩展管理页面点击「重新加载」更新扩展。
2. 打开目标页面www.pageurl.com，通过页面控制台确认内容脚本已注入。
3. 打开侧边栏勾选复选框，查看控制台是否成功接收消息。

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