Chrome扩展：options.js向background.js发送消息失败问题

核心错误分析 #

你遇到的问题根源在于错误使用了消息发送API：

• tabs.sendMessage是用于向指定标签页的Content脚本发送消息的，而非Background脚本，所以无论是否添加tabs权限，这个方法都不适用Options页与Background的通信。
• 未正确使用chrome.runtime系列API进行扩展内部页面（Options、Popup等）与Background的通信。

正确实现步骤 #

1. 确保Manifest配置正确 #

Manifest V3中需正确声明Options页和Background服务工作者，无需额外tabs权限：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "options_page": "options.html",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": []
}

2. Options页发送消息（options.js） #

使用chrome.runtime.sendMessage发送一次性消息，同时捕获可能的错误：

// 假设页面有一个触发按钮，ID为sendMsgBtn
document.getElementById('sendMsgBtn').addEventListener('click', () => {
  chrome.runtime.sendMessage(
    { action: 'optionsMsg', content: '来自Options页的消息' },
    (response) => {
      // 捕获发送错误
      if (chrome.runtime.lastError) {
        console.error('消息发送失败:', chrome.runtime.lastError.message);
        return;
      }
      console.log('Background响应:', response);
    }
  );
});

3. Background接收消息（background.js） #

通过chrome.runtime.onMessage监听来自扩展内部页面的消息，支持同步/异步响应：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 判断消息类型
  if (message.action === 'optionsMsg') {
    console.log('收到Options消息:', message.content);
    
    // 同步响应
    sendResponse({ status: 'ok', reply: '已接收消息' });

    // 如果需要异步处理（比如调用Chrome API、网络请求），需返回true保持端口打开
    // setTimeout(() => {
    //   sendResponse({ status: 'ok', reply: '异步响应' });
    // }, 1000);
    // return true;
  }
});

常见问题排查 #

1. 消息无响应：检查Background是否正确监听chrome.runtime.onMessage，而非chrome.tabs.onMessage（后者仅接收Content脚本的消息）。
2. DOM未加载完成：确保options.js在HTML body末尾引入，或用DOMContentLoaded包裹代码，避免元素未找到导致事件绑定失败。
3. Service Worker状态：在扩展管理页点击"更新"按钮，确保Background服务工作者已加载最新代码。

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