Chrome扩展开发：如何实现runtime消息传递多次触发运行？

你当前的实现只在popup组件挂载时主动拉取一次后台数据，后台数据更新后没有主动通知popup的机制，所以无法实时同步，可以采用以下两种方案解决：

方案1：基于长连接的主动推送（推荐，实时性最高） #

利用Chrome扩展的chrome.runtime.connect API建立后台和popup的长连接，后台数据更新时主动推送新数据到popup。

第一步：修改后台代码 #

// 全局存储popup连接端口
let popupPort = null;

// 监听popup的连接请求
chrome.runtime.onConnect.addListener((port) => {
  if (port.name === "popup_sync") {
    popupPort = port;
    // 连接建立时先返回一次最新数据
    popupPort.postMessage({
      matches_length: response['matches'].length,
      hostname: host,
    });
    // 监听端口断开，清空存储
    port.onDisconnect.addListener(() => {
      popupPort = null;
    });
  }
});

// 原有checkingProcess函数修改，执行完数据更新后如果popup在线就推送数据
function checkingProcess(tabId) {
  // 原有你的数据处理、API调用逻辑
  // ... 这里执行完已经更新了response和host变量
  
  // 新增：如果popup已连接，主动推送最新数据
  if (popupPort) {
    popupPort.postMessage({
      matches_length: response['matches'].length,
      hostname: host,
    });
  }
}

// 原有tabs事件监听逻辑保留即可
chrome.tabs.onActivated.addListener((activeInfo) => {
  checkingProcess(activeInfo.tabId)
})

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  checkingProcess(tab.id)
})

第二步：修改popup端代码 #

useEffect(() => {
  // 建立和后台的长连接
  const port = chrome.runtime.connect({ name: "popup_sync" });
  // 监听后台推送的消息更新状态
  port.onMessage.addListener((res) => {
    setHostname(res.hostname);
    setMatchesLength(res.matches_length);
    console.log(res.hostname, 'burası');
    console.log(res.matches_length, 'burası');
  });
  // 组件卸载时断开连接
  return () => {
    port.disconnect();
  };
}, []);

方案2：轮询拉取（实现简单，适合对实时性要求不高的场景） #

popup端定时主动拉取后台最新数据，不需要修改后台代码，仅修改popup端代码即可：

useEffect(() => {
  // 定义拉取数据的函数
  const fetchData = () => {
    chrome.runtime.sendMessage({ msg: 'popup_opened' }, (res) => {
      setHostname(res.hostname);
      setMatchesLength(res.matches_length);
      console.log(res.hostname, 'burası');
      console.log(res.matches_length, 'burası');
    });
  };
  // 首次拉取
  fetchData();
  // 每2秒拉取一次，间隔可以根据需求调整
  const timer = setInterval(fetchData, 2000);
  // 组件卸载时清除定时器
  return () => {
    clearInterval(timer);
  };
}, []);

注意事项 #

• 确保后台代码中存储的response和host变量是全局作用域，每次checkingProcess执行后会正确更新这两个变量的值
• 如果你的checkingProcess内部包含异步逻辑（比如API调用），需要确保数据更新完成后再执行推送/返回操作，避免返回旧数据

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