Como hacer un Chrome Extensión (con Video)

Recientemente publiqué- Abrir múltiples sitios web un simple chrome extensión que abre todos tus sitios web favoritos con un solo clic. Y sorprendente hacer un chrome La extensión 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 construir un chrome extensión desde cero. Pero si está buscando una descripción general rápida, esta guía lo ayudará.

Que es chrome ¿extensión?

Es un pequeño programa que añade una funcionalidad extra a tu chrome navegador. Usualmente, chrome las extensiones 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 puedes escribir una página web, puedes hacer una chrome extensión inferior a 5 minutos. Sin embargo, para hacer algo útil, debe saber lo básico de HTML, CSS, JavaScript y cómo usar chromeAPI de . 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. Él chrome extensión que hice (Abrir múltiples sitios web) me tomó algunas horas, comenzando desde cero.

que es un chrome extensión compuesta por?

Un simple chrome La extensión 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 Tienda.

Un simple chrome La extensión consta de cuatro archivos:

1. Manifiesto.json : Considérelo como un índice de un libro. Este archivo de manifiesto dice 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, entonces chrome utilizará un icono 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.

Como hacer un Chrome Extensión

#1 Identifique el problema

Descubre qué problema quieres resolver con tu chrome extensión.

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 chrome extensión. 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 ‘chrome extensión’. 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 utiliza 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’, que almacenará todas las entradas del usuario en el chrome storage y ‘loadUrl’ los lanzará 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, activa el modo de desarrollador chrome página de extensiones, luego arrastre y suelte este ‘chrome extensión’ allí.

subir chrome extensión

Una vez que haya terminado de solucionar el problema, puede cargar su extensión a chrome tienda para que todos puedan verlo.

Para hacer esto dirígete a chrome panel de desarrolladores y crear una cuenta. Tendrá que pagar tarifas únicas de $5 a chrome. Luego sube tu chrome extensión e ingrese 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

Related Posts