Cómo crear una extensión de Chrome para resumir y guardar páginas web

Introducción

Bienvenido al tutorial de hoy sobre cómo crear una extensión de Chrome que resuma y guarde páginas web. Esta potente herramienta puede ayudarte a crear resúmenes concisos de artículos y páginas web, almacenándolos en una base de conocimientos para facilitar su consulta.

Qué necesitarás

Configurar tu entorno

Paso 1: Crear archivo de manifiesto

Empieza por crear un manifiesto.json archivo. Este archivo contiene los metadatos necesarios para que funcione la extensión de Chrome.

{
 "version": "1.0",
 "name": "Web Summarizer",
 "description": "Summarize and save web pages",
 "permissions": ["activeTab", "scripting", "storage"],
 "background": {
   "service_worker": "background.js"
 },
 "action": {
   "default_popup": "popup.html",
   "default_icon": "images/icon.png"
 }
}

Paso 2: Crear archivos de opciones y de fondo

Añade una opciones.html y su correspondiente archivo JavaScript, opciones.jspara gestionar la configuración de los puntos finales y las claves de la API.

<!DOCTYPE html>
<html>
<head>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
 <script defer src="options.js"></script>
</head>
<body>
 <div>
   <label for="api-endpoint">API Endpoint:</label>
   <input type="text" id="api-endpoint" name="api-endpoint" class="border">
   <label for="api-key">API Key:</label>
   <input type="text" id="api-key" name="api-key" class="border">
   <button id="save">Save</button>
   <span id="status"></span>
 </div>
</body>
</html>

En fondo.js, configura menús contextuales y gestiona acciones.

chrome.runtime.onInstalled.addListener(() => {
 chrome.contextMenus.create({
   id: "summarizePage",
   title: "Summarize Page",
   contexts: ["page"]
 });
 chrome.contextMenus.create({
   id: "summarizeSave",
   title: "Summarize and Save",
   contexts: ["page"]
 });
 chrome.contextMenus.create({
   id: "openOptions",
   title: "Open Options",
   contexts: ["browser_action"]
 });
});

Crear la ventana emergente

A continuación, crea popup.html y popup.js para gestionar las interacciones dentro de la ventana emergente.

<!DOCTYPE html>
<html>
<head>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
 <script defer src="popup.js"></script>
</head>
<body>
 <div>
   <button id="summarize-page">Summarize Page</button>
   <button id="summarize-save">Summarize and Save</button>
 </div>
</body>
</html>document.addEventListener('DOMContentLoaded', function () {
 let summarizeButton = document.getElementById('summarize-page');
 let saveButton = document.getElementById('summarize-save');
 summarizeButton.addEventListener('click', summarizePage);
 saveButton.addEventListener('click', summarizeAndSave);

 function summarizePage() {
   // Logic to summarize page
 }

 function summarizeAndSave() {
   // Logic to summarize and save
 }
});

Paso 3: Nodo Tardío y APIs

Configura tu backend utilizando Late Node. Asegúrate de gestionar los webhooks y la validación de la clave API, llamando a Staco u OpenAI para resumir el contenido.

lateNode.createWebhook({
 path: '/api/summary',
 handler: async (req, res) => {
   const { action, content, apiKey } = req.body;
   let summary = await getSummary(content, apiKey);
   return res.status(200).json({ message: summary });
 }
});

Utiliza Markup Go para convertir URLs en imágenes y markdown en PDFs, guardándolos en Google Drive y Notion.

Despliega y prueba

Carga tu extensión desempaquetada en el modo desarrollador de Chrome. Prueba cada función para asegurarte de que tu extensión resume y guarda el contenido como se espera. Soluciona cualquier problema y optimiza la velocidad y la fiabilidad.

Conclusión

Crear una extensión de Chrome para resumir y guardar páginas web puede agilizar significativamente tu flujo de trabajo. Con herramientas como Late Node, Staco y Markup Go, integrar una funcionalidad robusta resulta más sencillo.

Si este tutorial te ha resultado útil, suscríbete y dale a "Me gusta" al vídeo. Deja tus sugerencias o preguntas en los comentarios.

Otros vídeos