Recientemente publiqué- Abrir múltiples sitios web, 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 cromo?
Es un pequeño programa que añade una funcionalidad extra a tu navegador Chrome. Por lo general, las extensiones de Chrome aparecen en el lado derecho de su cuadro multifunción y muestran una ventana emergente cuando se hace clic en ellas.
¿Qué debes saber antes de empezar?
Si puede escribir una página web, puede hacer una extensión de Chrome en menos de 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 toma?
Puede tomar desde unas pocas horas hasta unos pocos días, dependiendo de la complejidad de su extensión. La extensión de Chrome que hice (Abrir múltiples 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, algunos archivos HTML/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. Manifiesto.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. ¿Derecha? 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) le 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 expediente 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 hacer una extensión de Chrome
#1 Identifique el problema
Averigua qué problema quieres resolver con tu extensión de Chrome.
Por ejemplo, quiero abrir mis sitios web visitados con 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 te mantendrá motivado.
#2 Escribir código
Una vez que descubras 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 abre tu editor de texto favorito, crea 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 Manifiesto.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 ventana emergente.html
<!DOCTYPE html> <html> <head><title>Open Multiple links</title></head>
<body> <script type="text/javascript" src = "https://techwiser.com/how-to-make-a-chrome-extension-with-video/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 la etiqueta de identificación aquí para que podamos acceder a estos elementos desde cualquier lugar.
2.3 icono.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’, esto 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 Publica 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 cargar su extensión en Chrome Store para que todos puedan verla.
Para hacer esto dirígete a Panel de desarrolladores de Chrome y crear 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.