Cómo depurar extensiones

Las extensiones pueden aprovechar los mismos beneficios de depuración que las Herramientas para desarrolladores de Chrome ofrece a la Web con páginas, pero que tienen propiedades de comportamiento únicas. Para convertirse en un depurador de extensión principal, se requiere un comprender estos comportamientos, cómo los componentes de la extensión funcionan entre sí y dónde acomodar entre insectos. En este instructivo, se proporciona a los desarrolladores conocimientos básicos sobre la depuración de extensiones.

Ubica los registros

Las extensiones están formadas por muchos componentes diferentes, que tienen características individuales responsabilidades. Descarga una extensión dañada aquí para comenzar a ubicar los registros de errores de diferentes los componentes de la extensión.

Secuencia de comandos en segundo plano

Navega a la página de administración de extensiones de Chrome en chrome://extensions y asegúrate de usar el modo de desarrollador está activado. Haz clic en el botón Load Unpack y selecciona el directorio de extensiones con errores. Después del la extensión, debería tener tres botones: Details, Remove y Errors en rojo. letras.

Imagen que muestra el botón de error en la página de administración de extensiones

Haz clic en el botón Errores para ver el registro de errores. El sistema de extensiones encontró un problema en el secuencia de comandos en segundo plano.

Uncaught TypeError: Cannot read property 'addListener' of undefined

La página Administración de extensiones muestra un error de secuencia de comandos en segundo plano

Además, el panel Herramientas para desarrolladores de Chrome se puede abrir para la secuencia de comandos en segundo plano seleccionando el vínculo azul junto a Inspeccionar vistas.

Error de secuencia de comandos en segundo plano de Herramientas para desarrolladores

Regresa al código.

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

La secuencia de comandos en segundo plano intenta escuchar el evento onInstalled, pero la propiedad requiere una "I" en mayúscula. Actualiza el código para que refleje la llamada correcta, haz clic en el botón Borrar todo en la esquina superior derecha y, luego, vuelve a cargar la extensión.

Ventana emergente

Ahora que la extensión se inicializa correctamente, se pueden probar otros componentes. Actualiza esta página o abre una nueva pestaña y navega a cualquier página en developer.chrome.com, abre la ventana emergente y haz clic en cuadrado. Y no pasa nada.

Regresa a la página Administración de extensiones, y reapareció el botón Errores. Haz clic para ver el registro nuevo.

Uncaught ReferenceError: tabs is not defined

Error en la ventana emergente que muestra la página Administración de extensiones

Los errores de ventanas emergentes también se pueden ver inspeccionando la ventana emergente.

Error en la ventana emergente que muestra Herramientas para desarrolladores

El error, tabs is undefined, indica que la extensión no sabe dónde insertar la secuencia de comandos de contenido. Para corregir este problema, llama al método tabs.query() y, luego, selecciona la pestaña activa.

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

Actualiza el código, haz clic en el botón Borrar todo de la esquina superior derecha y, luego, vuelve a cargar la .

Guion de contenido

Actualiza la página, abre la ventana emergente y haz clic en el cuadro verde. Y no, el fondo todavía no cambió de color. Regresa a la página Administración de extensiones y... no hay Errores. . La causa más probable es la secuencia de comandos del contenido, que se ejecuta dentro de la página web.

Abre el panel de Herramientas para desarrolladores de la página web que la extensión intenta modificar.

Error de extensión que se muestra en la consola de la página web

Solo se registrarán en las extensiones los errores de tiempo de ejecución console.warning y console.error Página de administración.

Para usar las Herramientas para desarrolladores desde la secuencia de comandos de contenido, haz clic en la flecha desplegable junto a la parte superior y selecciona la extensión.

No se detectó un error de referencia: las pestañas no están definidas.

El error indica que color no está definido. La extensión no debe pasar la variable correctamente. Corrige la secuencia de comandos insertada para pasar la variable de color al código.

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

Pestañas de extensiones

Los registros de las páginas de extensiones que se muestran como una pestaña, por ejemplo, de anular las páginas y de las opciones de página completa en la consola de la página web y en la página de administración de extensiones.

Supervisa las solicitudes de red

La ventana emergente a menudo realiza todas las solicitudes de red necesarias, incluso antes de la instalación los desarrolladores pueden abrir Herramientas para desarrolladores. Para ver estas solicitudes, actualiza desde el panel de red. Si vuelve a cargar la ventana emergente sin cerrar el panel de Herramientas para desarrolladores.

Actualiza dentro del panel de red para ver las solicitudes de red emergentes

Cómo declarar permisos

Si bien las extensiones tienen capacidades similares a las de las páginas web, a menudo necesitan permiso para usar determinadas adicionales, como cookies, almacenamiento y XMLHttpRequsts de origen cruzado. Consulta las artículo sobre permisos y las APIs de Chrome disponibles para garantizar que una extensión solicite los permisos correctos en su manifiesto.

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

Próximos pasos

Para obtener más información sobre cómo depurar extensiones, mira el video Desarrollo y depuración. Más información sobre Herramientas para desarrolladores de Chrome. Para ello, lee la documentación.