CHROME -EXTENSIONS：如何多次运行消息传递？

IT技术 reactjs typescript google-chrome-extension chrome-extension-manifest-v3
2021-05-09 02:11:54

我正在开发一个生成 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]
  • sendMessage每 10 秒执行一次。你会想要setInterval在你的 中使用useEffect，像这样：
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);
}, []);
其它你可能感兴趣的问题
上一篇如何通过表单外的按钮提交表单？ 下一篇我不明白这个 JavaScript (JSX) 语法中的 &&