Las extensiones pueden aprovechar los mismos beneficios de depuración que ofrecen las herramientas para desarrolladores de Chrome para las páginas web, pero tienen propiedades de comportamiento únicas. Convertirse en un depurador de extensiones principal requiere la comprensión de estos comportamientos, cómo funcionan los componentes de la extensión entre sí y dónde corregir 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 están compuestas por muchos componentes diferentes que 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. Haga clic en el botón Cargar sin empaquetar y seleccione el directorio de la extensión que no funciona. Una vez cargada la extensión, esta debería tener tres botones: Details, Remove y Errors 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, el panel de las 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.
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 el nombre de la propiedad requiere una “I” en mayúscula. Actualiza el código para reflejar la llamada correcta. Para ello, 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. Luego, abre la ventana emergente y haz clic en el cuadrado verde. Y... no pasa nada.
Regresa a la página de administración de extensiones y volvió a aparecer el botón Errores. Haz clic en él para ver el registro nuevo.
Uncaught ReferenceError: tabs is not defined
Los errores emergentes también se pueden ver inspeccionando la ventana emergente.
El error tabs is undefined indica que la extensión no sabe dónde insertar la secuencia de comandos de contenido.
Para corregir esto, 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 Clear all, en la esquina superior derecha, y vuelve a cargar la extensión.
Guion del 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. Vuelve a la página de administración de extensiones y... no hay el botón Errores. La causa probable es la secuencia de comandos de contenido, que se ejecuta dentro de la página web.
Abre el panel Herramientas para desarrolladores de la página web que la extensión intenta modificar.
En la página Administración de extensiones, solo se registrarán los errores de entorno de ejecución, console.warning y console.error.
Para usar Herramientas para desarrolladores 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. 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, como la opción para anular páginas 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
La ventana emergente a menudo realizará todas las solicitudes de red necesarias antes de que incluso los desarrolladores más veloces puedan abrir Herramientas para desarrolladores. Para ver estas solicitudes, actualiza desde 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 las cookies, el almacenamiento y XMLHttpRequsts de origen cruzado. Consulta el artículo sobre permisos y las APIs de Chrome disponibles para asegurarte de que una extensión solicita 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. Lee la documentación para obtener más información sobre las herramientas para desarrolladores de Chrome.