Cómo crear extensiones de Chrome desde cero

Si quieres añadir o modificar alguna funcionalidad en Google Chrome, necesitas usar una extensión. Aunque puede descargar una extensión de Chrome Web Store, a veces necesita una funcionalidad específica que no puede encontrar en ninguna extensión existente..

Bueno, la buena noticia es que puede crear su propia extensión para agregar o modificar la funcionalidad requerida o crear un nuevo complemento o aplicación para Google Chrome, que podrá consultar más adelante. distribuir a otros usuarios usando la tienda web de Chrome.

A continuación, te voy a mostrar el La forma más fácil de crear una extensión.. Si tiene algún conocimiento del desarrollo web (HTML, CSS y JS), se sentirá como en casa. Si no, primero mira estos canales para Aprende lo básico del desarrollo web., luego continúa abajo.

Prerrequisitos

Debe completar los siguientes requisitos antes de comenzar con este tutorial.

1. Debes estar familiarizado con HTML, CSS y JavaScript. [Ver recursos]
2. Debes tener un editor de código Para escribir la extensión. [Comparar editores]
3. (Opcional) Si desea distribuir su extensión a otros usuarios, debe tener un cuenta de desarrollador en Chrome Web Store. [Crea una cuenta]

Nota: Google le pide que pague una pequeña tarifa por crear una cuenta de desarrollador en Chrome Web Store.

Crear una extensión

En este tutorial, voy a compartir el proceso de creación de un extensión de tareas para Google Chrome. Será una utilidad (como se muestra a continuación) para demostrar los componentes esenciales y las capacidades proporcionadas a las extensiones..

1. Consigue una plantilla

Google Chrome, como cualquier otra plataforma, requiere su Extensiones para tener una estructura definida., Lo que puede parecer complejo para los principiantes. Por eso es bueno obtener una plantilla repetitiva para una extensión que satisfaga todas las necesidades.

Extensionizr es el mejor generador de placas de calderas. Para extensiones de cromo. Te permite elegir uno de los tipos de extensión dados - acción del navegador (Una acción para todas las páginas o el navegador)., acción de la página (una acción para la página actual), o extensión oculta (una acción en segundo plano que generalmente se oculta en la interfaz frontal).

Además, proporciona varias opciones de ajuste fino para incluir / excluir complementos necesarios, permisos, Usted necesita seleccionar “Acción del navegador” como el tipo de extensión y “Sin fondo” como la página de fondo para este tutorial.

Cuando haya terminado de elegir las opciones para crear su extensión de muestra, pulse la tecla “Descargalo!” Botón en Extensionizr. Finalmente, extraer el archivo (.zip) a un directorio y abre tu editor de código para comenzar a escribir la extensión.

2. Codificar la extensión.

Una vez que haya descargado y extraído la plantilla, verá una estructura de directorios como se muestra en la siguiente captura de pantalla. La plantilla está perfectamente organizada, y debe saber que el archivo más importante es “manifest.json“.

Vamos a conocer otros archivos y carpetas en este directorio también:

1. _locales: Es usado para almacenar información de idioma para una aplicación multilingüe.
2. css: Funciona para almacenar bibliotecas de front-end de terceros como Bootstrap 4.
3. iconos: Está diseñado para tener iconos para su extensión en varios tamaños..
4. js Es útil para guardar bibliotecas de back-end de terceros como jQuery 3.
5. src: Almacena el código real que escribirá para su extensión..

manifest.json

Contiene la metadatos básicos sobre tu aplicación, que define los detalles de su aplicación para el navegador. Puede editarlo para configurar el nombre, la descripción, el sitio web, el icono, etc. de su extensión, junto con detalles como acciones y permisos del navegador.

Por ejemplo, en el código a continuación, notará que cambié el nombre, la descripción y homepage_url junto con default_title debajo de browser_action. Por otra parte, yo adicional “almacenamiento” bajo permisos Como necesitamos almacenar datos en nuestra extensión..

 "name": "Todoizr - To-do Simplified", "version": "0.0.1", "manifest_version": 2, "description": "Aplicación de tarea simple para todos.", "homepage_url": " https://go.aksingh.net/todoizr "," icons ": " 16 ":" icons / icon16.png "," 48 ":" icons / icon48.png "," 128 ":" icons / icon128 .png "," default_locale ":" en "," browser_action ": " default_icon ":" icons / icon19.png "," default_title ":" Todoizr - To-do Simplified "," default_popup ":" src / browser_action / browser_action.html "," permisos ": [" almacenamiento "] 

src \ browser_action

Este directorio contendrá el código para la acción del navegador. En nuestro caso, lo haremos. codificar la ventana emergente Se muestra al hacer clic en el icono de la extensión en el navegador. Nuestra extensión permitirá a los usuarios agregar y ver elementos de tareas pendientes en la ventana emergente.

Nota: Siempre puede comenzar con el código clonando este repositorio.

Código inicial de la plantilla.

Aunque este directorio tenía solo un archivo HTML con todo el código, he decidido dividirlo en tres archivos separados para mayor claridad. Dicho esto, el archivo HTML llamado “browser_action.html” Ahora tiene el siguiente código:

Además, el archivo de estilo denominado “browser_action.css” tiene el siguiente contenido mientras que el archivo JavaScript nombrado “browser_action.js” esta en blanco por ahora.

 #mainPopup padding: 10px; altura: 200px; ancho: 400px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  h1 font-size: 2em;  

Diseñar la interfaz del popup.

Después de configurar el proyecto inicial, primero diseñemos la interfaz de la ventana emergente. yo tengo Configurar la interfaz con un enfoque minimalista., mostrando el nombre en la parte superior seguido de un formulario para agregar elementos de tareas pendientes y un área debajo para ver los elementos agregados. Está inspirado en el diseño simplista de “Forma de estilo 5“.

En el código a continuación, he agregado dos divs: uno para mostrar el formulario para agregar un elemento de tarea pendiente y el otro para mostrar la lista de elementos de tareas pendientes ya agregados. Dicho esto, el nuevo código para “browser_action.html” es como sigue:

       
  
 
Todoizr
 
 
   
 
 
  
 
 
 
 
    

Y el archivo de estilo “browser_action.css” Ahora tiene el siguiente código:

 @import url ("./ form_style_5.css"); #mainPopup altura: 200 px; ancho: 300px; font-family: Helvetica, Ubuntu, Arial, sans-serif;  / * Formulario de elemento de tareas * / .form-style-5 margin: auto; relleno: 0px 20px;  .form-style-5: first-child background: none;  .form-style-5 h1 color: # 308ce3; tamaño de fuente: 20px; text-align: center;  .formación de estilo-5-entrada [tipo = "texto"] ancho: auto; flotador izquierdo; margen inferior: desarmado;  .formación de estilo-5-entrada [tipo = "botón"] fondo: # 308ce3; ancho: auto; flotar derecho; relleno: 7px; frontera: ninguna; radio del borde: 4px; tamaño de fuente: 14px;  .formación de estilo-5-entrada [tipo = "botón"]: desplazarse fondo: # 3868d5;  / * Lista de elementos de tareas * / .form-style-5: last-child height: inherit; margen inferior: 5px;  .form-style-5 ul padding: 20px;  .form-style-5 ul li font-size: 14px;  

Por último, el archivo de estilo de terceros “form_style_5.css” tiene el siguiente contenido. Simplemente se toma de su sitio web para inspirar el diseño de nuestra extensión..

 / * Form Style 5 por Sanwebe.com * / / * https://www.sanwebe.com/2014/08/css-html-forms-designs * / .form-style-5 max-width: 500px; relleno: 10px 20px; fondo: # f4f7f8; margen: 10px auto; relleno: 20px; fondo: # f4f7f8; radio del borde: 8px; Familia tipográfica: Georgia, "Times New Roman", Times, serif;  fieldset .form-style-5 border: none;  .form-style-5 legend font-size: 1.4em; margen inferior: 10px;  etiqueta .form-style-5 pantalla: bloque; margen inferior: 8px;  entrada de .form-style-5 [type = "text"], entrada de .form-style-5 [type = "date"], entrada de .form-style-5 [type = "datetime"], .form-style -5 input [tipo = "correo electrónico"], .form-style-5 input [type = "number"], .form-style-5 input [type = "search"], .form-style-5 input [type = "tiempo"], entrada de .form-style-5 [type = "url"], .tar-style-5 textarea, .form-style-5 select font-family: Georgia, "Times New Roman", Times serif fondo: rgba (255,255,255, .1); frontera: ninguna; radio del borde: 4px; tamaño de fuente: 16px; margen: 0; esquema: 0; relleno: 7px; ancho: 100%; tamaño de caja: caja de borde; -webkit-box-dimensionamiento: cuadro de borde; -mano-caja de tamaño: cuadro de borde; color de fondo: # e8eeef; color: # 8a97a0; -webkit-box-shadow: 0 1px 0 rgba (0,0,0,0.03) recuadro; caja-sombra: 0 1px 0 rgba (0,0,0,0.03) recuadro; margen inferior: 30px;  entrada de .form-style-5 [type = "text"]: focus, .form-style-5 input [type = "date"]: focus, .form-style-5 input [type = "datetime"]: focus, .form-style-5 input [type = "email"]: focus, .form-style-5 input [type = "number"]: focus, .form-style-5 input [type = "search"] : foco, entrada .form-style-5 [type = "time"]: foco, entrada .form-style-5 [type = "url"]: focus, .form-style-5 textarea: focus, .form- style-5 select: focus background: # d2d9dd;  .form-style-5 selecciona -webkit-apariencia: menulist-button; altura: 35px;  .form-style-5 .number background: # 1abc9c; color: #fff; altura: 30px; ancho: 30px; pantalla: bloque en línea; tamaño de letra: 0.8em; margen derecho: 4px; línea de altura: 30px; text-align: center; texto-sombra: 0 1px 0 rgba (255,255,255,0.2); radio del borde: 15px 15px 15px 0px;  entrada de .form-style-5 [type = "submit"], entrada de .form-style-5 [type = "button"] position: relative; bloqueo de pantalla; relleno: 19px 39px 18px 39px; color: #FFF; margen: 0 auto; fondo: # 1abc9c; tamaño de fuente: 18px; text-align: center; estilo de letra: normal; ancho: 100%; borde: 1px sólido # 16a085; ancho del borde: 1px 1px 3px; margen inferior: 10px;  entrada de .form-style-5 [type = "submit"]: hover, .form-style-5 input [type = "button"]: hover background: # 109177;  

Escribe la lógica del popup.

Una vez que hayamos terminado con el extremo frontal de la extensión, ahora escribamos la lógica para su funcionamiento. Necesitamos nuestra extensión para poder añadir elementos pendientes y también mostrarlos en la ventana emergente Así que agregaremos un botón, haga clic en escucha para agregar el texto de entrada como una tarea pendiente y un escucha de carga de página para mostrar esos elementos..

En el siguiente código, vamos a utilizar dos funciones. - sync.get () y sync.set (), que son parte de “Chrome.Storage“. Necesitamos el segundo para guardar los elementos de tareas en el almacenamiento y el primero para recuperarlos y mostrarlos..

Dicho esto, a continuación se muestra el código final de la “browser_action.js” expediente. Como puede ver a continuación, el código está altamente comentado para ayudarlo a comprender su propósito..

 function loadItems () / * Primero obtenga () los datos del almacenamiento * / chrome.storage.sync.get (['todo'], function (result) var todo = [] if (result && result.todo && result.todo.trim ()! == ") / * Analizar y obtener la matriz como se guarda como una cadena * / todo = JSON.parse (result.todo) console.log ('todo.length =' + todo.length) para (var i = 0; i < todo.length; i++)  item = todo[i] if (item && item.trim() !==")  /* Append the items in the #list for showing them */ var list = document.getElementById('list') var entry = document.createElement('li') var text = document.createTextNode(item) entry.appendChild(text) list.appendChild(entry)   )  /* Load the to-do items upon popup load */ document.addEventListener('DOMContentLoaded', function() console.log('Inside doc.loaded()') loadItems() ) /* Save the to-do item upon button click */ document.getElementById('btn').addEventListener('click', function (ev)  console.log('Inside btn.click()') text = document.getElementById('txt').value if (text && text.trim() !==")  /* First get() old data as calling set() will replace it */ chrome.storage.sync.get(['todo'], function(result)  var todo = [] if (result && result.todo && result.todo.trim() !==")  /* Parse and get the array as it is saved as a string */ todo = JSON.parse(result.todo)  todo.push(text) chrome.storage.sync.set('todo': JSON.stringify(todo), function()  /* Data is saved now */ var list = document.getElementById('list') while (list.firstChild)  list.removeChild(list.firstChild)  loadItems() ) )  ) 

3. Cargue la extensión

Una vez que haya terminado de escribir su extensión, es el momento de probarlo a través de la función de Google Chrome que ofrece la carga de extensiones desempaquetadas que no están almacenadas. Pero primero debes habilitar el modo desarrollador en su navegador: haga clic en el opciones botón > escoger “Más herramientas” > Extensiones, y luego encender “modo desarrollador“.

Ahora verás más botones debajo de la barra de búsqueda. Aquí haga clic en el “Carga desempaquetada” botón. Le pedirá el directorio: busque y seleccione el directorio de su extensión y cargará la extensión. Si edita o actualiza el código de su extensión, puede hacer clic en Botón de recarga para cargar los últimos cambios..

En nuestro ejemplo, Verás el icono de la extensión. junto al icono de perfil porque agregamos una acción del navegador en nuestra extensión de muestra. Puede hacer clic en ese icono para añadir y ver elementos de tareas pendientes En nuestra extensión ya que es la acción especificada..

Distribuir una extensión

Aunque es fácil de cargar una extensión Para Chrome Web Store, el proceso es demasiado largo para cubrir todos los detalles. En resumen, crea una cuenta de desarrollador, empaqueta su extensión y luego la envía junto con sus detalles de contenido (como nombre, icono, capturas de pantalla, etc.); como se indica en su guía paso a paso.

¿Qué sigue? Leer y codificar

Como es de esperar, el propósito de este tutorial es comenzar con el desarrollo de extensiones para Google Chrome. He tratado de cubrir los conceptos básicos; sin embargo, necesitas saber mucho mas Por hacer un desarrollo serio de la extensión..

Dicho esto, a continuación son algunos de mis recursos favoritos para aprender a desarrollar extensiones para Google Chrome y otros navegadores basados ​​en Chromium:

1. Todas las habilidades, componentes y características de las extensiones..
2. Ejemplo de extensiones por el equipo detrás de Google Chrome..

Si ha pasado por estos recursos y está listo para un desafío, intente agregar las siguientes funciones en la extensión que acaba de completar:

1. Una opción para eliminar los elementos de tareas guardadas.
2. Una característica para mostrar notificaciones cuando haya terminado de agregar un elemento.

Se trata de desarrollar tu primera extensión para el navegador más popular.. ¿Qué extensión creaste?? ¿Te metiste en un problema? Hazme saber tu historia escribiendo un comentario a continuación o enviándome un mensaje a @aksinghnet.

Por último, pero no menos importante, tenga en cuenta que puede probar Todoizr (la extensión que creamos) en Chrome Web Store y verificar su código completo en este repositorio..