Chrome侧边栏向Content Script发消息失败，求解决方案

侧边栏代码（sidepanel-JS） #

chrome.runtime.sendMessage(
    {
      id: 'writeUrl',
      glataUrl: glataUrl.value
    },
    response => {
      console.log(response)
    }
  )

内容脚本代码（content_scripts-JS） #

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  console.log(sender)
  console.log('Message received in content_scripts:', message)
  // 处理消息
  if ((message.id = 'writeUrl')) {
    writeItamGlataUrl(message.glataUrl)
  }
  // 可选地，您可以回复消息
  sendResponse({ response: 'Message received!' })
})

问题描述 #

在侧边栏JS中发送消息时出现报错，提示无法找到接收方，已查阅Chrome扩展官方文档但问题仍未解决，请求排查原因。

排查及修复方案 #

1. 消息发送API使用错误
   chrome.runtime.sendMessage默认是向扩展后台脚本发送消息，而你的接收逻辑在content_scripts中。若要向content_scripts发送消息，需使用chrome.tabs.sendMessage并指定目标tab的ID，修正后的侧边栏代码示例：

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.tabs.sendMessage(
    tabs[0].id,
    { id: 'writeUrl', glataUrl: glataUrl.value },
    response => {
      console.log(response);
    }
  );
});

2. 条件判断语法错误
   content_scripts中的if ((message.id = 'writeUrl'))是赋值操作，不是相等判断，会导致逻辑异常，应改为严格相等判断：

if (message.id === 'writeUrl') {
  writeItamGlataUrl(message.glataUrl)
}

3. 检查content_scripts注入配置
   确认manifest.json中content_scripts的matches规则覆盖当前操作的页面，run_at设置合理（如"document_idle"），确保脚本已成功注入目标页面。

4. 权限配置验证
   若使用chrome.tabs相关API，需在manifest.json中声明"tabs"权限：

{
  "permissions": ["tabs"]
}

5. 重新加载扩展
   修改代码后务必在Chrome扩展管理页重新加载扩展，避免缓存的旧代码导致问题。

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