Estoy creando una extensión de Chrome simple que hace algo al cargar. Leí que puede ser más eficiente y mejor en general usar chrome.webNavigation.onCompleted en lugar de chrome.tabs.onUpdated. No estoy seguro exactamente por qué, pero también estoy usando un filtro porque solo necesito esta extensión para trabajar en un lugar específico. Pero cuando trato de usar el objeto webNavigation, no funciona. Aquí está mi código:

background.js usando onUpdated (funciona)

 chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete' && tab.active) { chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, { "message": "site_loaded" }, function(response) {}); }); } });

background.js usando webNavigation (no funciona)

 const filter = { url: [ { urlMatches: 'https://example.com/*', }, ], }; chrome.webNavigation.onCompleted.addListener((d) => { console.log("going to send message now"); chrome.tabs.sendMessage( 0 , { "message": "site_loaded" }, function(response) { console.log("response hello",response)} ); }, filter);

contenido.js

 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log("message site loaded received", request.message); if( request.message === "site_loaded" ) { //code } sendResponse(true); return true; });

manifiesto:

 { "name": "nn", "description": "desc", "version": "1.0", "manifest_version": 3, "background": { "service_worker": "background.js" }, "permissions": [ "tabs", "webNavigation" ], "icons": { .... }, "content_scripts": [ { "matches": [ "https://example.com/*" ], "js": ["content.js"] } ] }

Supongo que tengo algo que funciona, pero quería entender por qué no funciona y podría averiguarlo a partir de la documentación.

Editar: en realidad, también noté que en el caso en que dije que funciona, cuando navego por el sitio recibo errores de background.js:

 Unchecked runtime.lastError: The message port closed before a response was received.

que pensé que se solucionó haciendo

 sendResponse(true); return true;

en content.js, pero no lo estaban. Así que no sé cómo hacer que funcione correctamente, supongo. Y los documentos no están ayudando.