CHROME EXTENSIONS: Comment puis-je exécuter la transmission de message plusieurs fois?

Question 1

Je suis en train de travailler sur un projet qui produit une extension Chrome. Dans un fond de page, j'ai une fonction nommée checkingProcess. Cette fonction est exécutée quand un nouvel onglet est ouvert ou un onglet est mis à jour. (J'ai essayé de rattraper le changement de l'URL ici.)

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

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

Puis, dans la checkingProcess fonction, j'ai quelques fonctions pour la manipulation des données et les appels d'API. Ensuite, j'ai essayé de recevoir un message qui vient de popup. Ce message signifie que le popup a été ouvert par l'utilisateur.

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

Après cela, il envoie une réponse de la fenêtre contextuelle. Dans la fenêtre contextuelle, j'écoute le message et l'utilisation de la réponse dans la fenêtre contextuelle.

 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ı')
    })
  }, [])

Cependant, je me rends compte que ce message n'est exécuté qu'une fois, mais j'ai besoin de l'exécuter plusieurs fois pour accéder aux données en arrière-plan simultanément. Comment puis-je le faire?

Question 2

Votre message n'est envoyé qu'une seule fois, car elle est en cours d'installation dans un React.useEffect avec une liste vide de dépendances. Cela signifie que ce code ne fonctionnera une fois lors de votre composant est monté. Si vous voulez l'exécuter "à plusieurs reprises" vous devez d'abord définir ce que cela signifie? Des exemples sont:

L'exécution de sendMessage après qu'un utilisateur effectue une action, par exemple en cliquant sur un bouton. Dans ce cas, vous n'avez pas besoin useEffect. Au lieu de cela, fils d'un gestionnaire d'événement pour que bouton et effectuer la sendMessage il n'.
L'exécution de sendMessage après re-calcul de votre composant. Retirez simplement le vider la liste des dépendances ([]) à partir de votre useEffect la méthode. Remarque: à utiliser avec prudence. Si vous configurez votre composant dans une manière qui il rend souvent, cela peut rapidement se transformer en une situation où de nombreux appels de l'API sont faites.
L'exécution de sendMessage après un certain état à l'intérieur de votre composant changements. Ajouter cette variable à la liste des dépendances: [loaded]
L'exécution de sendMessage toutes les 10 secondes. Vous aurez envie d'utiliser setInterval au sein de votre useEffect, comme ceci:

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

Votre message n'est envoyé qu'une seule fois, car elle est en cours d'installation dans un React.useEffect avec une liste vide de dépendances. Cela signifie que ce code ne fonctionnera une fois lors de votre composant est monté. Si vous voulez l'exécuter "à plusieurs reprises" vous devez d'abord définir ce que cela signifie? Des exemples sont:

L'exécution de sendMessage après qu'un utilisateur effectue une action, par exemple en cliquant sur un bouton. Dans ce cas, vous n'avez pas besoin useEffect. Au lieu de cela, fils d'un gestionnaire d'événement pour que bouton et effectuer la sendMessage il n'.
L'exécution de sendMessage après re-calcul de votre composant. Retirez simplement le vider la liste des dépendances ([]) à partir de votre useEffect la méthode. Remarque: à utiliser avec prudence. Si vous configurez votre composant dans une manière qui il rend souvent, cela peut rapidement se transformer en une situation où de nombreux appels de l'API sont faites.
L'exécution de sendMessage après un certain état à l'intérieur de votre composant changements. Ajouter cette variable à la liste des dépendances: [loaded]
L'exécution de sendMessage toutes les 10 secondes. Vous aurez envie d'utiliser setInterval au sein de votre useEffect, comme ceci:

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);
}, []);

Je veux que lors de l'utilisation d'ouvrir la popup, il fonctionne à nouveau.

CHROME EXTENSIONS: Comment puis-je exécuter la transmission de message plusieurs fois?

La question

La meilleure réponse

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie