Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas

 

 

 

  • ¡Registro!
  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

  • Índice
    1. Conocimiento previo
  • Andamio
  • Árbol de carpetas
  • Primer vuelo
  • Instalación de dependencias
  • Desarrollo
  • Almacenamiento de datos
  • Proceso en segundo plano
  • Construir
  • Desplegar
  • Conclusión
    1. Otras lecturas
  • En este artículo, Daniel Sternlicht lo guía a través del proceso de desarrollo de una extensión de Chrome con bibliotecas y herramientas web modernas. Todo comienza con una idea. Daniel pensó que sería bueno crear una extensión de Chrome que le permita marcar su progreso de lectura en artículos para poder continuar leyéndolos más tarde, en cualquier lugar. “Markticle” es el nombre que eligió para esta extensión. Compartirá aquí las tecnologías que utilizó para desarrollarlo. Después de leer este artículo, tendrá una extensión de Chrome lista para usar, similar a "Guardar para más tarde".

     

    Crear una extensión para el navegador Chrome es una excelente manera de tomar una idea pequeña y útil y distribuirla a millones de personas a través de Chrome Web Store. Este artículo lo guiará a través del proceso de desarrollo de una extensión de Chrome con bibliotecas y herramientas web modernas.

    Todo comienza con una idea. El mío se formó mientras leía un artículo interesante (y largo) sobre nuevas tecnologías front-end. Estaba concentrado en leer el artículo cuando de repente mi esposa me llamó para sacar a un pobre pichón que se quedó atrapado en nuestro balcón. Cuando finalmente volví al artículo, ya era demasiado tarde: tenía que ir a trabajar.

    Para abreviar la historia, pensé que sería bueno crear una extensión de Chrome que le permita marcar su progreso de lectura en artículos para que pueda continuar leyéndolos más tarde, en cualquier lugar.

    “ Markticle ” es el nombre que elegí para esta extensión. Compartiré aquí las tecnologías que utilicé para desarrollarlo. Después de leer este artículo, tendrá una extensión de Chrome lista para usar, similar a "Guardar para más tarde".

     

    Conocimiento previo

    Usaremos algunas tecnologías de front-end. Si bien puedes aprender algunos de ellos sobre la marcha, se requiere conocimiento de otros (marcados en negrita):

    • jQuery
    • angularjs
    • Nodo.js
    • Gruñido
    • Cenador
    • Hacendado

    Andamio

    Comencemos con algunos trabajos de infraestructura.

    Suponiendo que esté familiarizado con npm (el administrador de paquetes de Node.js), usaremos el generador Yeoman para crear una extensión básica para Chrome.

    Nota : Si aún no tiene Yeoman instalado en su máquina, comience siguiendo el tutorial " Introducción ".

    Abra una nueva línea de comando o ventana de terminal y escriba el siguiente comando:

    npm install -g generator-chrome-extension

    Esto instalará el generador de Yeoman para extensiones de Chrome en su máquina.

    Cree una nueva carpeta en su sistema de archivos:

    mkdir my-extension

    Y luego ejecute el siguiente comando para generar todos los archivos que necesitará para comenzar a desarrollar su extensión:

    yo chrome-extension

    Después de ejecutar este comando, el generador le preguntará qué funciones incluir en la extensión.

    En nuestro caso, Markicle debería hacer algunas cosas:

    1. Agrega un ícono al lado de la barra de direcciones.
    2. Ejecutar en cada página que abre el usuario.
    3. Ejecute algún código en segundo plano para conectar la página actual a la extensión para guardar datos.

    Para la primera función, elegiremos "navegador" como acción de la interfaz de usuario. Para permitir que la extensión se ejecute en cada página web, marcaremos la casilla "Scripts de contenido". Finalmente, para permitir la ejecución de procesos en segundo plano, usaremos un background.jsarchivo.

    Nota : Otra forma de crear una extensión de Chrome es utilizar el generador en línea Extensionizr . Extensionizr es una gran herramienta que te ayuda a crear extensiones básicas de Chrome. Tiene múltiples opciones de configuración, todas las cuales se pueden habilitar con casillas de verificación. Al final, obtendrás un archivo ZIP que incluye todos los archivos que necesitarás para comenzar a trabajar en la extensión. La desventaja es que necesitarás configurar Grunt y Bower manualmente.

    Árbol de carpetas

    Veamos los archivos y carpetas generados que tenemos ahora.

    • app
    • test
    • bower.json
    • package.json
    • Gruntfile.js

    Gruntfile.jses donde configuraremos las tareas de Grunt para servir, construir, probar y empaquetar nuestra extensión.

     

    Los archivos package.jsony bower.jsonson archivos Node.js y Bower JSON que definen las dependencias de nuestra extensión en complementos y bibliotecas de terceros.

    La testcarpeta incluirá todas las pruebas unitarias y de un extremo a otro de la extensión. Finalmente, la appcarpeta es la más interesante porque es donde residirá el núcleo de nuestra extensión.

    Después de reordenar algunas de las carpetas y archivos, así es como appse verá nuestra carpeta:

    • icons
      • icon-16.png
      • icon-19.png
      • icon-38.png
      • icon-128.png
    • images
    • views
    • scripts
      • inject.js
      • background.js
    • styles
    • main.css
    • _locales
      • en
      • messages.json
    • index.html
    • manifest.json

    El archivo más importante aquí es manifest.json. En realidad, es el corazón de la extensión y especifica varias cosas, incluidas las siguientes:

    • la ubicación de cada archivo utilizado por la extensión,
    • qué icono presentar como botón de “acción”,
    • los permisos que necesita su extensión,
    • el nombre de la extensión.

    A continuación se muestra un ejemplo de cómo manifest.jsondebería verse el archivo:

    { "name": "Markticle", "version": "1.0.0", "manifest_version": 2, "icons": { "16": "icons/icon-16.png", "38": "icons/icon-38.png", "128": "icons/icon-128.png" }, "default_locale": "en", "background": { "scripts": [ "scripts/helpers/storage.helper.js", "scripts/background.js" ] }, "browser_action": { "default_icon": "icons/icon-19.png", "default_popup": "index.html" }}

    Primer vuelo

    Ahora tenemos una extensión básica que no hace nada. Aún así, sólo para asegurarnos de que todo esté en su lugar y funcionando correctamente, probemos la extensión en tiempo de ejecución.

    Abre Chrome y escribe esto en la barra de direcciones:

    chrome://extensions

    Esta página muestra información sobre todas las extensiones actualmente instaladas en su navegador.

    En la esquina superior derecha, verá una opción para habilitar el "Modo de desarrollador". Pinchalo.

    Ahora, haga clic en el botón "Cargar extensión descomprimida", busque la ubicación de la extensión que creó, seleccione la appcarpeta y haga clic en "Seleccionar".

    Ahora deberías ver el ícono de la extensión al lado de la barra de direcciones.

    Instalación de dependencias

    Antes de ejecutar la aplicación, necesitamos instalar algunas dependencias del complemento Node.js. Lo haremos ejecutando el siguiente comando:

    npm install

    Lo último que debemos hacer antes de sumergirnos en el código es configurar las dependencias de las bibliotecas de terceros que vamos a utilizar. Hacemos esto en el bower.jsonarchivo:

    { "name": "Markticle", "version": "1.0.0", "dependencies": { "angular": "1.2.6", "jquery": "2.0.3", "normalize.scss": "3.0.0" }, "devDependencies": {}}

    Elegí tres bibliotecas para este proyecto: AngularJS, jQuery y Normalize.css. Para instalarlos, ejecute este comando:

     

    bower install

    Desarrollo

    Ahora que estamos listos para comenzar el desarrollo, dividamos nuestro trabajo en dos partes.

    La primera parte será la ventana emergente que se abre cuando el usuario hace clic en el icono de la extensión. La ventana emergente de Markticle presentará la lista de favoritos (es decir, sitios web) que el usuario ha guardado.

    La segunda parte conecta las acciones del usuario con la propia extensión. Cada vez que el usuario realiza una acción particular en una página, la extensión debe guardar la URL y el título de la pestaña actual (para que sepamos qué mostrar en la ventana emergente).

    La primera parte es bastante sencilla. Usaremos el código AngularJS clásico para desarrollarlo.

    Comencemos agregando la siguiente estructura de archivos a la app/scriptscarpeta.

    • scripts
      • controllers
      • main.controller.js
      • directives
      • main.directive.js
      • helpers
      • storage.helper.js
      • services
      • storage.service.js
      • app.js
      • inject.js
      • background.js

    En el app.jsarchivo, agregaremos el siguiente código, que definirá el módulo principal de nuestra aplicación:

    angular.module('markticle', []);

    Ahora, agreguemos un código básico al index.htmlarchivo:

    !DOCTYPE HTMLhtml head link href="styles/main.css" rel="stylesheet" /head body ng-app="markticle" divSample/div script src="bower_components/jquery/jquery.min.js" script src="bower_components/angular/angular.min.js" script src="scripts/app.js" script src="scripts/controllers/main.controller.js" script src="scripts/directives/main.directive.js" /body/html

    Lo que hemos hecho aquí es muy simple:

    • definir un módulo global AngularJS llamado markticle,
    • agregue un solo elemento div con texto de muestra,
    • Incluya la lista de archivos de script que vamos a utilizar.

    Ahora, ampliemos el elemento div que creamos.

    div ng-controller="MainController" header h1My Marks/h1/headersection/section/div

    Nuevamente, no hay nada especial aquí: simplemente configuramos un controlador AngularJS con nombre MainControllery agregamos algunas headeretiquetas sectionpara el próximo contenido.

    En el app/scripts/controllers/main.controller.jsarchivo, creemos un nuevo controlador AngularJS:

    angular.module('markticle').controller('MainController', function($scope) { $scope.marks = [];});

    Actualmente, este controlador no hace mucho excepto definir una matriz, denominada marks, que se adjunta al alcance del controlador. Esta matriz incluirá los elementos guardados del usuario.

    Sólo por diversión, agreguemos dos elementos a esta matriz:

     

    $scope.marks = [{ title: 'Smashing magazine', url: 'https://www.smashingmagazine.com/'},{ title: 'Markticle', url: 'https://markticle.com'}];

    Ahora, en el index.htmlarchivo, repasémoslos con la ng-repeatdirectiva:

    section ul li ng-repeat="mark in marks" a target="_blank" ng-href="{{mark.url}}"{{mark.title}} /li /ul/section

    Haga clic en el icono de la extensión para abrir la ventana emergente y ver el resultado.

    Después de agregar algo de CSS básico al main.cssarchivo, esto es lo que obtuvimos:

    Ahora para la segunda parte.

    En la segunda parte, conectaremos las interacciones del usuario con nuestra extensión.

    Comencemos agregando una nueva propiedad a nuestro manifest.jsarchivo:

    { … "background": {…}, "content_scripts": [{ "matches": ["https://*/*", "https://*/*"], "js": ["bower_components/jquery/jquery.min.js", "scripts/inject.js"]}],…}

    Aquí, hemos agregado una propiedad denominada content_scripts, que tiene sus propias dos propiedades:

    • matchesEsta es una matriz que define en qué sitios web inyectar el script; en nuestro caso, todos los sitios web.
    • jsSe trata de una serie de scripts que la extensión inyectará en cada página web.

    Abramos el inject.jsscript y agreguemos un código básico:

    $(document).ready(function() { var createMarkticleButton = function() { var styles = 'position: fixed; z-index: 9999; bottom: 20px; left: 20px;';$('body').append('');};$(document).on('click', '#markticle_button', function() { var title = document.title; var url = window.location.href;console.log(title + ': ' + url);});createMarkticleButton();});

    Este script hace dos cosas una vez que la página está lista. Primero, agrega un botón básico usando el createMarkticleButton()método. Luego, agrega un detector de eventos que escribe la URL y el título de la página actual en la consola de Chrome cada vez que el usuario hace clic en el botón.

    Para probar esto, vaya a chrome://extensions, busque su extensión y haga clic en el botón "Recargar". Luego, abra cualquier sitio web, haga clic en el botón Markicle y mire la consola en Chrome Developer Tools.

    Almacenamiento de datos

    Para almacenar datos en la extensión (sin tener que utilizar una solución del lado del servidor), tenemos varias opciones. Mi favorito es HTML5 localStorage .

    Volvamos a nuestra scriptscarpeta y creemos un servicio de almacenamiento local. Primero, edite app/scripts/helpers/storage.helper.js:

    var markticleStorageService = function() { var lsName = 'marks'; var data = localStorage.getItem(lsName) ? JSON.parse(localStorage.getItem(lsName)) : []; return { get: function() { return data; }, add: function(item) { this.remove(item.url); data.push(item); this.save(); }, remove: function(url) { var idx = null; for(var i = 0; i data.length; i++) { if(data[i].url === url) { idx = i; break; } } if(idx !== null) { data.splice(idx, 1); this.save(); } }, save: function() { localStorage.setItem(lsName, JSON.stringify(data)); } };};

    Con esto, primero mantenemos una datamatriz con los datos actuales que extraemos del almacenamiento local. Luego, revelaremos algunos métodos para manipular los datos, get()como add()y remove().

     

    Después de crear esta clase, agreguémosla también como un servicio AngularJS en app/scripts/services/storage.service.js:

    angular.module('markticle').service('StorageService', markticleStorageService);

    Nota : No olvide consultar ambos scripts en index.html.

    La razón por la que lo dividimos en dos scripts es porque vamos a reutilizar la markticleStorageServiceclase en background.js, donde no accederemos a AngularJS.

    Volviendo a nuestro MainController, asegurémonos de que estamos inyectando el servicio de almacenamiento en la aplicación:

    angular.module('markticle').controller('MainController', function($scope, StorageService) { $scope.marks = […];});

    Finalmente, conectemos los StorageServicedatos a nuestra aplicación e introduzcamos un método que se utilizará en la interfaz de usuario.

    angular.module('markticle').controller('MainController', function($scope, StorageService) { $scope.marks = StorageService.get(); $scope.removeMark = function(url) { StorageService.remove(url); $scope.marks = StorageService.get(); if(!$scope.$$phase) { $scope.$apply(); } };});

    Volver al index.htmlarchivo. Agreguemos una opción para eliminar elementos conectando la vista al remove()método del controlador:

    li ng-repeat="mark in marks" a ng-href="{{mark.url}}"{{mark.title}}/a span ng-click="removeMark(mark.url)"remove/span/li

    Entonces, cada vez que el usuario haga clic en el botón "Eliminar", llamará al remove()método desde el controlador, con la URL de la página como parámetro. Luego, el controlador irá StorageServicey eliminará el elemento de la matriz de datos y guardará la nueva matriz de datos en la propiedad localStrorage.

    Proceso en segundo plano

    Nuestra extensión ahora sabe cómo obtener y eliminar datos del servicio de almacenamiento local. Es hora de permitir al usuario agregar y guardar elementos.

    Abra app/scripts/background.jsy agregue el siguiente código:

    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) { if(request) { var storageService = new markticleStorageService(); if(request.action === 'add') { storageService.add(request.data); } }});

    Aquí, estamos agregando un oyente para el onMessageevento. En la función de devolución de llamada, estamos creando una nueva instancia markticleStorageServicey obteniendo un requestobjeto. Este objeto es lo que enviaremos con el chrome.extension.sendMessageevento que se activa desde el inject.jsscript. Contiene dos propiedades:

    • actionEste es el tipo de acción que queremos que realice el proceso en segundo plano.
    • dataEste es el objeto de los datos que queremos agregar.

    En nuestro caso, el tipo de acción es addy el objeto es un modelo de un solo artículo. Por ejemplo:

     

    {title: 'Markticle',url: 'https://markticle.com'}

    Volvamos al inject.jsscript y conectémoslo al background.jsscript:

    $(document).on('click', '#markticle_button', function() { var title = document.title; var url = window.location.href;chrome.extension.sendMessage({ action : 'add', data: { title: title, url: url}});alert('Marked!');});

    Ahora, vaya a cualquier sitio web y haga clic en "¡Marcarme!". botón. Abra la ventana emergente nuevamente y vea el nuevo elemento que acaba de agregar. Muy bien, ¿verdad?

    Construir

    Hemos creado una especie de extensión de Chrome genial "Guardar para más tarde". Antes de lanzarlo a la tienda de Chrome, hablemos del proceso de creación de una extensión de Chrome.

    Un proceso de construcción para este tipo de aplicación podría tener algunos objetivos (o “tareas”, para usar la convención de nomenclatura de Grunt):

    • prueba (si estás escribiendo pruebas unitarias para la extensión),
    • minimizar,
    • concatenar,
    • incrementar el número de versión en el archivo de manifiesto,
    • comprimir en un archivo ZIP.

    Si está utilizando el generador de Yeoman, puede realizar todas estas tareas automáticamente ejecutando este comando:

    grunt build

    Esto creará una nueva distcarpeta, donde encontrará los archivos minificados y concatenados, y otra carpeta llamada package, donde encontrará un archivo ZIP con el nombre de la versión actual de su extensión, listo para ser implementado.

    Desplegar

    Todo lo que queda por hacer es implementar la extensión.

    Vaya a su "Panel de desarrollador" en Chrome Web Store y haga clic en el botón "Agregar nuevo elemento".

    Busque el archivo ZIP que creamos y cárguelo. Complete toda la información requerida y luego haga clic en el botón "Publicar cambios".

    Nota : si desea actualizar la extensión, en lugar de crear un nuevo elemento, haga clic en el botón "Editar" al lado de la extensión. Luego, haga clic en el botón "Cargar paquete actualizado" y repita los pasos restantes.

    Conclusión

    Como puedes ver, ¡desarrollar una extensión de Chrome nunca ha sido tan fácil!

    Si utiliza Node.js y Grunt por sus funciones para ahorrar tiempo, AngularJS como marco de desarrollo y Chrome Web Store para distribución, todo lo que necesita es una buena idea.

    Espero que hayas disfrutado leyendo este artículo. Si fue demasiado largo para leerlo de una sola vez, considere usar Markticle .

    Otras lecturas

    • Pruebas móviles: emuladores, simuladores y depuración remota
    • Crear una extensión de navegador para todos los navegadores
    • Cómo escribir JavaScript rápido y con memoria eficiente
    • Revisando las DevTools de Firefox

    (il, al, mrn)Explora más en

    • Codificación
    • Herramientas
    • CSS
    • javascript





    Tal vez te puede interesar:

    1. 50 herramientas útiles de JavaScript
    2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
    3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
    4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

    Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas

    Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas

    ¡Registro! Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Índice Conocimi

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-una-extension-de-chrome-guardar-para-mas-tarde-con-herramientas-web-modernas-870-0.jpg

    2024-05-20

     

    Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas
    Creación de una extensión de Chrome "Guardar para más tarde" con herramientas web modernas

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20