Tengo un script de contenido que modifica el DOM en función de la URL actual.

Mi script de fondo escucha chrome.webNavigation.onHistoryStateUpdated y envía un mensaje al script de contenido con la URL actual:

 chrome.webNavigation.onHistoryStateUpdated.addListener(onNavigation, { url: ... }); async function onNavigation(details) { const { url, tabId } = details; chrome.tabs.sendMessage(tabId, { id: 'my-msg-id', url }); }

Luego, según la URL, el script de contenido inyecta un cierto div en la página actual:

 chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => { if (message.id === 'my-msg-id' && message.url === '...') { await injectDiv(); } ... });

Mi problema es que, a veces, el mismo div se inyecta dos veces en el DOM.

Esto parece una condición de carrera que sucede:

1. Cuando la página carga lentamente.
2. Cuando el usuario navega rápidamente entre urls o va y viene entre páginas.

Lo que he probado:

1. Envolviendo la lógica de inyección con un protector como este:

 async function injectDiv() { if (document.getElementById('my-div-id')) { return; } const myDiv = document.createElement('div'); myDiv.id = 'my-div-id'; ... // Some async code that waits until the container is loaded to the DOM using setInterval const container = document.querySelector('div.container'); container.appendChild(myDiv); }

2. Uso throttle para limitar los activadores de URL enviados desde la secuencia de comandos de fondo a la secuencia de comandos de contenido:

 const throttledNav = throttle(onNavigation, 2000, { leading: true, trailing: true }); chrome.webNavigation.onHistoryStateUpdated.addListener(throttledNav, { url: ... });

Parece que ayudó en la mayoría de los casos, pero todavía recibo una inyección DOM duplicada (o incluso triple) de mi div de vez en cuando, lo que hace que mi extensión parezca muy defectuosa.

¿Qué puedo hacer para arreglar esto?