Si eres un usuario de Chrome, es probable que estés usando una o más extensiones. Ya sea para bloquear anuncios o para agregar funciones, las extensiones agregan mucha utilidad al navegador. Entonces, ¿no sería genial si pudieras construir tu propia extensión de Chrome? Eso es exactamente lo que te mostraré aquí.
Consulte también nuestro artículo Las mejores Chromebooks con pantalla táctil
A medida que mantengo sitios web para clientes, me gusta saber cómo funciona cada sitio con respecto a la carga de la página. Como Google ahora usa tiempos de carga en sus cálculos de SEO, saber qué tan rápido o lento se carga una página es una métrica importante al optimizar un sitio. Esto es aún más cierto cuando se optimiza un sitio web para dispositivos móviles. Tiene que ser ligero, rápido y cargar sin ningún error para obtener una puntuación alta en Google.
Además de eso, el hecho de que una persona emprendedora en SitePoint también use el mismo sitio web que yo para verificar las velocidades de página, GTmetrix y ha desarrollado una extensión de Chrome para verificarlo, pensé que haría lo mismo y lo guiaría a través de él.
Extensiones de Chrome
Las extensiones de Chrome son mini programas que agregan funciones al navegador principal. Pueden ser tan sencillos como el que vamos a crear o tan complicados como administradores de contraseñas seguros o emuladores de scripts. Escritos en lenguajes compatibles como HTML, CSS y JavaScript, son archivos independientes que se encuentran junto al navegador.
Por necesidad, la mayoría de las extensiones son simples ejecuciones de clic de íconos que realizan una acción determinada. Esa acción puede ser literalmente cualquier cosa que quieras que Chrome haga.
Crea tu propia extensión de Chrome
Con un poco de investigación, puede ajustar su extensión para hacer lo que quiera, pero me gusta la idea de una verificación de velocidad con un solo botón, así que voy con eso.
Por lo general, cuando verifica la velocidad del sitio, pega la URL de la página en la que se encuentra en GTmetrix, Pingdom o donde sea y presiona Analizar. Solo toma unos segundos, pero ¿no sería bueno si pudieras seleccionar un ícono en tu navegador y hacer que lo haga por ti? Después de trabajar en este tutorial, podrá hacer exactamente eso.
Deberá crear una carpeta en su computadora para mantener todo dentro. Cree tres archivos vacíos, manifest.json, popup.html y popup.js. Haga clic derecho dentro de su nueva carpeta y seleccione Nuevo y archivo de texto. Abra cada uno de sus tres archivos en el editor de texto de su elección. Asegúrese de que popup.html se guarde como un archivo HTML y popup.js se guarde como un archivo JavaScript. Descargue este icono de muestra de Google también solo para los fines de este tutorial.
Seleccione manifest.json y pegue lo siguiente en él:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Use GTmetrix para analizar la velocidad de carga de una página web", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permisos":}
Como puede ver, le hemos dado un título y una descripción básica. También hemos llamado una acción del navegador que incluye el ícono que descargamos de Google que aparecerá en la barra del navegador y popup.html. Popup.html es lo que se llama cuando selecciona el icono de extensión en el navegador.
Abra popup.html y pegue lo siguiente en él.
Analizador de velocidad de páginas usando GTMetrix
Popup.html es lo que se llama cuando selecciona el icono de extensión en el navegador. Le hemos dado un nombre, etiquetado la ventana emergente y agregado un botón. Al seleccionar el botón, se llamará a popup.js, que es el archivo que completaremos a continuación.
Abra popup.js y pegue lo siguiente en él:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = documento; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, falso);}, falso);
No voy a pretender saber JavaScript, por eso fue útil que SitePoint ya tuviera el archivo en su lugar. Todo lo que sé es que le dice a GTmetrix que analice la página en la pestaña actual de Chrome. Donde dice 'chrome.tabs.getSelected', la extensión toma la URL de la pestaña activa y la ingresa en el formulario web. Eso es lo más lejos que puedo llegar.
Probar su extensión de Chrome
Ahora que tenemos el marco básico en su lugar, necesitamos probar para ver cómo funciona.
- Abra Chrome, seleccione Más herramientas y extensiones.
- Marque la casilla junto al modo Desarrollador para habilitarlo.
- Seleccione Cargar extensión desempaquetada y navegue hasta el archivo que creó para esta extensión.
- Seleccione Aceptar para cargar la extensión y debería aparecer en su lista de Extensiones.
- Marque la casilla junto a Habilitado en la lista y el ícono debería aparecer en su navegador.
- Seleccione el icono en el navegador para que aparezca la ventana emergente.
- Seleccione el botón, ¡Verifique esta página ahora!
Debería ver la página que se está verificando y un informe de rendimiento de GTmetrix. Como puede ver en mi propio sitio en la imagen principal, ¡tengo que trabajar un poco para acelerar mi nuevo diseño!
Llevando extensiones hacia adelante
Crear tu propia extensión de Chrome no es tan difícil como parece. Si bien ciertamente ayudó a tener una ventaja al conocer un pequeño código, hay cientos de recursos en línea que lo mostrarán. Además, Google tiene un gran depósito de información, tutoriales y tutoriales que ayudarán. Usé esta página del sitio de desarrolladores de Google para ayudarme con esta extensión. La página lo guía a través de cada parte de la creación de la extensión y proporciona el icono que usamos anteriormente.
Con suficiente investigación, puede crear extensiones que hagan prácticamente cualquier cosa que el navegador sea capaz de hacer. Algunas de las mejores extensiones en la tienda Chrome son de particulares y no de empresas, lo que demuestra que realmente puedes crear la tuya.
Todo el crédito a John Sonmez en SitePoint por la guía original. Hizo el trabajo duro, lo reorganicé un poco y lo actualicé un poco.
¿Has creado tu propia extensión de Chrome? ¿Quieres promocionarlo o compartirlo? Háganos saber a continuación si lo hace!
