Google Chrome / Firefox no ve salida de extensión en la consola

Estoy intentando probar el código de muestra para la extensión web de los navegadores. Pero, no funciona. Revisé la consola para Google Chrome y también para Firefox. No imprime nada. El siguiente es mi código:

manifest.json :

{ "description": "Demonstrating webRequests", "manifest_version": 2, "name": "webRequest-demo", "version": "1.0", "permissions": [ "webRequest" ], "background": { "scripts": ["background.js"] } } 

background.js :

 function logURL(requestDetails) { console.log("Loading: " + requestDetails.url); } chrome.webRequest.onBeforeRequest.addListener( logURL, {urls: [""]} ); console.log("Hell o extension background script executed"); 

¿Me estoy perdiendo de algo?

Firefox

En Firefox, su código funciona (salidas a la consola), tal como está escrito en la pregunta.

Si no lo está viendo en la consola, probablemente esté mirando la consola equivocada.

Mozilla describe qué salida de extensión se puede ver en qué consola se encuentra en su página de depuración .

Consola del navegador

Deberías estar usando la Consola del navegador . Puede acceder desde Tools➜Web Developer➜Browser Console (atajo de teclado CtrlShiftJ , o CmdShiftJ en Mac).

Caja de herramientas del navegador

Si lo tiene habilitado, también puede usar la consola de la Caja de herramientas del navegador . Puede acceder desde Tools➜Web Developer➜Browser Toolbox (atajo de teclado CtrlAltShiftI ; En una Mac: CmdAltShiftI ).

Add-on Debugger

Para depurar su complemento puede usar el Add-on Debugger. Puede acceder a él a través about:debugging ➞Debug.

Consola web

Usted, probablemente, está mirando la consola web (atajo de teclado F12 ) que está asociada con una sola pestaña. Esto es lo que quiere cuando depura una página web, pero no un complemento. Para un script de contenido que se inyecta en esa pestaña, el resultado de console.log() se mostrará en esta consola. Sin embargo, no verá salida de ninguna otra parte de su complemento (p. Ej., Secuencias de comandos de contenido en otras tabs, scripts de fondo, etc.).

Google Chrome

Mostrar la consola correcta para su extensión es un poco más complejo en Chrome. La salida de la consola aparecerá solo en uno de los múltiples lugares posibles, dependiendo de desde qué contexto se ejecutó console.log() . Cada una de las siguientes DevTools es independiente entre sí y se muestran en ventanas o tabs separadas. La visualización en la pestaña asociada (inferior o lateral) es la predeterminada para las herramientas de desarrollo asociadas con las páginas web y las secuencias de comandos de contenido, porque son específicas de la pestaña. Para la página web / script de contenido DevTools, tiene la opción de que se muestre en su propia ventana separada o atracada dentro de la pestaña (lateral o inferior).

Para su página de fondo

Como explicó Srujan Reddy , debe realizar múltiples selecciones en un menú desplegable para acceder a la página chrome://extensions (o puede escribirla manualmente como la URL o usar un marcador) y luego seleccionar ambas una checkbox (“Modo desarrollador”) y luego haga clic en el enlace “página de fondo”. Luego, debe seleccionar la pestaña “Consola” en la ventana que aparece.

Es mucho más fácil mostrar lo que tienes que hacer:
Mostrar consola para extensión en Google Chrome

Para tus secuencias de comandos de contenido

La salida se mostrará en la consola web normal (en Herramientas de desarrollo web). Puede abrirlo presionando F12 (u otros accesos directos) en la página web en la que se insertó su secuencia de comandos de contenido. Cada consola web solo mostrará el resultado de los scripts inyectados en esa pestaña.

Hacer lo anterior con show the console.* Salida de su extensión, pero dará como resultado que la línea de comandos de JavaScript de la consola, el depurador, etc. estén en el contexto de la página, no el script de contenido.

Si desea utilizar la línea de comandos de JavaScript de la consola en el contexto de las secuencias de comandos de contenido que se inyectan en una página web, debe seleccionar el contexto del script de contenido de su extensión en el menú desplegable en la esquina superior izquierda de la ventana de la Consola. Este menú desplegable normalmente comenzará con el valor “superior”. El menú desplegable tendrá selecciones para cada uno de los contextos del guión de contenido (uno por extensión que tenga scripts insertados).

Para su ventana emergente

Haga clic derecho en el botón de su browserAction y seleccione “Inspeccionar emergente”. Alternativamente, haga clic derecho dentro de la ventana emergente y seleccione “Inspeccionar”. O abrirá DevTools para la página emergente. La ventana emergente se mantendrá abierta en más condiciones de lo normal, pero seguirá cerrada si cambia de pestaña, etc.

Para su página de Opciones

Haga clic derecho dentro del contenido principal de la ventana emergente de Opciones (no la barra de título) y seleccione “Inspeccionar”. Esto abrirá DevTools para la página de opciones.

Para su panel o una página desde su extensión cargada en una pestaña

Cuando el panel o la pestaña están enfocados, puede abrir DevTools presionando F12 (u otros accesos directos), o abriendo el menú contextual (clic con el botón derecho) y seleccionando “Inspeccionar”.

¿Con qué consola estás viendo los registros?

Si está viendo la consola en una pestaña, ese es el lugar equivocado.

Abrir configuración / Extensiones o en un nuevo tipo de pestaña

 chrome://extensions 

Debajo de su extensión, haga clic en el enlace “página de fondo”, que es donde puede ver los registros

** Asegúrate de que el modo desarrollador esté marcado

Sí, para Chrome debes hacer clic en el enlace de la página de fondo mencionado, pero no estará allí a menos que lo configures para que sea persistente:

 "background": { "persistent": true, "scripts": ["background.js"] }