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 ayudarle a crear resúmenes concisos de artículos y páginas web, almacenándolos en una base de conocimientos para una fácil referencia.
Que necesitarás
Configuración de su entorno
Paso 1: Crear archivo de manifiesto
Comience creando un manifest.json archivo. Este archivo contiene los metadatos necesarios para que la extensión de Chrome funcione.
{
"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 opciones y archivos de fondo
Añadir un options.html archivo y su archivo JavaScript correspondiente, options.js, para 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>
In background.js, configurar menús contextuales y manejar 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"]
});
});
Creando 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 API
Configura tu backend con Late Node. Asegúrate de gestionar los webhooks y la validación de la clave API, llamando a Staco o a 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 });
}
});
Utilice Markup Go para convertir URL en imágenes y Markdown en PDF, guardándolos en Google Drive y Notion.
Implementar y probar
Cargue la extensión descomprimida en el modo de desarrollador de Chrome. Pruebe cada función para asegurarse de que la extensión resuma y guarde el contenido como se espera. Solucione los problemas y optimice la aplicación para lograr velocidad y confiabilidad.
Conclusión
Desarrollar una extensión de Chrome para resumir y guardar páginas web puede agilizar significativamente el flujo de trabajo. Con herramientas como Late Node, Staco y Markup Go, la integración de funciones sólidas se vuelve más sencilla.
Si este tutorial te resultó útil, suscríbete y dale Me gusta al video. Deja tus sugerencias o preguntas en los comentarios a continuación.
.svg){kind=icon}
