React开发Chrome扩展：从后台脚本向React组件传递当前页面URL

以下是几种可行的方式，将background.js中获取的当前YouTube视频URL传递到React组件的getStrigifiedVideoTranscript()函数中：

方案1：使用Chrome.runtime消息通信（推荐，实时性高） #

适合React组件在popup或侧边栏中使用的场景，由组件主动向background.js请求当前标签页的URL。

步骤1：在background.js中添加消息监听 #

// background.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'FETCH_CURRENT_YOUTUBE_URL') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const activeTab = tabs[0];
      if (activeTab?.url?.includes('youtube.com/watch')) {
        sendResponse({ url: activeTab.url });
      } else {
        sendResponse({ error: '当前页面不是YouTube视频页' });
      }
    });
    // 异步响应需返回true保持通信通道
    return true;
  }
});

步骤2：在React组件中调用并获取URL #

// React组件文件
async function getStrigifiedVideoTranscript() {
  try {
    const response = await chrome.runtime.sendMessage({ type: 'FETCH_CURRENT_YOUTUBE_URL' });
    
    if (response.error) {
      console.error(response.error);
      return;
    }
    
    const videoUrl = response.url;
    // 此处执行YouTube API字幕获取、ChatGPT问答逻辑
    // ...
  } catch (err) {
    console.error('获取当前URL失败:', err);
  }
}

方案2：通过Chrome.storage.local共享数据 #

适合需要持久化URL或组件与background无需实时通信的场景，background将URL存入本地存储，React组件直接读取。

步骤1：background.js存储URL #

// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.includes('youtube.com/watch')) {
    chrome.storage.local.set({ currentYoutubeVideoUrl: tab.url });
  }
});

步骤2：React组件读取存储的URL #

// React组件文件
async function getStrigifiedVideoTranscript() {
  try {
    const storageResult = await chrome.storage.local.get('currentYoutubeVideoUrl');
    const videoUrl = storageResult.currentYoutubeVideoUrl;
    
    if (!videoUrl) {
      console.error('未找到有效YouTube视频URL');
      return;
    }
    
    // 此处执行后续逻辑处理
    // ...
  } catch (err) {
    console.error('读取存储URL失败:', err);
  }
}

方案3：background主动推送URL至Content Script（适合注入页面的React组件） #

如果React组件作为Content Script注入到YouTube页面中，background可在页面加载完成后主动推送URL。

步骤1：background.js推送URL #

// background.js
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.includes('youtube.com/watch')) {
    chrome.tabs.sendMessage(tabId, {
      type: 'YOUTUBE_VIDEO_URL',
      url: tab.url
    });
  }
});

步骤2：React组件监听并保存URL #

// React组件文件
import { useState, useEffect } from 'react';

function YoutubeChatComponent() {
  const [currentVideoUrl, setCurrentVideoUrl] = useState('');

  useEffect(() => {
    const handleUrlMessage = (request) => {
      if (request.type === 'YOUTUBE_VIDEO_URL') {
        setCurrentVideoUrl(request.url);
      }
    };
    chrome.runtime.onMessage.addListener(handleUrlMessage);

    // 初始化时主动请求一次，避免页面已加载未收到推送
    chrome.runtime.sendMessage({ type: 'FETCH_CURRENT_YOUTUBE_URL' }, (response) => {
      if (response.url) setCurrentVideoUrl(response.url);
    });

    return () => chrome.runtime.onMessage.removeListener(handleUrlMessage);
  }, []);

  async function getStrigifiedVideoTranscript() {
    if (!currentVideoUrl) {
      console.error('无可用视频URL');
      return;
    }
    // 使用currentVideoUrl执行后续逻辑
    // ...
  }

  return (
    <div>
      {/* 组件UI内容 */}
    </div>
  );
}

权限配置 #

无论使用哪种方案，需在manifest.json中添加对应权限：

{
  "permissions": ["tabs", "storage", "activeTab"],
  "host_permissions": ["https://www.youtube.com/*"]
}

内容的提问来源于stack exchange，提问作者Taimur Hassan Sarmad