debugging - google - Depuración de secuencias de comandos de contenido para la extensión de Chrome

debugger for chrome

Question

Preguntas generales

¡Hola! Estoy profundizando en el mundo de las extensiones de Chrome y tengo algunos problemas para bajar el flujo de trabajo general. Parece que Google recientemente ha cambiado a páginas de eventos fuertemente defensores en lugar de mantener todo en background.js y background.html. Participo de esto para decir que debemos pasar la mayoría de la lógica de extensión a un script de contenido.

En el cebador de páginas de eventos de Google , tienen la secuencia de comandos de contenido listada en el archivo manifest.json. Pero en su extensión de ejemplo de página de evento, se chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { }); través de este bloque de código en background.js: chrome.tabs.executeScript(tab.id, {file: "content.js"}, function() { });

¿Cuáles son las ventajas de hacerlo de una manera sobre la otra?

Mi código

Voy hacia adelante con la forma programática de inyectar el script de contenido, como el ejemplo de Google.

manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let''s get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

background.js

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

content.js

console.log(''you/'r in the world of content.js'');
var ans = {};

ans.createSidebar = function() {

    return {
        init: function(){
            alert("why hello there");
        }
    }
}();

ans.createSidebar.init();

Puedo obtener las primeras 3 instrucciones de console.log para que aparezcan en el depurador de la página de fondo. También puedo recibir la alerta de content.js para que aparezca en cualquier sitio web. Pero no puedo ver console.log desde content.js, ni puedo ver ninguno de los JS de content.js. Intenté buscar en la sección "secuencias de comandos de contenido" de la pestaña Fuentes del depurador de la página de fondo. Algunas otras publicaciones sobre SO han sugerido agregar debugger; declaraciones para que se muestre, pero no estoy teniendo suerte con nada. La solución más cercana que he visto es esta publicación , pero se hace al enumerar el script de contenido en el manifiesto.

Cualquier ayuda sería apreciada. ¡Gracias!

Answer 1

Los mensajes de console.log de los scripts de contenido se muestran en la consola de la página web en lugar del inspector de la página de fondo.

Agregar debugger; funciona si se abre la Herramienta de desarrollador (para la página web donde se inyecta su secuencia de comandos de contenido).

Por lo tanto, en este caso, primero debe activar Developer Tool (de la página web) antes de hacer clic en el ícono de acción del navegador y todo debería funcionar bien.

Answer 2

Intenté usar el método del debugger , pero no funciona bien porque el proyecto usa require.js para agrupar archivos de JavaScript.

Si también está utilizando require.js para el desarrollo de la extensión de Chrome, puede intentar agregar algo como esto a la base de código, Y cambie eval(xhr.responseText) a eval(xhr.responseText + "/n//@ sourceURL=" + url); . (como esta pregunta )

Luego puede ver el archivo fuente en su herramienta de desarrollo (pero no en la ventana html de fondo)