Chrome Extension

Cohere Tutorial: Erstellung Ihrer Chrome-Erweiterung zur Artikelsummarisation

Cohere Chrome Extension tutorial example showing code implementation and interface.

Steigern Sie Ihr Lesen: Cohere Chrome-Erweiterung Tutorial zur Artikelsummarisation

Hallo! Haben Sie sich schon einmal unter Zeitdruck gefühlt, aber mussten unbedingt einen langen Artikel lesen? Keine Sorge! In diesem einzigartigen Coherent-Anwendungs-Tutorial entdecken Sie die Geheimnisse der Erstellung einer maßgeschneiderten Google Chrome-Erweiterung, um jeden Artikel zu kondensieren und die Lesezeit erheblich zu verkürzen. Lassen Sie die Magie geschehen!

Bitte beachten Sie, dass ein grundlegendes Verständnis von HTML, CSS und JavaScript erforderlich ist - aber hey, nichts, was man nicht schnell erlernen kann!

Wie erstellt man eine Chrome-Erweiterung?

Wir beginnen mit der Erstellung einer Erweiterung, indem wir die entsprechenden Dateien einrichten. Meine Dateistruktur sieht folgendermaßen aus:

  • popup Verzeichnis enthält die .html-Datei für das Erweiterungs-Popup, das wir nicht so oft verwenden werden, ich werde nur den Namen der Erweiterung hier einfügen.
  • scripts Verzeichnis hat eine .js-Datei für die Logik der Erweiterung - Generierung von Schaltflächen und Zusammenfassungen.
  • styles Verzeichnis beinhaltet eine .css-Datei für das Styling der Erweiterung.
  • manifest.json ist eine Datei, die alle Informationen über die Erweiterung enthält. Wir beginnen damit.

Manifest-Datei

Wie erwähnt, enthält manifest.json alle wichtigen Details über die Erweiterung im JSON-Format. Die folgenden Elemente sind entscheidend:

  • css - Pfad zu unserer css-Datei
  • js - Pfad zu unserer js-Datei
  • matches - Liste der Domains, auf denen wir unsere Erweiterung verwenden möchten (zum Beispiel: medium.com, towardsai.net, towardsdatascience.com, levelup.gitconnected.com, aber fügen Sie nach Bedarf weitere Domains hinzu).

Erweiterung im Browser laden

Um die Erweiterung zu laden, navigieren Sie zu Ihren Browsereinstellungen > Erweiterungen. Aktivieren Sie den Entwicklermodus und klicken Sie auf die Schaltfläche "Entpackte Erweiterung laden" in der oberen linken Ecke. Wählen Sie Ihren Erweiterungsordner aus und Sie sind bereit!

Lasst uns programmieren!

Ich werde eine grundlegende HTML-Vorlage mit dem Namen der Erweiterung zur index.html-Datei hinzufügen.

index.css

Hier werde ich Stile für die Schaltflächen hinzufügen, die für die Zusammenfassung verwendet werden. Während sie momentan vielleicht nicht ästhetisch ansprechend sind, sind sie funktional. Ich werde die notwendigen Klassen im nächsten Abschnitt erklären.

index.js

In diesem Teil werden wir die Kernlogik der Erweiterung implementieren. Zunächst erstellen wir eine Funktion, um Schaltflächen für die Zusammenfassung zu generieren. Wir werden document.createElement verwenden, um Schaltflächen zu erstellen, und document.body.appendChild, um sie zur Webseite hinzuzufügen. Ereignis-Listener werden diesen Schaltflächen hinzugefügt, sodass sie beim Klicken die Zusammenfassungsfunktion auslösen.

Wir müssen die Schaltfläche neben dem Benutzerfoto positionieren. Dies erfordert, die Schaltfläche an zwei Stellen hinzuzufügen - in der Seitenleiste für die Desktopansicht und in der unteren Leiste für mobile Geräte. Wir werden die Entwicklertools nutzen, um die Elementauswähler für diese Komponenten zu erhalten. Je nachdem, ob wir auf die Hauptseite oder direkt auf einen Artikel zugreifen, werden sich die Auswähler leicht unterscheiden, was wir im Handbuch detailliert erläutern werden.

Wir werden drei wesentliche Funktionen für unser Tutorial erstellen - loadButtons, prediction und cohereReq.

Schaltflächen laden

Schaltflächen sollten laden, wenn die Seite erfolgreich geladen wird, außer auf der Homepage. Für die Hauptseite macht es mehr Sinn, sie bei Benutzerinteraktionen wie einem Klick oder einem Scrollereignis zu laden, da das onload Ereignis hier nicht ausgelöst wird. Lassen Sie uns das umsetzen:

window.onload = function() {
    // Ihre Logik zum Laden der Schaltflächen hier...
};

Zusammenfassungslogik

Als nächstes werden wir die Funktionen für die Zusammenfassung implementieren. Wir werden die Funktion cohereReq verwenden, um die Zusammenfassung von der Cohere-API zu erhalten.

Jetzt lassen Sie uns Daten von der Seite extrahieren und die Funktion cohereReq aufrufen. Dies wird innerhalb der Funktion prediction ausgeführt.

Testen!

Nun, lass uns Medium erkunden und unsere Erweiterung testen!

Derzeit ist unsere Ausgabe auf die Konsole beschränkt. Dies ist absichtlich so gestaltet, um Platz für Ihre Verbesserungen zu lassen. Fordern Sie sich heraus, die Leistung des Modells zu verbessern, indem Sie das Prompt überarbeiten! Erstellen Sie ein visuell ansprechendes Popup in popup.html und zeigen Sie die Ergebnisse im Popup mit einem Lade-Symbol an, während Sie auf die Antwort warten. Sie können sogar die Hauptschaltfläche für eine bessere Benutzererfahrung modifizieren. Präsentieren Sie Ihre Ergebnisse auf unserem Discord-Server im Textkanal des Tutorials. Ich warte gespannt darauf, Ihre großartigen Kreationen zu sehen!

Verändern Sie Ihr Surferlebnis!

Erschaffen Sie mühelos eine CoHERE-Zusammenfassungs-Chrome-Erweiterung, die Ihr Leseerlebnis verbessert. Entdecken Sie die aufregende Welt von CoHERE-Tutorials und lernen Sie, wie Sie eine KI-unterstützte Zusammenfassungs-Chrome-Erweiterung wie ein Profi erstellen können! Beginnen Sie eine Reise durch die AI-Hackathons von lablab.ai und verwandeln Sie Ihre brillanten App-Ideen in nur 7 Tagen in die Realität. Tauchen Sie ein in eine Welt reichhaltiger und innovativer Cohere-Anwendungen, um Ihre Fähigkeiten weiter zu steigern.

Weiterlesen

Illustration of AI agents collaborating in a multi-agent system using CrewAI.
Image illustrating Stable Diffusion API integration in Google Colab.

Hinterlasse einen Kommentar

Alle Kommentare werden vor der Veröffentlichung geprüft.

Diese Website ist durch hCaptcha geschützt und es gelten die allgemeinen Geschäftsbedingungen und Datenschutzbestimmungen von hCaptcha.