React Chrome扩展：Service Worker与App.tsx的数据通信问题求解

问题根源 #

你之前用chrome.tabs.sendMessage是错误的——这个API是给当前标签页的内容脚本发消息的，而你的App.tsx是扩展弹窗的页面，属于独立的popup上下文，两者不是同一个环境，所以会出现「接收端不存在」的错误。另外弹窗只有在用户点击扩展图标时才会渲染，后台触发标签事件时弹窗大概率是关闭状态，直接发消息自然收不到。

可行方案 #

推荐结合Chrome存储API和runtime消息通信来实现，既保证数据持久化，又能在弹窗打开时实时获取最新数据：

1. 配置manifest权限 #

首先在manifest.json里添加storage权限，确保能使用Chrome存储：

{
  "permissions": ["storage", "tabs"]
}

2. Service Worker（后台）代码修改 #

后台监听标签变化，调用接口获取数据后，先存入chrome.storage.local，同时尝试向已打开的弹窗发送消息（如果弹窗处于活跃状态）：

// service-worker.js
async function fetchSiteData(url) {
  // 这里替换成你的后端接口调用逻辑
  const res = await fetch(`你的接口地址?url=${encodeURIComponent(url)}`);
  return res.json();
}

// 处理标签更新
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.url && tab.active) {
    const siteData = await fetchSiteData(changeInfo.url);
    // 存入存储
    await chrome.storage.local.set({ currentSiteData: siteData });
    // 尝试给弹窗发消息（弹窗打开时才能收到）
    chrome.runtime.sendMessage({
      type: "SITE_DATA_UPDATED",
      data: siteData
    }).catch(err => {
      // 弹窗未打开时会报错，忽略即可
      console.log("弹窗未打开，已将数据存入存储");
    });
  }
});

// 处理标签切换
chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const tab = await chrome.tabs.get(activeInfo.tabId);
  if (tab.url) {
    const siteData = await fetchSiteData(tab.url);
    await chrome.storage.local.set({ currentSiteData: siteData });
    chrome.runtime.sendMessage({
      type: "SITE_DATA_UPDATED",
      data: siteData
    }).catch(err => {});
  }
});

3. React弹窗（App.tsx）代码修改 #

弹窗挂载时，先从存储读取已有数据，同时监听存储变化和后台的消息推送：

// App.tsx
import { useEffect, useState } from 'react';

interface SiteData {
  // 定义你的数据结构
  isMatch: boolean;
  data: any;
}

function App() {
  const [siteData, setSiteData] = useState<SiteData | null>(null);

  useEffect(() => {
    // 1. 挂载时从存储读取数据
    const loadStoredData = async () => {
      const result = await chrome.storage.local.get('currentSiteData');
      if (result.currentSiteData) {
        setSiteData(result.currentSiteData);
      }
    };
    loadStoredData();

    // 2. 监听存储变化（后台更新数据时同步）
    const handleStorageChange = (changes: chrome.storage.StorageChange, areaName: string) => {
      if (areaName === 'local' && changes.currentSiteData?.newValue) {
        setSiteData(changes.currentSiteData.newValue);
      }
    };
    chrome.storage.onChanged.addListener(handleStorageChange);

    // 3. 监听后台主动发送的消息
    const handleMessage = (message: any) => {
      if (message.type === 'SITE_DATA_UPDATED') {
        setSiteData(message.data);
      }
    };
    chrome.runtime.onMessage.addListener(handleMessage);

    // 清理监听
    return () => {
      chrome.storage.onChanged.removeListener(handleStorageChange);
      chrome.runtime.onMessage.removeListener(handleMessage);
    };
  }, []);

  return (
    <div className="app">
      {siteData ? (
        siteData.isMatch ? (
          <div>当前网站可处理：{JSON.stringify(siteData.data)}</div>
        ) : (
          <div>当前网站不支持处理</div>
        )
      ) : (
        <div>加载中...</div>
      )}
    </div>
  );
}

export default App;

额外优化：弹窗打开时主动请求最新数据 #

如果担心存储里的数据不是最新的，可以在弹窗挂载时主动向后台请求当前标签的数据：

// 在App.tsx的useEffect里添加
const requestLatestData = async () => {
  const [currentTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  if (currentTab.url) {
    // 向后台发送请求，获取当前标签的最新数据
    const response = await chrome.runtime.sendMessage({
      type: "REQUEST_SITE_DATA",
      url: currentTab.url
    });
    if (response) {
      setSiteData(response);
    }
  }
};
requestLatestData();

然后在Service Worker里添加消息监听：

// service-worker.js
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === "REQUEST_SITE_DATA") {
    const siteData = await fetchSiteData(message.url);
    await chrome.storage.local.set({ currentSiteData: siteData });
    sendResponse(siteData);
  }
  // 注意：异步处理时要返回true
  return true;
});

核心逻辑总结 #

• 用chrome.storage.local作为数据中间层，解决弹窗关闭时后台数据无法留存的问题
• 后台更新数据时，同时尝试给弹窗发消息（弹窗打开时实时更新）
• 弹窗挂载时，优先读取存储数据，同时监听存储和消息，确保数据同步

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