Comment créer une extension Chrome pour résumer et enregistrer des pages Web
Introduction
Bienvenue dans le tutoriel d'aujourd'hui sur la création d'une extension Chrome qui résume et enregistre des pages Web. Cet outil puissant peut vous aider à créer des résumés concis d'articles et de pages Web, en les stockant dans une base de connaissances pour une référence facile.
Ce dont tu auras besoin
Configuration de votre environnement
Étape 1 : Créer un fichier manifeste
Commencez 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
Ajouter un options.html fichier et son fichier JavaScript correspondant, options.js, pour 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>
In background.js, configurer 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 du pop-up
Ensuite, créez popup.html et popup.js pour gérer les interactions au sein de la fenêtre popup.
<!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
Configurez votre backend à l'aide de Late Node. Assurez-vous 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 });
}
});
Utilisez Markup Go pour convertir les URL en images et Markdown en PDF, en les enregistrant sur Google Drive et Notion.
Déployer et tester
Chargez votre extension décompressée en mode développeur de Chrome. Testez chaque fonctionnalité pour vous assurer que votre extension résume et enregistre le contenu comme prévu. Résolvez les problèmes et optimisez la vitesse et la fiabilité.
Pour aller plus loin
Créer une extension Chrome pour résumer et enregistrer des pages Web peut considérablement simplifier votre flux de travail. Avec des outils comme Late Node, Staco et Markup Go, l'intégration de fonctionnalités robustes devient plus simple.
Si vous avez trouvé ce tutoriel utile, n'hésitez pas à vous abonner et à aimer la vidéo. Laissez vos suggestions ou questions dans les commentaires ci-dessous.
.svg){kind=icon}
