google chrome extension - para - Google Chrome/Firefox no ve la salida de extensión en la consola

open firefox console

Question

Estoy tratando de 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: ["<all_urls>"]}
);
console.log("Hell o extension background script executed");

¿Me estoy perdiendo de algo?

Answer 1

Firefox

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

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

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

Consola de navegador

Deberías estar usando la consola del navegador . Puede acceder a él desde Tools➜Web Developer➜Browser Console (atajo de teclado Ctrl - Shift - J , o Cmd - Shift - J en Mac).

Caja de herramientas del navegador

Si lo tiene habilitado, también puede usar la consola de Browser Toolbox . Puede acceder a él desde Herramientas➜Desarrollador web➜Browser Toolbox (método abreviado de teclado Ctrl - Alt - Shift - I ; en una Mac: Cmd - Alt - Shift - I ).

Depurador de complementos

Para depurar su complemento, puede usar el depurador de complementos. Sin embargo, puede acceder a él about:debugging ➞Debug.

Consola web

Probablemente, esté mirando la consola web (método abreviado de teclado F12 ) que está asociada con una sola pestaña. Esto es lo que desea al depurar una página web, pero no es 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á resultados de ninguna otra parte de su complemento (por ejemplo, no scripts de contenido en otras pestañas, no 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 se mostrará solo en uno de los múltiples lugares posibles, según el contexto en el que se ejecutó console.log() . Cada una de las siguientes DevTools son independientes entre sí y se muestran en ventanas o pestañas separadas. Mostrar en la pestaña asociada (inferior o lateral) es el valor predeterminado para las DevTools asociadas con páginas web y secuencias de comandos de contenido, ya que son específicas de la pestaña. Para la página web / script de contenido DevTools, tiene la opción de mostrarlo en su propia ventana separada o acoplarse dentro de la pestaña (lateral o inferior).

Para tu página de fondo

Como explicó Srujan Reddy , debe pasar por varias selecciones en un menú desplegable, para acceder a la página de chrome://extensions (o puede escribirlo manualmente como la URL, o usar un marcador) y luego seleccionar ambos una casilla de verificación ("Modo desarrollador") y luego haga clic en el enlace "página de fondo". Luego, debe seleccionar la pestaña "Consola" en la ventana emergente.

Es mucho más fácil mostrar lo que tiene que hacer:

Para sus secuencias de comandos de contenido

La salida se mostrará en la consola web normal (en las Herramientas para desarrolladores web). Puede abrirlo presionando F12 (u otros accesos directos) en la página web en la que se inyectó el script de contenido. Cada consola web solo mostrará el resultado de los scripts inyectados en esa pestaña.

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

Si desea utilizar la línea de comando JavaScript de la consola en el contexto de los scripts 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 "top". El menú desplegable tendrá selecciones para cada uno de los contextos de secuencia de comandos de contenido (uno por extensión que tiene secuencias de comandos inyectadas).

Para su ventana emergente

Haga clic derecho en el botón browserAction su browserAction y seleccione "Inspeccionar browserAction emergente". Alternativamente, haga clic derecho dentro de la ventana emergente y seleccione "Inspeccionar". Cualquiera de los dos abrirá DevTools para la página emergente. La ventana emergente se mantendrá abierta en más condiciones de lo normal, pero aún así se cerrará si cambia de pestaña, etc.

Para su página de Opciones

Haga clic derecho en el contenido principal de la ventana emergente Opciones (no en 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 derecho) y seleccionando "Inspeccionar".

Answer 2

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

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

Configuración abierta / 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úrese de que el modo Desarrollador esté marcado

Answer 3

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

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