reactjs - CHROME - 扩展程序：我如何多次运行消息传递？

我正在做一个项目，该项目会生成一个 Chrome 扩展。在后台页面中，我有一个名为 checkingProcess 的函数。当新标签页打开或标签页更新时，会执行此函数。（我尝试在这里捕捉 URL 的变化。）

chrome.tabs.onActivated.addListener((activeInfo) => {
  checkingProcess(activeInfo.tabId)
})

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

然后，在checkingProcess函数中，我有一些用于数据处理和API调用的函数。然后我尝试接收来自弹出窗口的消息。这个消息表示弹出窗口是由用户打开的。

 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.msg === 'popup_opened') {
      sendResponse({
        matches_length: response['matches'].length,
        hostname: host,
      })
    }
    chrome.runtime.lastError
  })

之后，它向弹出窗口发送响应。在弹出窗口中，我监听消息并在弹出窗口中使用该响应。

 useEffect(() => {
    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ı')
    })
  }, [])

然而，我意识到这个消息处理过程只执行一次，但我需要多次运行它以同时在后台访问数据。我该如何做到这一点？

答案＃1

你的消息只会发送一次，因为它当前设置在一个 React.useEffect 中，并且依赖列表为空。这意味着这段代码只会在组件挂载时运行一次。如果你想让它“多次”运行，你首先需要定义这意味着什么？示例如下：

• 在用户执行某些操作（例如点击按钮）后执行sendMessage。在这种情况下，你不需要useEffect。相反，将事件处理程序连接到该按钮，并在那里执行sendMessage。
• 在你的组件重新渲染后执行sendMessage。只需从你的useEffect方法中移除空的依赖列表（[]）。注意：请谨慎使用。如果你的组件设置为经常重新渲染，这可能很快导致发出大量 API 调用的情况。
• 在组件中的某些状态变化后执行sendMessage。将此变量添加到依赖列表中：[loaded]
• 每隔 10 秒执行一次 sendMessage。你会想要在你的 useEffect 中使用 setInterval，像这样：

useEffect(() => {
  const interval = setInterval(() => {
    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ı')
    })
  }, 10000);
  return () => clearInterval(interval);
}, []);