Las extensiones pueden aprovechar los mismos beneficios de depuración que proporcionan las Herramientas para desarrolladores de Chrome para las páginas web, pero tienen propiedades de comportamiento únicas. Para convertirse en un experto en la depuración de extensiones, es necesario comprender estos comportamientos, cómo funcionan los componentes de las extensiones entre sí y dónde acorralar los errores. En este instructivo, se brinda a los desarrolladores una comprensión básica de la depuración de extensiones.
Ubica los registros
Las extensiones se componen de muchos componentes diferentes, y estos componentes tienen responsabilidades individuales. Descarga una extensión dañada aquí para comenzar a ubicar los registros de errores de los diferentes 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 que el modo de desarrollador esté activado. Haz clic en el botón Load Unpacked y selecciona el directorio de la extensión dañada. Después de que se cargue la extensión, debería tener tres botones: Detalles, Quitar y Errores en letras rojas.
Haz clic en el botón Errores para ver el registro de errores. El sistema de extensiones encontró un problema en la secuencia de comandos en segundo plano.
Uncaught TypeError: Cannot read property 'addListener' of undefined
Además, puedes abrir el panel de Herramientas para desarrolladores de Chrome para la secuencia de comandos en segundo plano seleccionando el vínculo azul junto a Inspect views.
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 detectar el evento onInstalled, pero el nombre de la propiedad requiere una "I" 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 pestaña nueva y navega a cualquier página en developer.chrome.com, abre la ventana emergente y haz clic en el cuadrado verde. Y… no pasa nada.
Vuelve a la página de administración de extensiones. El botón Errores volvió a aparecer. Haz clic en él para ver el nuevo registro.
Uncaught ReferenceError: tabs is not defined
También puedes inspeccionar la ventana emergente para ver los errores.
El error, tabs is undefined, indica que la extensión no sabe dónde insertar la secuencia de comandos de contenido.
Esto se puede corregir llamando al método tabs.query() y, luego, seleccionando 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 en la esquina superior derecha y, luego, vuelve a cargar la extensión.
Secuencia de comandos de contenido
Actualiza la página, abre la ventana emergente y haz clic en el cuadro verde. Y… no, el fondo aún no cambió de color. Regresa a la página de administración de extensiones y… no hay ningún botón de Errores. Es probable que el culpable sea la secuencia de comandos de contenido, que se ejecuta dentro de la página web.
Abre el panel de DevTools de la página web que la extensión intenta modificar.
Solo se registrarán los errores de tiempo de ejecución, console.warning y console.error, en la página de administración de extensiones.
Para usar DevTools desde la secuencia de comandos de contenido, haz clic en la flecha desplegable junto a top y selecciona la extensión.
El error indica que no se definió color. Es posible que la extensión no esté pasando 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 extensión que se muestran como pestañas, como las páginas de anulación y las opciones de página completa, se pueden encontrar en la consola de la página web y en la página de administración de extensiones.
Supervisa las solicitudes de red
A menudo, la ventana emergente realiza todas las solicitudes de red necesarias incluso antes de que los desarrolladores más rápidos puedan abrir Herramientas para desarrolladores. Para ver estas solicitudes, actualiza el panel de red. Se volverá a cargar la ventana emergente sin cerrar el panel de Herramientas para desarrolladores.
Cómo declarar permisos
Si bien las extensiones tienen capacidades similares a las de las páginas web, a menudo necesitan permiso para usar ciertas funciones, como cookies, almacenamiento y XMLHttpRequest de origen cruzado. Consulta el artículo sobre permisos y las APIs de Chrome disponibles para asegurarte de 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 la depuración de extensiones, mira Developing and Debugging. Obtén más información sobre las Herramientas para desarrolladores de Chrome en la documentación.