如何使用chrome.runtime将content.js中的listData传递到popup.js

以下基于目前官方推荐的Manifest V3版本实现：

1. 先配置manifest.json基础权限 #

{
  "manifest_version": 3,
  "name": "数据抓取工具",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你实际要注入的目标站点地址
      "js": ["content.js"]
    }
  ],
  "permissions": ["activeTab"]
}

2. 修改content.js代码 #

首先修正你原有代码的循环逻辑问题：原有for (let x in [dataImage, dataName])只会循环2次，无法遍历所有列表项，调整后加入消息监听逻辑：

var dataImage: any = document.getElementsByClassName("image");
var dataName: any = document.getElementsByClassName("name");
var dataJobTitle: any = document.getElementsByClassName("title");

var listData: Array<any> = [];

// 修正循环逻辑，以节点列表长度为遍历上限
for (let x = 0; x < dataImage.length; x++) {
  const image = dataImage[x]?.firstElementChild?.src;
  const name = dataName[x]?.innerText;
  const job = dataJobTitle[x]?.firstElementChild?.innerText;
  listData.push({ image: image, name: name, job: job });
}
console.log(listData);

// 监听来自popup的消息请求，返回listData
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'getListData') {
    sendResponse(listData);
  }
});

3. 编写popup相关代码 #

popup.html 基础结构 #

需要提供列表渲染的容器：

<!DOCTYPE html>
<html>
<body>
  <ul id="dataList"></ul>
  <script src="popup.js"></script>
</body>
</html>

popup.js 逻辑实现 #

popup打开时主动向当前活跃tab的content.js请求数据，拿到后渲染为li元素：

document.addEventListener('DOMContentLoaded', async () => {
  // 获取当前活跃tab
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  // 向content.js发送消息请求数据
  chrome.tabs.sendMessage(tab.id, { type: 'getListData' }, (listData) => {
    const listEle = document.getElementById('dataList');
    // 遍历数据渲染li
    listData.forEach(item => {
      const li = document.createElement('li');
      li.innerHTML = `
        <img src="${item.image || ''}" alt="${item.name || '头像'}" width="30">
        <span>${item.name || ''}</span>
        <span>${item.job || ''}</span>
      `;
      listEle.appendChild(li);
    });
  });
});

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