Chrome扩展开发：如何从Background.js传数据到App.tsx并获取当前URL

这种方式无需依赖Background，直接在组件内调用Chrome API获取，步骤如下：

1. 配置权限：在manifest.json中添加所需权限，比如"activeTab"或"tabs"：

{
  "permissions": ["activeTab"]
}

2. 在App.tsx中调用API：结合React的useEffect和状态管理，获取并存储当前激活标签页的URL：

import { useState, useEffect } from 'react';

function App() {
  const [currentUrl, setCurrentUrl] = useState<string | null>(null);

  useEffect(() => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs[0]?.url) {
        setCurrentUrl(tabs[0].url);
      }
    });
  }, []);

  return (
    <div className="App">
      {currentUrl ? (
        <p>当前标签页URL：{currentUrl}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

export default App;

如果已经在Background中拿到URL，可通过以下两种方式传递：

方式1：使用Chrome消息API（主动请求/响应） #

• Background端监听消息：

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'GET_CURRENT_URL') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      sendResponse({ url: tabs[0]?.url || null });
    });
    // 异步操作需返回true保持消息通道开放
    return true;
  }
});

• App.tsx端发送请求并接收结果：

import { useState, useEffect } from 'react';

function App() {
  const [currentUrl, setCurrentUrl] = useState<string | null>(null);

  useEffect(() => {
    chrome.runtime.sendMessage({ type: 'GET_CURRENT_URL' }, (response) => {
      if (response?.url) {
        setCurrentUrl(response.url);
      }
    });
  }, []);

  return (
    <div className="App">
      {currentUrl ? (
        <p>当前标签页URL：{currentUrl}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

export default App;

方式2：使用Chrome存储同步URL #

• Background端存储并实时更新URL：

// background.js
// 初始化存储当前URL
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  if (tabs[0]?.url) {
    chrome.storage.local.set({ currentTabUrl: tabs[0].url });
  }
});

// 监听标签页切换，实时更新存储的URL
chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    if (tab.url) {
      chrome.storage.local.set({ currentTabUrl: tab.url });
    }
  });
});

• App.tsx端监听存储变化并更新状态：

import { useState, useEffect } from 'react';

function App() {
  const [currentUrl, setCurrentUrl] = useState<string | null>(null);

  useEffect(() => {
    // 初始化获取存储的URL
    chrome.storage.local.get('currentTabUrl', (result) => {
      if (result.currentTabUrl) {
        setCurrentUrl(result.currentTabUrl);
      }
    });

    // 监听存储变化，实时更新状态
    const handleStorageChange = (changes: chrome.storage.StorageChange, areaName: string) => {
      if (areaName === 'local' && changes.currentTabUrl?.newValue) {
        setCurrentUrl(changes.currentTabUrl.newValue);
      }
    };

    chrome.storage.onChanged.addListener(handleStorageChange);

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

  return (
    <div className="App">
      {currentUrl ? (
        <p>当前标签页URL：{currentUrl}</p>
      ) : (
        <p>加载中...</p>
      )}
    </div>
  );
}

export default App;

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