Wie man eine Chrome-Erweiterung zum Zusammenfassen und Speichern von Webseiten erstellt
Einführung
Willkommen zu unserem heutigen Tutorial über die Erstellung einer Chrome-Erweiterung, die Webseiten zusammenfasst und speichert. Mit diesem leistungsstarken Tool kannst du prägnante Zusammenfassungen von Artikeln und Webseiten erstellen und sie in einer Wissensdatenbank speichern, damit du sie leicht nachschlagen kannst.
Was du brauchen wirst
Einrichten deiner Umgebung
Schritt 1: Manifestdatei erstellen
Beginne mit der Erstellung einer manifest.json Datei. Diese Datei enthält die Metadaten, die notwendig sind, damit die Chrome-Erweiterung funktioniert.
{
"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"
}
}
Schritt 2: Optionen und Hintergrunddateien erstellen
Hinzufügen einer optionen.html Datei und die dazugehörige JavaScript-Datei, options.jsum Einstellungen für API-Endpunkte und Schlüssel zu verwalten.
<!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>
Unter background.jsKontextmenüs einrichten und Aktionen ausführen.
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"]
});
});
Das Popup erstellen
Als nächstes erstellst du popup.html und popup.js um die Interaktionen innerhalb des Popup-Fensters zu verwalten.
<!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
}
});
Schritt 3: Später Knotenpunkt und APIs
Richte dein Backend mit Late Node ein. Stelle sicher, dass du die Webhooks und die Validierung der API-Schlüssel verwaltest und Staco oder OpenAI für die Zusammenfassung der Inhalte aufrufst.
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 });
}
});
Verwende Markup Go, um URLs in Bilder und Markdown in PDFs umzuwandeln und diese in Google Drive und Notion zu speichern.
Einsetzen und testen
Lade deine entpackte Erweiterung im Entwicklermodus von Chrome. Teste jede Funktion, um sicherzustellen, dass deine Erweiterung die Inhalte wie erwartet zusammenfasst und speichert. Behebe alle Probleme und optimiere die Geschwindigkeit und Zuverlässigkeit.
Fazit
Die Entwicklung einer Chrome-Erweiterung zum Zusammenfassen und Speichern von Webseiten kann deinen Arbeitsablauf erheblich vereinfachen. Mit Tools wie Late Node, Staco und Markup Go wird es einfacher, robuste Funktionen zu integrieren.
Wenn du diese Anleitung hilfreich fandest, abonniere sie und mag das Video. Hinterlasse Vorschläge oder Fragen in den Kommentaren unten.
.svg){kind=icon}
