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.
.svg){kind=icon}
