React Chrome扩展：如何从background.js向React组件传递数据

方法1：Chrome消息传递API #

Background（Service Worker）与Content Script属于隔离上下文，消息传递是最直接的跨上下文通信方式。

1. Background侧发送数据 #

当Background获取到API数据后，向匹配的标签页发送消息：

// background.js
async function fetchAndDispatchData() {
  const apiResponse = await fetch('目标API地址');
  const apiData = await apiResponse.json();
  
  // 获取所有匹配<all_urls>的标签页
  const tabs = await chrome.tabs.query({ url: '<all_urls>' });
  tabs.forEach(tab => {
    chrome.tabs.sendMessage(tab.id, { type: 'EXTENSION_API_DATA', payload: apiData });
  });
}

// 可在扩展启动或触发条件时执行
fetchAndDispatchData();

2. React组件侧监听消息 #

在React根组件中添加消息监听，接收并更新组件状态：

// src/App.js（React项目中）
import { useEffect, useState } from 'react';

export default function App() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    const handleBackgroundMessage = (message) => {
      if (message.type === 'EXTENSION_API_DATA') {
        setApiData(message.payload);
      }
    };

    // 注册消息监听
    chrome.runtime.onMessage.addListener(handleBackgroundMessage);

    // 组件卸载时清理监听
    return () => {
      chrome.runtime.onMessage.removeListener(handleBackgroundMessage);
    };
  }, []);

  return (
    <div className="app-container">
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}</pre>
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  );
}

方法2：Chrome存储API #

若数据需要持久化或多上下文共享，可使用Chrome的本地存储API实现数据同步。

1. Background侧存储数据 #

获取API数据后存入Chrome本地存储：

// background.js
async function fetchAndStoreData() {
  const apiResponse = await fetch('目标API地址');
  const apiData = await apiResponse.json();
  
  await chrome.storage.local.set({ extensionApiData: apiData });
}

fetchAndStoreData();

2. React组件侧读取并监听存储变化 #

读取初始数据并监听存储更新，实时同步到组件状态：

// src/App.js（React项目中）
import { useEffect, useState } from 'react';

export default function App() {
  const [apiData, setApiData] = useState(null);

  useEffect(() => {
    // 加载初始存储数据
    async function loadStoredData() {
      const stored = await chrome.storage.local.get('extensionApiData');
      if (stored.extensionApiData) {
        setApiData(stored.extensionApiData);
      }
    }

    loadStoredData();

    // 监听存储变化
    const handleStorageUpdate = (changes, area) => {
      if (area === 'local' && changes.extensionApiData?.newValue) {
        setApiData(changes.extensionApiData.newValue);
      }
    };

    chrome.storage.onChanged.addListener(handleStorageUpdate);

    return () => {
      chrome.storage.onChanged.removeListener(handleStorageUpdate);
    };
  }, []);

  return (
    <div className="app-container">
      {apiData ? (
        <pre>{JSON.stringify(apiData, null, 2)}</pre>
      ) : (
        <p>数据加载中...</p>
      )}
    </div>
  );
}

必要权限配置 #

在manifest.json中添加对应权限：

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

• storage权限用于方法2的存储操作；
• tabs权限用于方法1中查询匹配标签页；
• 消息传递无需额外权限，但需确保标签页匹配规则与Content Script的matches一致。

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