如何实现Chrome扩展内容脚本与React/Next.js应用的跨域通信？

方案一：通过扩展后台脚本中转（Chrome扩展原生方案） #

利用扩展后台脚本作为中间桥梁，连接YouTube页面的内容脚本与React应用标签页：

1. 配置扩展Manifest #

确保manifest.json包含所需权限：

{
  "manifest_version": 3,
  "name": "YouTube Event Forwarder",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js": ["content.js"]
    }
  ],
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["http://localhost:3000/*"] // 替换为你的React应用地址
}

2. 内容脚本发送消息到后台 #

修改YouTube内容脚本content.js，用Chrome扩展API传递事件：

// 检测视频结束事件
document.querySelector('video').addEventListener('ended', () => {
  const videoId = window.location.search.split('v=')[1]?.split('&')[0];
  // 发送事件到后台脚本
  chrome.runtime.sendMessage({
    action: 'videoEnded',
    videoId: videoId
  });
});

3. 后台脚本转发消息到React应用标签页 #

在background.js中接收消息，定位React标签页并注入脚本发送消息：

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'videoEnded') {
    // 查找React应用所在标签页
    chrome.tabs.query({url: "http://localhost:3000/*"}, (tabs) => {
      if (tabs.length > 0) {
        // 在React标签页注入脚本，向应用上下文发送postMessage
        chrome.scripting.executeScript({
          target: {tabId: tabs[0].id},
          func: (eventData) => {
            window.postMessage(eventData, window.location.origin);
          },
          args: [message]
        });
      }
    });
  }
});

4. React应用接收消息 #

保留原监听逻辑，验证消息来源为当前应用：

useEffect(() => {
  const messageListener = (event) => {
    if (event.origin === window.location.origin) {
      if (event.data.action === 'videoEnded') {
        console.log('Video ended in YouTube!', event.data.videoId);
        // 触发应用内操作
      }
    }
  };

  window.addEventListener('message', messageListener);
  return () => window.removeEventListener('message', messageListener);
}, []);

方案二：WebSocket长连接（高实时性场景） #

适合需要频繁通信的场景，通过WebSocket建立扩展与React应用的直接连接：

1. 启动WebSocket服务器 #

用Node.js搭建简单服务（或集成到React后端）：

// server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('Client connected');
});

// 向所有连接的客户端发送消息
function broadcast(message) {
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(message));
    }
  });
}

2. 扩展后台连接WebSocket并转发消息 #

修改background.js：

const ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => console.log('Connected to WebSocket server');

chrome.runtime.onMessage.addListener((message) => {
  if (message.action === 'videoEnded' && ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(message));
  }
});

3. React应用监听WebSocket消息 #

在React组件中直接连接并监听：

useEffect(() => {
  const ws = new WebSocket('ws://localhost:8080');
  
  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.action === 'videoEnded') {
      console.log('Video ended in YouTube!', data.videoId);
      // 触发应用内操作
    }
  };

  return () => ws.close();
}, []);

方案三：Chrome存储监听（轻量无中转方案） #

利用Chrome扩展存储API，让React应用通过注入脚本监听存储变化：

1. 扩展Manifest添加存储权限与React注入脚本 #

{
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js": ["content.js"]
    },
    {
      "matches": ["http://localhost:3000/*"],
      "js": ["react-listener.js"]
    }
  ]
}

2. 内容脚本写入事件到存储 #

修改content.js：

document.querySelector('video').addEventListener('ended', () => {
  const videoId = window.location.search.split('v=')[1]?.split('&')[0];
  chrome.storage.local.set({
    youtubeEvent: { action: 'videoEnded', videoId }
  });
});

3. React监听脚本转发事件 #

创建react-listener.js，监听存储变化并发送到应用上下文：

chrome.storage.onChanged.addListener((changes) => {
  if (changes.youtubeEvent) {
    window.postMessage(changes.youtubeEvent.newValue, window.location.origin);
  }
});

4. React组件接收消息 #

与方案一的React监听逻辑一致。

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