CHROME -РАСШИРЕНИЯ: Как я могу запускать передачу сообщений несколько раз?

Question 1

Я работаю над проектом, который создает расширение 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ı')
    })
  }, [])

Однако я понимаю, что этот процесс отправки сообщений выполняется только один раз, но мне нужно запустить его несколько раз, чтобы одновременно получить доступ к данным в фоновом режиме. Как я могу это сделать?

Question 2

Ваше сообщение отправляется только один раз, потому что в настоящее время оно настроено в 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);
}, []);

Martin Devillers · Answer 1 · 2021-11-22T13:42:25

Ваше сообщение отправляется только один раз, потому что в настоящее время оно настроено в 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);
}, []);

Я хочу, чтобы при использовании всплывающего окна "Открыть" оно снова работало.

CHROME -РАСШИРЕНИЯ: Как я могу запускать передачу сообщений несколько раз?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории