CHROME -ESTENSIONI: Come posso eseguire il passaggio di messaggi più volte?

0

Domanda

Sto lavorando su un progetto che produce una estensione di google Chrome. In una pagina di sfondo ho una funzione denominata checkingProcess. Questa funzione viene eseguita quando si apre una nuova scheda o una scheda aggiornata. (Ho provato a prendere il cambio di URL qui.)

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

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

Quindi, in checkingProcess funzione, ho alcune funzioni per la gestione dei dati e chiamate API. Poi ho provato a ricevere un messaggio che proviene da pop-up. Questo messaggio rappresenta che il popup è stato aperto dall'utente.

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

Dopo di che, si invia una risposta al popup. Nella finestra popup, io ascoltare il messaggio e utilizzare la risposta in discesa.

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

Tuttavia, mi rendo conto che questo messaggio di processo viene eseguito solo una volta, ma ho bisogno di eseguire più volte per accedere ai dati in background contemporaneamente. Come posso fare?

1

Migliore risposta

1

Il messaggio viene inviato solo una volta perché è attualmente il programma di installazione in un React.useEffect con un elenco vuoto di dipendenze. Questo significa che questo codice potrà essere eseguito solo una volta quando il componente è montato. Se si desidera eseguire "più volte" è necessario prima definire che cosa significa questo? Esempi sono:

  • L'esecuzione di sendMessage dopo che un utente esegue una certa azione, come il clic di un pulsante. In questo caso non è necessario useEffect. Invece, il filo di un gestore di eventi per il pulsante ed eseguire il sendMessage c'.
  • L'esecuzione di sendMessage dopo la re-rendering del componente. È sufficiente rimuovere il vuoto elenco di dipendenze ([]dal tuo useEffect metodo. Nota: usare con cautela. Se si imposta il componente in modo che ri-rende, spesso, questo può trasformarsi rapidamente in una situazione in cui molti vengono effettuate chiamate API.
  • L'esecuzione di sendMessage dopo qualche stato in un componente cambiamenti. Aggiungere questa variabile per l'elenco delle dipendenze: [loaded]
  • L'esecuzione di sendMessage ogni 10 secondi. Ti consigliamo di utilizzare setInterval all'interno della vostra useEffect, come questo:
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);
}, []);
2021-11-22 13:42:25

Voglio che quando l'uso aprire popup, funziona di nuovo.
Ceren Keklik

In altre lingue

Questa pagina è in altre lingue

Русский
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................