¡Hola! ¿Alguna vez has tenido que hacer algo urgente y tenías muchas ganas de leer un artículo, aunque fuera muy largo? En este tutorial, aprenderá cómo crear una extensión de Google Chrome que le permitirá resumir un artículo y reducir el tiempo de lectura. ¡Entonces empecemos!
Este tutorial requiere algunos conocimientos de HTML, CSS, JavaScript, ¡pero no es algo que no se pueda aprender rápidamente!
🚀 ¡Comenzamos!
❓ ¿Cómo crear una extensión de Chrome?
Entonces, comenzaremos a crear una extensión creando los archivos apropiados. Mi estructura de archivos se ve así:
popup El directorio contiene el archivo .html para la extensión emergente, no lo usaremos tanto, solo pondré el nombre de la extensión aquí.
scripts El directorio contiene el archivo .js para la lógica de extensión: generación de botones y resumen.
El directorio de estilos contiene un archivo .css para el estilo de la extensión.
manifest.json es un archivo que contiene toda la información sobre la extensión. Empezaremos con eso.
📚 Archivo de manifiesto
Como escribí antes, manifest.json es un archivo que contiene toda la información sobre la extensión. Es un archivo en formato JSON. Este será nuestro contenido para este archivo:
¿Qué será lo más importante para nosotros?
css – Ruta a nuestro archivo cssjs – Ruta a nuestro archivo jsmatches – Lista de dominios donde queremos usar nuestra extensión (en mi caso quiero usarla en medium.com, haciaai.net, haciadatascience.com, levelup.gitconnected.com, pero hay más dominios que puedes usar, siéntase libre de agregar algunos más. Para mí será suficiente)🔁 Cargar extensión al navegador
Para cargar la extensión, vaya al navegador, luego a configuración > extensiones. Active el modo desarrollador y cargue la extensión con el botón en la esquina superior izquierda. Selecciona la carpeta de tu extensión y ¡listo!
📝 ¡Vamos a codificar!
📜 ventana emergente.html
A este archivo solo le pondré una plantilla html básica, con el nombre de la extensión.
🎨 index.css
Aquí pondré algunos estilos para los botones que usaremos para resumir. No serán hermosas, pero por ahora están para cumplir con su papel. Explicaré por qué usaré tales clases en la siguiente sección.
🤖 index.js
Aquí pondremos nuestra lógica para la extensión. Primero, crearemos una función que generará botones para resumir. Usaremos document.createElement para crear botones y document.body.appendChild para añadirlos al cuerpo de la página. También agregaremos detectores de eventos a los botones, por lo que cuando hagamos clic en ellos, llamaremos a la función para resumir.
Queremos poner el botón junto a la foto del usuario. Para hacerlo, debemos agregarlo a dos lugares: la barra lateral, que está disponible para la vista de escritorio, y la barra inferior, para la vista móvil. Para hacerlo, iré a la página y, usando las herramientas de desarrollo, tomaré selectores de elementos para estos elementos. Hay dos situaciones posibles: iremos a la página principal y elegiremos uno de los artículos, o iremos directamente al artículo. Los selectores son ligeramente diferentes en ambas opciones, que se incluirán en la guía.
Crearemos tres funciones que se utilizarán en el tutorial: loadButtons, prediction, cohereReq.
Comenzaremos con los botones de carga. Queremos cargarlos cuando se carga la página, pero no la página de inicio. Si vamos a la página principal, será mejor cargarlos en click o scroll – cuando entramos al artículo desde la página principal, el onload evento no se realiza, por lo que será la solución adecuada para nosotros. Vamos a codificarlo:
Para cargar botones en un evento en particular usaremos window.onload evento:
Ahora codifiquemos funciones para resumir. Usaremos cohereReq función para obtener un resumen de la API de Cohere.
Ahora implementemos la lógica para extraer datos de la página y llamar cohereReq función. Usaremos prediction función para ello.
¡Bien, ahora podemos usarlo! ¡Vamos a Medium y pruébalo!
Como puede ver, solo podemos obtener la respuesta en la consola. Lo hice específicamente para dejarte la mejora. ¡Piensa en ello como un desafío! Intente mejorar el rendimiento del modelo editando el aviso. Crear una ventana emergente agradable en popup.htmly generar una ventana emergente para la respuesta recibida. Crear spinner durante la espera de respuesta. También puede editar el botón principal. ¡Presume el resultado de tu trabajo en nuestro Discord, en el canal de texto del tutorial! ¡Espero ansiosamente ver lo que has logrado crear!
¡Gracias y diviértanse! – Jakub Misiło, científico de datos junior en New Native