Chrome扩展：点击按钮时从popup.js向content.js传递对象数组与消息

你遇到的问题核心是没有把指令消息和对象数组包装成一个统一的消息对象来发送。Chrome的chrome.tabs.sendMessage其实完全支持传递可序列化的JavaScript对象（包括数组），不需要先手动转成JSON字符串——之前的错误是因为你直接发送了JSON字符串，而content.js里试图访问不存在的message属性导致的。

正确的实现方式 #

我们只需要把指令（比如start_search）和你的searchList数组放在同一个对象里发送，这样content.js就能同时接收两者：

1. Popup.js 发送消息

在点击按钮的事件处理函数里，构造一个包含动作指令和数组的对象，直接发送：

// popup.js 中点击按钮时的代码
document.getElementById('your-button-id').addEventListener('click', () => {
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    const activeTab = tabs[0];
    // 把指令和数组包装成一个对象
    chrome.tabs.sendMessage(activeTab.id, {
      action: 'start_search', // 执行指令
      searchList: searchList  // 你的对象数组
    });
  });
});

2. Content.js 接收消息

在content.js里监听消息，通过判断action字段来识别指令，同时直接获取searchList数组：

// content.js 中的消息监听
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  // 判断是否是我们需要的指令
  if (request.action === 'start_search') {
    // 直接使用传入的searchList数组
    console.log('收到的搜索关键词列表:', request.searchList);
    
    // 遍历数组处理每个对象
    request.searchList.forEach(pair => {
      console.log(`关键词: ${pair.word}, 高亮颜色: ${pair.color}, ID: ${pair.id}`);
      // 这里可以添加你的高亮逻辑
    });
  }
});

为什么之前的方法会失败？ #

你之前直接发送了JSON.stringify(searchList)的结果，这时候content.js里的request参数就是这个JSON字符串本身，而不是一个包含message属性的对象。所以当你执行alert(request.message)时，自然会得到undefined——因为字符串没有message这个属性。

额外说明：手动JSON处理（可选） #

如果你确实需要手动处理JSON序列化（比如有特殊需求），也可以把JSON字符串放在消息对象里传递，然后在content.js里解析：

// popup.js
const jsonSearchList = JSON.stringify(searchList);
chrome.tabs.sendMessage(activeTab.id, {
  action: 'start_search',
  data: jsonSearchList
});

// content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'start_search') {
    const searchList = JSON.parse(request.data);
    // 后续处理逻辑和之前一致
  }
});

不过这种方式多了一步序列化/反序列化，不如直接传递对象简洁。

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