Si bien YouTube proporciona subtítulos generados automáticamente para videos, otras plataformas como Instagram y Facebook no tienen esa opción. Por lo tanto, si está creando estos subtítulos dentro de la…
Cómo hacer una extensión de cromo (con video)
Recientemente, publiqué Open Multiple Websites, una extensión de Chrome simple que abre todos sus sitios web favoritos con un solo clic. Y sorprendente hacer una extensión de Chrome es más fácil de lo que pensaba. Todo lo que necesita es una comprensión básica de HTML y JavaScript.
Google tiene una documentación detallada sobre cómo crear una extensión de Chrome desde cero. Pero si está buscando una descripción general rápida, esta guía lo ayudará.
¿Qué es la extensión de Chrome?
Es un pequeño programa que agrega una funcionalidad adicional a su navegador Chrome. Por lo general, las extensiones de Chrome aparecen en el lado derecho de su omnibox y muestran una ventana emergente cuando se hace clic en ellas.
¿Qué debe saber antes de comenzar?
Si puede escribir una página web, puede crear una extensión de Chrome en 5 minutos. Sin embargo, para hacer algo útil, debe conocer los conceptos básicos de HTML, CSS, JavaScript y cómo usar la API de Chrome. Aunque, es decir, fácil.
¿Cuánto tiempo se tarda?
Puede tardar desde unas pocas horas hasta unos pocos días, según la complejidad de su extensión. La extensión de Chrome que hice (Abrir varios sitios web) me tomó algunas horas, comenzando desde cero.
¿De qué se compone una extensión de Chrome?
Una extensión de Chrome simple se compone de un archivo de manifiesto, pocos HTML/ Archivos CSS, algunos archivos javascript y algunas imágenes png para capturas de pantalla e íconos. Pones todos estos archivos en una carpeta zip y los subes a Chrome Store.
Una extensión de Chrome simple consta de cuatro archivos:
1. Manifest.json: considérelo como un índice de un libro. Este archivo de manifiesto le dice a Chrome los detalles de su extensión, como su nombre, descripción, número de versión, etc. Está escrito en notación JSON, un lenguaje simple que se puede aprender en menos de 5 minutos.
2. Archivo HTML define el diseño de su página. Por lo general, cuando presiona el botón de extensión, ve una ventana emergente. ¿Correcto? Esta ventana emergente está escrita en HTML y también puede agregar algo de CSS para que se vea mejor.
3. Icono (preferiblemente un png) da identidad a su extensión. Es como el aspecto de su extensión. Si no agrega un ícono, Chrome usará un ícono predeterminado.
4. Javascript file hace toda la magia. Contiene la lógica principal que le dice al navegador qué hacer cuando el usuario hace clic en la extensión.
Cómo crear una extensión de Chrome
#1 Identifica el problema
Descubre qué problema quieres resolver con tu extensión de Chrome.
Por ejemplo, quiero abrir los sitios web que visito con más frecuencia con un solo clic. Pero no pude encontrar ninguna extensión relevante que haga eso. Así que decidí escribir uno. Del mismo modo, es mejor si tienes tu propio problema. Esto lo mantendrá motivado.
#2 Escriba código
Una vez que descubra el problema, es hora de escribir algo de código. Aquí, analizaremos el código utilizado en la extensión de Chrome. Obviamente será diferente para su extensión, esto le dará una buena idea.
Así que abra su editor de texto favorito, cree una nueva carpeta. Llamémoslo ‘extensión de Chrome’. En esta carpeta, agregaremos 4 archivos, es decir, manifest.json, archivo HTML, icon.png y el archivo javascript.
Así que veamos el código de cada uno de ellos.
2.1 Manifest .json
{
"manifest_version": 2, "name": "Open Multiple links", "description": "This extension enables you to open pre defined links in new tabs", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "tabs", "storage" ] }
Aparentemente, Chrome usa la versión ‘2’. Esto está arreglado. Lo siguiente es el nombre, la descripción y la versión de su extensión. Para comprender la acción y el permiso del navegador, deberá consultar la documentación. Sin embargo, puede copiar y pegar el código anterior y cambiar los valores en consecuencia.
2.2 popup.html
<!DOCTYPE html> <html> <head><title>Open Multiple links</title></head>
<body> <script type="text/javascript" src = "popup.js"></script> <p> <center> Paste the links below </center> </p> <hr> <textarea rows = "10" cols = "80" id= "urls"> </textarea> <br> <button type="submit" align="center" style="width:300px;" id="button">Submit</button>
</body> </html>
Aquí está el HTML simple para la ventana emergente. Tiene un área de texto donde el usuario ingresará todas las URL y un botón de envío. Tenga en cuenta que también hemos utilizado una etiqueta de identificación aquí para que podamos acceder a estos elementos desde cualquier lugar.
2.3 icon.png
Utilice Photoshop o esta herramienta en línea para crear un icono png personalizado para su extensión . Se recomiendan 32*32 o 64*64 píxeles. Hice este.
2.4 popup.js // open pages in new tabs function loadUrls() { // fetch urls from textarea and split it var urls = document.getElementById('urls').value.split('n'); // run a loop on the fetched urls for(var i=0; i<urls.length; i++){ // remove the white space from the url cleanUrl = urls[i].replace(/s/g, ''); // if user input valid urls then open pages if(cleanUrl != '') { chrome.tabs.create({"url": cleanUrl, "selected": false}); } // if user input no url else { document.getElementById('urls').innerHTML = "No value spec ified"; } } } // Save url in chrome storage function saveUrls() { // Fetch urls from textarea and split it var urls = document.getElementById('urls').value.split('n'); var urlsContainer = ""; // run a loop on the fetched urls for (i=0; i<urls.length; i++) { // if the user input valid urls, save it in local chrome storage if(urls[i] != ' ') { urlsContainer += urls[i] + 'n'; localStorage['urls'] = urlsContainer; } } } document.addEventListener('DOMContentLoaded', function () { // add an event listener to load url when button is clicked document.getElementById('button').addEventListener('click', loadUrls); // add an event listener to save url when button is clicked document.getElementById('button').addEventListener('click', saveUrls); // reload the urls in the browser var urls = localStorage['urls']; if (!urls) { return; } document.getElementById('urls').value = urls; });
El código anterior se explica por sí mismo con la ayuda de los comentarios. Básicamente, lo que estamos haciendo aquí es usar dos funciones, una ‘saveUrl’ que almacenará todas las entradas del usuario en el almacenamiento de Chrome y ‘loadUrl’ las abrirá en una nueva pestaña cuando se haga clic en el botón.
#3 Publique la extensión
Para probar su extensión en Chrome localmente, active el modo de desarrollador en la página de extensiones de Chrome, luego arrastre y suelte esta ‘extensión de Chrome’ allí.
Una vez que haya terminado de solucionar el problema, puede subir su extensión a Chrome Store para que todos puedan verla.
Para hacer esto, diríjase al panel de desarrolladores de Chrome y cree una cuenta. Tendrá que pagar tarifas únicas de $ 5 a Chrome. Luego cargue su extensión de Chrome e ingrese los detalles y algunas capturas de pantalla. Y eso es. Presiona el botón de publicar y tu extensión estará activa.
Mira este videotutorial paso a paso
