Comment construire une extension Chrome pour résumer et sauvegarder des pages web.
Introduction
Bienvenue dans le tutoriel d'aujourd'hui sur la construction d'une extension Chrome qui résume et enregistre les pages web. Cet outil puissant peut t'aider à créer des résumés concis d'articles et de pages Web, en les stockant dans une base de connaissances pour pouvoir les consulter facilement.
Ce dont tu as besoin
Configuration de ton environnement
Étape 1 : Créer un fichier de manifeste
Commence par créer un manifest.json fichier. Ce fichier contient les métadonnées nécessaires au fonctionnement de l'extension 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"
}
}
Étape 2 : Créer des options et des fichiers d'arrière-plan
Ajoute un options.html et son fichier JavaScript correspondant, options.jspour gérer les paramètres des points de terminaison et des clés de l'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 background.jsTu peux aussi créer des menus contextuels et gérer des actions.
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"]
});
});
Création de la fenêtre contextuelle
Ensuite, crée popup.html et popup.js pour gérer les interactions au sein de la fenêtre contextuelle.
<!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
}
});
Étape 3 : Nœud tardif et API
Mets en place ton backend en utilisant Late Node. Assure-toi de gérer les webhooks et la validation des clés API, en appelant Staco ou OpenAI pour résumer le contenu.
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 });
}
});
Utilise Markup Go pour convertir les URL en images et le markdown en PDF, en les enregistrant sur Google Drive et Notion.
Déployer et tester
Charge ton extension décompressée dans le mode développeur de Chrome. Teste chaque fonctionnalité pour t'assurer que ton extension résume et enregistre le contenu comme prévu. Dépanne les problèmes éventuels et optimise la vitesse et la fiabilité.
Conclusion
Construire une extension Chrome pour résumer et enregistrer des pages web peut considérablement rationaliser ton flux de travail. Avec des outils comme Late Node, Staco et Markup Go, l'intégration de fonctionnalités robustes devient plus simple.
Si ce tutoriel t'a été utile, n'oublie pas de t'abonner et d'aimer la vidéo. Laisse tes suggestions ou tes questions dans les commentaires ci-dessous.
.svg){kind=icon}
