So erstellen Sie eine Chrome-Erweiterung zum Zusammenfassen und Speichern von Webseiten
Einleitung
Willkommen zum heutigen Tutorial zum Erstellen einer Chrome-Erweiterung, die Webseiten zusammenfasst und speichert. Mit diesem leistungsstarken Tool können Sie prägnante Zusammenfassungen von Artikeln und Webseiten erstellen und diese in einer Wissensdatenbank speichern, damit Sie leicht darauf zugreifen können.
Was wirst du brauchen
Einrichten Ihrer Umgebung
Schritt 1: Manifestdatei erstellen
Beginnen Sie mit der Erstellung eines manifest.json Datei. Diese Datei enthält die Metadaten, die für die Funktion der Chrome-Erweiterung erforderlich sind.
{
"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
Fügen Sie ein ein options.html Datei und die entsprechende JavaScript-Datei, options.js, um 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>
In background.js, Kontextmenüs einrichten und Aktionen handhaben.
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"]
});
});
Erstellen des Popups
Als nächstes erstellen 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 Knoten und APIs
Richten Sie Ihr Backend mit Late Node ein. Stellen Sie sicher, dass Sie die Webhooks und die API-Schlüsselvalidierung handhaben und Staco oder OpenAI zum Zusammenfassen von Inhalten aufrufen.
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 });
}
});
Verwenden Sie Markup Go, um URLs in Bilder und Markdown in PDFs umzuwandeln und diese in Google Drive und Notion zu speichern.
Bereitstellen und Testen
Laden Sie Ihre entpackte Erweiterung im Entwicklermodus von Chrome. Testen Sie jede Funktion, um sicherzustellen, dass Ihre Erweiterung Inhalte wie erwartet zusammenfasst und speichert. Beheben Sie alle Probleme und optimieren Sie Geschwindigkeit und Zuverlässigkeit.
Schlussfolgerung
Das Erstellen einer Chrome-Erweiterung zum Zusammenfassen und Speichern von Webseiten kann Ihren Arbeitsablauf erheblich optimieren. Mit Tools wie Late Node, Staco und Markup Go wird die Integration robuster Funktionen einfacher.
Wenn Sie dieses Tutorial hilfreich fanden, abonnieren Sie das Video und liken Sie es. Hinterlassen Sie Vorschläge oder Fragen in den Kommentaren unten.
.svg){kind=icon}
