如何实现Chrome扩展向Electron应用发送并同步浏览器标签页列表？

首先确认你的思路是对的：Electron 无法直接读取 Chrome 的标签页数据，必须通过 Chrome 扩展作为中间层来获取并传递数据，以下是具体实现方案：

一、Chrome 扩展与 Electron 应用的通信（Native Messaging 方案） #

Chrome 扩展和桌面应用通信最稳定的方式是官方提供的 Native Messaging，通过标准输入输出（stdio）实现双向通信，步骤如下：

1. 配置 Chrome 扩展的 manifest.json #

需要声明获取标签页、原生消息传递的权限：

{
  "manifest_version": 3,
  "name": "标签页同步工具",
  "version": "1.0",
  "permissions": ["tabs", "nativeMessaging"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"]
}

2. 扩展端实现标签页获取与消息发送（background.js） #

编写获取标签页列表、发送数据到 Electron 的逻辑：

// 获取所有标签页的URL和ID
async function getTabList() {
  const tabs = await chrome.tabs.query({});
  return tabs.map(tab => ({ url: tab.url, id: tab.id }));
}

// 发送数据到Electron应用
async function sendToElectron() {
  const tabData = await getTabList();
  // 这里的主机名要和后续注册的Native Messaging主机名完全一致
  const hostName = "com.your.electron.tab.app";
  
  try {
    await chrome.runtime.sendNativeMessage(hostName, {
      type: "tab_sync",
      data: tabData
    });
  } catch (err) {
    console.error("发送失败:", err);
  }
}

3. Electron 端处理 Native Messaging 消息 #

Electron 主进程需要监听标准输入，解析 Chrome 发送的二进制协议（Native Messaging 要求消息前带4字节小端长度前缀）：

const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
let buffer = Buffer.from('');

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();
  
  // 处理Chrome扩展发送的消息
  process.stdin.on('data', (data) => {
    buffer = Buffer.concat([buffer, data]);
    
    // 按Native Messaging协议解析：先读4字节长度，再读对应长度的JSON数据
    while (buffer.length >= 4) {
      const dataLength = buffer.readUInt32LE(0);
      if (buffer.length >= 4 + dataLength) {
        const messageBuffer = buffer.slice(4, 4 + dataLength);
        buffer = buffer.slice(4 + dataLength);
        
        try {
          const message = JSON.parse(messageBuffer.toString('utf8'));
          if (message.type === 'tab_sync') {
            // 可将数据转发到渲染进程展示
            mainWindow.webContents.send('tab_update', message.data);
            console.log('收到标签页数据:', message.data);
          }
        } catch (err) {
          console.error('解析消息失败:', err);
        }
      } else {
        // 数据不完整，等待下一次输入
        break;
      }
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

4. 注册 Native Messaging 应用 #

需要在系统中注册你的 Electron 应用，让 Chrome 能识别它：

• Windows：在注册表中添加项 HKEY_CURRENT_USER\Software\Google\Chrome\NativeMessagingHosts\com.your.electron.tab.app，默认值指向一个 JSON 配置文件，内容如下：

  {
    "name": "com.your.electron.tab.app",
    "description": "接收Chrome标签页数据的Electron应用",
    "path": "C:\\你的Electron应用路径\\app.exe",
    "type": "stdio",
    "allowed_origins": ["chrome-extension://你的扩展ID/"]
  }
  

• Mac：创建文件 ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/com.your.electron.tab.app.json，内容同上，path 改为 Electron 应用的可执行文件路径。
• Linux：创建文件 ~/.config/google-chrome/NativeMessagingHosts/com.your.electron.tab.app.json，内容同上。

注：扩展ID可在Chrome扩展管理页面（开启开发者模式）查看。

二、实时监听标签页变化 #

在扩展的 background.js 中监听 Chrome 标签页的相关事件，触发时自动发送数据：

// 监听新标签页创建
chrome.tabs.onCreated.addListener(() => sendToElectron());

// 监听标签页关闭
chrome.tabs.onRemoved.addListener(() => sendToElectron());

// 监听标签页URL更新（仅当URL变化时触发）
chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
  if (changeInfo.url) sendToElectron();
});

// 扩展安装/更新时，主动发送一次初始数据
chrome.runtime.onInstalled.addListener(() => sendToElectron());

测试步骤 #

1. 把扩展文件夹加载到 Chrome（扩展管理页面 → 加载已解压的扩展程序）。
2. 按系统要求完成 Native Messaging 应用的注册。
3. 运行 Electron 应用，操作 Chrome 标签页（新建、关闭、修改URL），查看 Electron 控制台是否收到数据。

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