Cómo crear extensiones de Chrome desde cero

Deja un comentario / General / Por

Si quieres añadir o modificar alguna funcionalidad en Google Chrome, necesita 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 luego podrá distribuir a otros usuarios utilizando Chrome Web Store.

Tienda virtual de Chrome

A continuación, les mostraré el forma más fácil de crear una extensión. Si tiene algún conocimiento de desarrollo web (HTML, CSS y JS), se sentirá como en casa. Si no, primero mire estos canales para Aprende los conceptos básicos del desarrollo web.luego continúe a continuación.

15 extensiones de Chrome para animar nuevas pestañas en blanco

15 extensiones de Chrome para animar nuevas pestañas en blanco

Una guía paso a paso sobre cómo crear una extensión simple de Google Chrome desde cero. Leer más

requisitos previos

Debe tener los siguientes requisitos completados antes de comenzar con este tutorial.

  1. Debes estar familiarizado con HTML, CSS y JavaScript. [Check resources]
  2. debes tener un editor de código para escribir la extensión. [Compare editors]
  3. (Opcional) Si desea distribuir su extensión a otros usuarios, debe tener una cuenta de desarrollador en Chrome Web Store. [Create an account]

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 pendientes para Google Chrome. Será una utilidad (como se muestra a continuación) para demostrar los componentes esenciales y las capacidades proporcionadas a las extensiones.

Todoizr - Una utilidad de muestra para Google Chrome

Paso 1. Obtenga una plantilla

Google Chrome, como cualquier otra plataforma, requiere su extensiones para tener una estructura establecida, 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 repetitivo para extensiones cromadas. Le 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 de fondo que suele estar oculta en la interfaz frontal).

Extensionizr es el mejor generador repetitivo

Además, proporciona varias opciones de ajuste fino para incluir/excluir complementos necesarios, permisosetc. Tienes que seleccionar “acción del navegador” como el tipo de extensión y “sin fondo” como página de fondo para este tutorial.

Cuando haya terminado de elegir las opciones para crear su extensión de muestra, presione «¡Descargarlo!» botón en Extensionizr. Finalmente, extraer el archivo (.zip) a un directorio y abra su editor de código para comenzar a escribir la extensión.

Paso 2. Codifique 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 «manifiesto.json“.

Extraiga la plantilla a un directorio

Conozcamos también otros archivos y carpetas en este directorio:

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

Contiene el 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 ícono, etc. de su extensión junto con detalles como acciones y permisos del navegador.

Por ejemplo, en el siguiente código, notará que cambié el nombre, la descripción y la página de inicio_url junto con el título_predeterminado en acción_del_navegador. Además, yo agregado «almacenamiento» bajo permisos ya que necesitamos almacenar datos en nuestra extensión.


{
 "name": "Todoizr - To-do Simplified",
 "version": "0.0.1",
 "manifest_version": 2,
 "description": "Simple to-do app for everyone.",
 "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"
 },
 "permissions": [
  "storage"
 ]
}
srcbrowser_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 tareas pendientes en la ventana emergente.

Código inicial de la plantilla

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


<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="https://www.hongkiat.com/blog/how-to-create-chrome-extensions-from-scratch/./browser_action.css"/>
</head>

<body>
 <div id="mainPopup">
 </div>

 <script type="text/javascript" src="./browser_action.js"></script>
</body>
</html>

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


#mainPopup {
 padding: 10px;
 height: 200px;
 width: 400px;
 font-family: Helvetica, Ubuntu, Arial, sans-serif;
}

h1 {
 font-size: 2em;
}

Diseña la interfaz de la ventana emergente

Después de configurar el proyecto inicial, primero diseñemos la interfaz de la ventana emergente. Tengo configurar la interfaz con un enfoque minimalista, que muestra el nombre en la parte superior seguido de un formulario para agregar elementos pendientes y un área debajo para ver los elementos agregados. Está inspirado en el diseño simplista de «Form Style 5».

Diseña la interfaz de la ventana emergente

En el código a continuación, agregué dos divs: uno para mostrar el formulario para agregar una tarea pendiente y el otro para mostrar la lista de tareas pendientes ya agregadas. Dicho esto, el nuevo código para “browser_action.html» es como sigue:


<!doctype html>
<html>
<head>
 <link rel="stylesheet" href="https://www.hongkiat.com/blog/how-to-create-chrome-extensions-from-scratch/./browser_action.css"/>
</head>

<body>
 <div id="mainPopup">

 	<!-- To-do item form -->
  <div class="form-style-5" id="form">
   <h1>Todoizr</h1>
   <form>
    <fieldset>
     <input type="text" name="todo" placeholder="What to do?" id="txt">
     <input type="button" value="Add" id="btn" />
    </fieldset>
   </form>
  </div>

  <!-- To-do item list -->
  <div class="form-style-5">
   <ul id="list">

   </ul>
  </div>
 </div>

 <script type="text/javascript" src="./browser_action.js"></script>
</body>
</html>

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


@import url("./form_style_5.css");

#mainPopup {
 height: 200px;
 width: 300px;
 font-family: Helvetica, Ubuntu, Arial, sans-serif;
}

/* To-do item form */

.form-style-5 {
 margin: auto;
 padding: 0px 20px;
}

.form-style-5:first-child {
 background: none;
}

.form-style-5 h1 {
 color: #308ce3;
 font-size: 20px;
 text-align: center;
}

.form-style-5 input[type="text"] {
 width: auto;
 float: left;
 margin-bottom: unset;
}

.form-style-5 input[type="button"] {
 background: #308ce3;
 width: auto;
 float: right;
 padding: 7px;
 border: none;
 border-radius: 4px;
 font-size: 14px;
}

.form-style-5 input[type="button"]:hover {
 background: #3868d5;
}

/* To-do item list */

.form-style-5:last-child {
 height: inherit;
 margin-bottom: 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 está tomado de su sitio web para inspirar el diseño de nuestra extensión.


/* Form Style 5 by Sanwebe.com */
/* https://www.sanwebe.com/2014/08/css-html-forms-designs */

.form-style-5{
 max-width: 500px;
 padding: 10px 20px;
 background: #f4f7f8;
 margin: 10px auto;
 padding: 20px;
 background: #f4f7f8;
 border-radius: 8px;
 font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-5 fieldset{
 border: none;
}
.form-style-5 legend {
 font-size: 1.4em;
 margin-bottom: 10px;
}
.form-style-5 label {
 display: block;
 margin-bottom: 8px;
}
.form-style-5 input[type="text"],
.form-style-5 input[type="date"],
.form-style-5 input[type="datetime"],
.form-style-5 input[type="email"],
.form-style-5 input[type="number"],
.form-style-5 input[type="search"],
.form-style-5 input[type="time"],
.form-style-5 input[type="url"],
.form-style-5 textarea,
.form-style-5 select {
 font-family: Georgia, "Times New Roman", Times, serif;
 background: rgba(255,255,255,.1);
 border: none;
 border-radius: 4px;
 font-size: 16px;
 margin: 0;
 outline: 0;
 padding: 7px;
 width: 100%;
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 background-color: #e8eeef;
 color:#8a97a0;
 -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
 box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
 margin-bottom: 30px;

}
.form-style-5 input[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"]:focus,
.form-style-5 input[type="time"]:focus,
.form-style-5 input[type="url"]:focus,
.form-style-5 textarea:focus,
.form-style-5 select:focus{
 background: #d2d9dd;
}
.form-style-5 select{
 -webkit-appearance: menulist-button;
 height:35px;
}
.form-style-5 .number {
 background: #1abc9c;
 color: #fff;
 height: 30px;
 width: 30px;
 display: inline-block;
 font-size: 0.8em;
 margin-right: 4px;
 line-height: 30px;
 text-align: center;
 text-shadow: 0 1px 0 rgba(255,255,255,0.2);
 border-radius: 15px 15px 15px 0px;
}

.form-style-5 input[type="submit"],
.form-style-5 input[type="button"]
{
 position: relative;
 display: block;
 padding: 19px 39px 18px 39px;
 color: #FFF;
 margin: 0 auto;
 background: #1abc9c;
 font-size: 18px;
 text-align: center;
 font-style: normal;
 width: 100%;
 border: 1px solid #16a085;
 border-width: 1px 1px 3px;
 margin-bottom: 10px;
}
.form-style-5 input[type="submit"]:hover,
.form-style-5 input[type="button"]:hover
{
 background: #109177;
}

Escribe la lógica de la ventana emergente.

Una vez que hayamos terminado con el front-end de la extensión, ahora escribamos la lógica para que funcione. Necesitamos nuestra extensión para poder agregar tareas pendientes y mostrarlas en la ventana emergente. Por lo tanto, agregaremos un oyente de clic de botón para agregar el texto de entrada como un elemento pendiente y un oyente de carga de página para mostrar esos elementos.

En el siguiente código, vamos a utilizar dos funciones: sincronizar.get() y sincronizar.establecer(), que forman parte de “chrome.storage“. Necesitamos el segundo para guardar los elementos pendientes 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» archivo. Como puede ver a continuación, el código está muy comentado para ayudarlo a comprender su propósito.


function loadItems() {
 /* First get() the data from the storage */
 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)
  }

  console.log('todo.length=" + todo.length)

  for (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()
   })
  })
 }
})

Paso 3. Carga la extensión

Una vez que haya terminado de escribir su extensión, es el momento de probarla a través de la función de Google Chrome que ofrece cargar extensiones desempaquetadas que no están en la tienda. Pero primero, debes habilitar el modo desarrollador en su navegador: haga clic en el opciones botón > elegir «Más herramientas” > Extensionesy luego active “modo desarrollador“.

Cargar extensión desempaquetada en Google Chrome

Ahora verá más botones debajo de la barra de búsqueda. Aquí haga clic en el «carga desempaquetada» botón. Le pedirá el directorio: navegue 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 el botón de recarga para cargar los últimos cambios.

botón recargar carga los últimos cambios

En nuestro ejemplo, verás el icono de la extensión al lado del ícono de perfil porque agregamos una acción de navegador en nuestra extensión de muestra. Puede hacer clic en ese icono para agregar y ver tareas pendientes en nuestra extensión ya que esa es la acción especificada.

Haga clic en el icono de Todoizr en Google Chrome

Distribuir una extensión

aunque es fácil de cargar una extensión a 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 los detalles de su contenido (como nombre, icono, capturas de pantalla, etc.); como se indica en su guía paso a paso.

¿Qué sigue? Leer y codificar

Como habrás esperado, el propósito de este tutorial es ayudarte a 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 de extensión serio.

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

  1. Todas las capacidades, componentes y características de las extensiones.
  2. Extensiones de muestra del equipo detrás de Google Chrome.

Si ha pasado por estos recursos y está listo para algún desafío, intente agregar las siguientes características en la extensión que acaba de terminar de desarrollar:

  1. Una opción para eliminar las tareas pendientes guardadas.
  2. Una función para mostrar notificaciones cuando termine de agregar un elemento.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio