Las extensiones pueden aprovechar los mismos beneficios de depuración que Chrome DevTools proporciona para las páginas web, pero tienen propiedades de comportamiento únicas. Para convertirte en un depurador de extensiones maestro, debes comprender estos comportamientos, cómo funcionan los componentes de la extensión entre sí y dónde ubicar los errores. En este instructivo, se proporciona a los desarrolladores una comprensión básica de las extensiones de depuración.
Cómo ubicar los registros
Las extensiones están compuestas por 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 cargar la extensión, 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, puedes abrir el panel de Chrome DevTools 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 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 de developer.chrome.com, 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. Volverá a aparecer el botón Errores. Haz clic en él para ver el registro nuevo.
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 del 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 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 un botón 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 alterar.
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. 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 la extensión
Los registros de las páginas de extensión que se muestran como una pestaña, 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 realizará todas las solicitudes de red requeridas antes de que incluso el desarrollador más rápido pueda abrir DevTools. Para ver estas solicitudes, actualiza desde el panel de red. Se volverá a cargar la ventana emergente sin cerrar el panel de DevTools.
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 las solicitudes XMLHttpRequsts 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 manifest.
{
"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 Desarrollo y depuración. Para obtener más información sobre DevTools de Chrome, lee la documentación.