Erstellen Sie eine Chrome-Erweiterung von Grund auf mit AI/ML-API, Deepgram Aura und IndexedDB-Integration

Einführung

Das Erstellen einer Chrome-Erweiterung, die KI-Technologien nutzt, kann die Benutzererfahrung erheblich verbessern, indem leistungsstarke Funktionen direkt in den Browser hinzugefügt werden.

In diesem Tutorial behandeln wir den gesamten Prozess der Erstellung einer Chrome-Erweiterung von Grund auf mit AI/ML API, Deepgram Aura und IndexDB, von der Einrichtung bis zur Bereitstellung. Wir beginnen mit der Einrichtung unserer Entwicklungsumgebung, einschließlich der Installation der erforderlichen Tools und der Konfiguration unseres Projekts. Anschließend befassen wir uns mit den Kernkomponenten unserer Chrome-Erweiterung: manifest.json enthält grundlegende Metadaten zu Ihrer Erweiterung, scripts.js, das für das Verhalten unserer Erweiterung verantwortlich ist, und Styles.css, um etwas Stil hinzuzufügen. Wir werden untersuchen, wie diese Technologien über die AI/ML-API in Deepgram Aura integriert werden und wie IndexDB als temporärer Speicher für generierte Audiodateien verwendet wird. Unterwegs besprechen wir Best Practices für die Erstellung der Chrome-Erweiterung, die Bearbeitung von Benutzeranfragen und das Speichern von Daten in der Datenbank. Am Ende dieses Tutorials verfügen Sie über eine solide Grundlage für die Erstellung einer Chrome-Erweiterung und sind für die Erstellung jeder KI-gestützten Chrome-Erweiterung bestens gerüstet.

Lassen Sie uns einen kurzen Überblick über die Technologien geben, die wir nutzen werden.

AI/ML-API

AI/ML API ist eine bahnbrechende Plattform für Entwickler und SaaS-Unternehmer, die modernste KI-Funktionen in ihre Produkte integrieren möchten. Die AI/ML-API bietet einen einzigen Zugriffspunkt auf über 200 hochmoderne KI-Modelle, die alles von NLP bis Computer Vision abdecken.

Hauptfunktionen für Entwickler:

• Umfangreiche Modellbibliothek: 200 vorab trainierte Modelle für schnelles Prototyping und Einsatz
• Anpassungsoptionen: Passen Sie Modelle genau an Ihren spezifischen Anwendungsfall an
• Entwicklerfreundliche Integration: RESTful APIs und SDKs für die nahtlose Integration in Ihren Stack
• Serverlose Architektur: Fokus auf Codierung, nicht auf Infrastrukturmanagement

Tiefer Einblick in die AI/ML-API-Dokumentation; https://docs.aimlapi.com/

Chrome-Erweiterung

Die Chrome-Erweiterung ist ein kleines Softwareprogramm, das die Funktionalität des Google Chrome-Webbrowsers ändert oder erweitert. Diese Erweiterungen werden mithilfe von Webtechnologien wie HTML, CSS und JavaScript erstellt und dienen einem einzigen Zweck, sodass sie leicht zu verstehen und zu verwenden sind.

Durchsuchen Sie den Chrome Web Store. https://chromewebstore.google.com/

Deepgram-Aura

Deepgram Aura ist das erste Text-to-Speech (TTS)-KI-Modell, das für Echtzeit-Konversations-KI-Agenten und -Anwendungen entwickelt wurde. Es liefert eine menschenähnliche Sprachqualität mit beispielloser Geschwindigkeit und Effizienz und ist damit bahnbrechend für die Entwicklung reaktionsfähiger Sprach-KI-Erlebnisse mit hohem Durchsatz.

Erfahren Sie mehr über technische Details; https://aimlapi.com/models/aura

IndexDB

IndexedDB ist eine Low-Level-API für die clientseitige Speicherung großer Mengen strukturierter Daten, einschließlich Dateien/Blobs. IndexedDB ist eine JavaScript-basierte objektorientierte Datenbank.

Erfahren Sie mehr über Schlüsselkonzepte und deren Verwendung; https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

Erste Schritte mit der Chrome-Erweiterung

Um eine Chrome-Erweiterung zu erstellen, müssen Sie deren Struktur, Berechtigungen und die Art und Weise verstehen, wie sie mit Webseiten interagiert. Wir beginnen mit der Einrichtung unserer Entwicklungsumgebung und der Erstellung der grundlegenden Dateien, die für unsere Erweiterung erforderlich sind.

Einrichten Ihrer Entwicklungsumgebung

Bevor wir mit dem Codieren beginnen, stellen Sie sicher, dass Sie über Folgendes verfügen:

• Chrome-Browser: Der Browser, in dem wir unsere Erweiterung laden und testen.
• Texteditor oder IDE: Tools wie Visual Studio Code, Sublime Text oder Atom eignen sich zum Bearbeiten von Code. In diesem Tutorial verwenden wir Visual Studio Code.
• Grundkenntnisse in HTML, CSS und JavaScript: Vertrautheit mit diesen Technologien ist für die Erstellung von Chrome-Erweiterungen unerlässlich.

Erstellen der Projektstruktur

Eine minimale Chrome-Erweiterung erfordert mindestens drei Dateien:

• manifest.json: Enthält Metadaten und Konfiguration für die Erweiterung.
• scripts.js: Enthält den JavaScript-Code, der das Verhalten der Erweiterung definiert.
• styles.css: Enthält alle Stile für die UI-Elemente der Erweiterung.

Lassen Sie uns ein Verzeichnis für unser Projekt erstellen und diese Dateien einrichten.
Schritt 1: Erstellen Sie ein neues Verzeichnis
Öffnen Sie Ihr Terminal und führen Sie die folgenden Befehle aus, um einen neuen Ordner für Ihre Erweiterung zu erstellen:

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Schritt 2: Wesentliche Dateien erstellen
Erstellen Sie im neuen Verzeichnis die erforderlichen Dateien:

touch manifest.json
touch scripts.js
touch styles.css

Manifest.json verstehen

Die Datei manifest.json ist das Herzstück Ihrer Chrome-Erweiterung. Es informiert den Browser über Ihre Erweiterung, was sie tut und welche Berechtigungen sie benötigt. Lassen Sie uns tiefer in die richtige Konfiguration dieser Datei eintauchen.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

Wesentliche Felder in manifest.json

Manifest.json muss mindestens Folgendes enthalten:

• manifest_version: Gibt die Version des Manifestdateiformats an. Chrome verwendet derzeit Version 3.
• Name: Der Name Ihrer Erweiterung, wie er den Benutzern angezeigt wird.
• Version: Die Versionsnummer Ihrer Erweiterung gemäß der semantischen Versionierung.

Hinzufügen von Metadaten und Berechtigungen

Über die wesentlichen Felder hinaus fügen wir hinzu:

• Beschreibung: Eine kurze Zusammenfassung dessen, was Ihre Erweiterung tut.
• host_permissions: Gibt an, auf welche Domänen die Erweiterung zugreifen kann. Für unsere Integration mit der AI/ML-API benötigen wir Zugriff auf *.aimlapi.com.
• Berechtigungen: Deklariert die erforderlichen besonderen Berechtigungen, z. B. den Zugriff auf die aktive Registerkarte.
• content_scripts: Definiert Skripte und Stile, die in Webseiten eingefügt werden sollen.
• Symbole: Stellt Symbole für die Erweiterung in verschiedenen Größen bereit.

Erläuterung der Schlüsselfelder

• manifest_version: Auf 3 setzen, um die neuesten Chrome-Erweiterungsfunktionen zu verwenden.
• Name: Wir nennen unsere Erweiterung „Vorlesen“, um ihre Funktionalität widerzuspiegeln.
• Version: Beginnend mit „1.0“ gibt die Erstveröffentlichung an.
• Beschreibung: „Alles in einem beliebigen Tab laut vorlesen“ informiert Benutzer über den Zweck der Erweiterung.
• host_permissions: Der Platzhalter *://*.aimlapi.com/* ermöglicht der Erweiterung die Kommunikation mit jeder Subdomain von goallapi.com, die für API-Aufrufe erforderlich ist.
• Berechtigungen: „activeTab“ ermöglicht der Erweiterung, mit dem Inhalt des aktuellen Tabs zu interagieren.
• content_scripts: Gibt an, dass scripts.js und style.css in alle Webseiten eingefügt werden sollen („“).
• Symbole: Verweist auf Symboldateien für die Erweiterung (stellen Sie sicher, dass Sie über entsprechende Symboldateien in einem Symbolverzeichnis verfügen).

Generierendes Symbol

Öffnen Sie Ihren Browser und gehen Sie zu chatgpt.com. Lassen Sie uns nun ein Symbol für unsere Chrome-Erweiterung generieren. Wir verwenden ein Symbol für verschiedene Größen (das ist völlig in Ordnung).

Geben Sie die folgende Eingabeaufforderung ein:

Erstelle ein Schwarz-Weiß-Symbol für meine Chrome-Erweiterung „Vorlesen“. Mit dieser Erweiterung können Benutzer den spezifischen Text auf der Website hervorheben und anhören. Es handelt sich um eine KI-gestützte Chrome-Erweiterung. Der Hintergrund sollte weiß und einfarbig sein.

Warten Sie ein paar Sekunden, bis ChatGPT das Symbol (Bild) generiert. Klicken Sie auf „Herunterladen“ und benennen Sie es in „icon.png“ um. Dann legen Sie es in den Symbolordner.

Manifest.json wird finalisiert

Wenn alle Felder richtig definiert sind, ermöglicht Ihr manifest.json dem Browser, Ihre Erweiterung zu verstehen und korrekt zu laden.

---

Entwickeln von scripts.js

Die Datei scripts.js enthält die Logik, die das Verhalten Ihrer Erweiterung steuert. Wir skizzieren die wichtigsten Funktionen, die Ihr Skript implementieren muss.

Variablen und Initialisierung

Beginnen Sie mit der Einrichtung der erforderlichen Variablen:

• API-Schlüssel: Sie benötigen einen API-Schlüssel von der AI/ML-API-Plattform, um Ihre Anfragen zu authentifizieren.
• Overlay-Elemente: Erstellen Sie DOM-Elemente für das Overlay und die Schaltfläche „Vorlesen“.
• Auswahlvariablen: Speichern Sie Informationen über den vom Benutzer ausgewählten Text und seine Position.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Handhabung der Textauswahl

Ihre Erweiterung sollte erkennen, wenn ein Benutzer Text auf einer Webseite auswählt:

• Ereignis-Listener: Hängen Sie einen Mouseup-Ereignis-Listener an das Dokument an, um zu erkennen, wann der Benutzer mit der Textauswahl fertig ist.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• Auswahlerkennung: Überprüfen Sie, ob der ausgewählte Text nicht leer ist, und speichern Sie ihn.

touch manifest.json
touch scripts.js
touch styles.css

• Overlay-Positionierung: Berechnen Sie, wo das Overlay platziert werden soll, sodass es sich in der Nähe des ausgewählten Texts befindet.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• Overlay-Verwaltung: Stellen Sie sicher, dass alle vorhandenen Overlays entfernt werden, bevor Sie ein neues hinzufügen.

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

Vollständiger Code:

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

Interaktion mit der AI/ML API

Wenn der Benutzer auf die Schaltfläche „Vorlesen“ klickt:

• Eingabevalidierung: Überprüfen Sie, ob der ausgewählte Text die Längenanforderungen erfüllt.

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• Schaltfläche deaktivieren: Verhindern Sie Mehrfachklicks, indem Sie die Schaltfläche während der Verarbeitung deaktivieren.

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• API-Anfrage: Senden Sie eine POST-Anfrage mit dem ausgewählten Text zur Text-in-Sprache-Konvertierung an die AI/ML-API.

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

• Fehlerbehandlung: Behandeln Sie alle Fehler, die während der API-Anfrage auftreten, ordnungsgemäß.

// Function to handle text selection
document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  const selection = window.getSelection();
  const text = selection.toString().trim();
  if (text !== '') {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();

    // Set the position of the overlay
    overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
    overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

    selectedText = text;
    selectedRange = range;

    // Remove existing overlay if any
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }

    // Append the overlay to the document body
    document.body.appendChild(overlay);
  } else {
    // Remove overlay if no text is selected
    const existingOverlay = document.getElementById('read-aloud-overlay');
    if (existingOverlay) {
      existingOverlay.remove();
    }
  }
});

• Audiowiedergabe: Sobald das Audio empfangen wurde, spielen Sie es dem Benutzer wieder.

if (selectedText.length > 200) {
// ...code
}

Verwendung von IndexedDB als Speicher

Um Audiodateien effizient zu verwalten:

• Datenbank öffnen: Erstellen oder öffnen Sie eine IndexedDB-Datenbank zum Speichern von Audio-Blobs.

// Disable the button
askButton.disabled = true;
askButton.innerText = 'Loading...';

• Audio speichern: Speichern Sie den Audio-Blob in IndexedDB, nachdem Sie ihn von der API empfangen haben.

// Send the selected text to your AI/ML API for TTS
const response = await fetch('https://api.aimlapi.com/tts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${AIML_API_KEY}`, // Replace with your actual API key
  },
  body: JSON.stringify({
    model: '#g1_aura-asteria-en',  // Replace with your specific model if needed
    text: selectedText
  })
});

• Audio abrufen: Rufen Sie den Audio-Blob von IndexedDB zur Wiedergabe ab.

try {

  // ...code

  if (!response.ok) {
    throw new Error('API request failed');
  }

  // ...code

} catch (error) {
  console.error('Error:', error);
  askButton.disabled = false;
  askButton.innerText = 'Read Aloud';
  alert('An error occurred while fetching the audio.');
}

• Audio löschen: Entfernen Sie den Audio-Blob nach der Wiedergabe aus der Datenbank, um Speicherplatz freizugeben.

// Play the audio
audio.play();

Bereinigung und Benutzererfahrung

• Overlay-Entfernung: Entfernen Sie das Overlay, wenn der Benutzer auf eine andere Stelle klickt oder die Auswahl des Texts aufhebt.

// Open IndexedDB
const db = await openDatabase();
const audioId = 'audio_' + Date.now(); // Generate a unique ID for the audio

• Schaltfläche erneut aktivieren: Stellen Sie sicher, dass die Schaltfläche „Vorlesen“ nach Abschluss der Verarbeitung wieder aktiviert wird.
• Benutzer-Feedback: Geben Sie visuelle Hinweise, wie z. B. das Ändern des Schaltflächentexts in „Laden…“, um den Benutzer darüber zu informieren, dass die Verarbeitung im Gange ist.

Vollständiger Code:

// Save audio blob to IndexedDB
await saveAudioToIndexedDB(db, audioId, audioBlob);

---

Implementieren von IndexedDB-Funktionen

IndexedDB ist ein leistungsstarkes clientseitiges Speichersystem, mit dem wir große Datenmengen, einschließlich Dateien und Blobs, speichern können.

Zu implementierende Funktionalität

Sie müssen vier Hauptfunktionen erstellen, um mit IndexedDB zu interagieren:

• openDatabase(): Öffnet eine Verbindung zur Datenbank und erstellt einen Objektspeicher, falls dieser nicht vorhanden ist.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

• saveAudioToIndexedDB(): Speichert den Audio-Blob mit einer eindeutigen ID.

touch manifest.json
touch scripts.js
touch styles.css

• getAudioFromIndexedDB(): Ruft den Audio-Blob mithilfe seiner ID ab.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

• deleteAudioFromIndexedDB(): Löscht den Audio-Blob nach der Wiedergabe.

// Set your AIML_API_KEY key
const AIML_API_KEY = ''; // Replace with your AIML_API_KEY key

// Create the overlay
const overlay = document.createElement('div');
overlay.id = 'read-aloud-overlay';

// Create the "Read Aloud" button
const askButton = document.createElement('button');
askButton.id = 'read-aloud-button';
askButton.innerText = 'Read Aloud';

// Append the button to the overlay
overlay.appendChild(askButton);

// Variables to store selected text and range
let selectedText = '';
let selectedRange = null;

Schlüsselkonzepte

• Transaktionen: Alle Interaktionen mit IndexedDB finden innerhalb einer Transaktion statt. Stellen Sie sicher, dass Sie den richtigen Transaktionsmodus angeben (schreibgeschützt oder schreibgeschützt).
• Objektspeicher: Ähnlich wie Tabellen in SQL-Datenbanken speichern Objektspeicher die Daten. Wir verwenden einen Objektspeicher namens „audios“.
• Fehlerbehandlung: Behandeln Sie Fehler bei Datenbankvorgängen immer, um unerwartetes Verhalten zu verhindern.

---

Styling mit style.css

Um ein nahtloses Benutzererlebnis zu bieten, sollte Ihre Erweiterung über eine saubere und intuitive Benutzeroberfläche verfügen.

Gestalten Sie das Overlay und die Schaltfläche

Stile definieren für:

• Overlay-Positionierung: Absolute Positionierung, um das Overlay in der Nähe des ausgewählten Textes zu platzieren.

document.addEventListener('mouseup', (event) => {
  console.log('mouseup event: ', event);
  //...code
}

• Schaltflächendarstellung: Gestalten Sie die Schaltfläche „Vorlesen“ so, dass sie zum Overlay passt und leicht anklickbar ist.

const selection = window.getSelection();
const text = selection.toString().trim();
if (text !== '') {
  const range = selection.getRangeAt(0);
  const rect = range.getBoundingClientRect();

• Hover-Effekte: Verbessern Sie die Benutzerinteraktion mit Hover-Effekten auf der Schaltfläche.

// Set the position of the overlay
overlay.style.top = `${window.scrollY + rect.top - 50}px`; // Adjust as needed
overlay.style.left = `${window.scrollX + rect.left + rect.width / 2 - 70}px`; // Adjust to center the overlay

selectedText = text;
selectedRange = range;

• Deaktivierter Zustand: Zeigt visuell an, wenn die Schaltfläche deaktiviert ist.

// Remove existing overlay if any
const existingOverlay = document.getElementById('read-aloud-overlay');
if (existingOverlay) {
  existingOverlay.remove();
}

// Append the overlay to the document body
document.body.appendChild(overlay);
} else {
  // Remove overlay if no text is selected
  const existingOverlay = document.getElementById('read-aloud-overlay');
  if (existingOverlay) {
    existingOverlay.remove();
  }
}

---

Erhalten und Festlegen Ihres API-Schlüssels

Um mit der AI/ML-API und dem Deepgram Aura-Modell zu interagieren, benötigen Sie einen API-Schlüssel.

Schritte zum Erhalten Ihres API-Schlüssels

• Besuchen Sie die AI/ML-API-Plattform: Navigieren Sie zu aimlapi.com.

• Anmelden: Klicken Sie auf „API-Schlüssel abrufen“ und melden Sie sich mit Ihrem Google-Konto an.

• Greifen Sie auf das Dashboard zu: Nach der Anmeldung werden Sie zu Ihrem Dashboard weitergeleitet.

• Erstellen Sie einen API-Schlüssel: Gehen Sie zur Registerkarte „Schlüsselverwaltung“ und klicken Sie auf „API-Schlüssel erstellen“.

• Kopieren Sie den API-Schlüssel: Kopieren Sie nach der Generierung Ihren API-Schlüssel.

Festlegen des API-Schlüssels in Ihrer Erweiterung

• Sicherheitshinweis: Kodieren Sie Ihren API-Schlüssel niemals fest in Ihre Skripts, wenn Sie planen, Ihre Erweiterung zu verteilen. Erwägen Sie die Verwendung von Umgebungsvariablen oder die Aufforderung an den Benutzer, seinen API-Schlüssel einzugeben.

mkdir my-first-chrome-extension
cd my-first-chrome-extension

Geben Sie nun Ihren API-Schlüssel ein:

touch manifest.json
touch scripts.js
touch styles.css

Aber es wird nicht sofort funktionieren. Für die Verwendung von .env in Chrome-Erweiterungen sind weitere zusätzliche Konfigurationen erforderlich. Wir werden in den kommenden Tutorials darüber sprechen.

• Zum Testen: Weisen Sie in Ihrer scripts.js Ihren API-Schlüssel der Variablen zu, die die Authentifizierung für API-Anfragen verarbeitet.

{
  "manifest_version": 3,
  "name": "Read Aloud",
  "version": "1.0",
  "description": "Read Aloud anything in any tab",
  "host_permissions": [
    "*://*.aimlapi.com/*"
],
  "permissions": [
      "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["scripts.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon.png",
    "48": "icons/icon.png",
    "128": "icons/icon.png"
  }
}

---

Ausführen und Testen der Erweiterung

Sobald alle Komponenten vorhanden sind, ist es an der Zeit, Ihre Erweiterung in den Chrome-Browser zu laden und sie in Aktion zu sehen.

Laden der Erweiterung

• Erweiterungsseite öffnen: Navigieren Sie in Chrome zu chrome://extensions/.

Entwicklermodus aktivieren: Schalten Sie den „Entwicklermodus“-Schalter in der oberen rechten Ecke um.

• Entpackte Erweiterung laden: Klicken Sie auf „Entpackt laden“ und wählen Sie Ihren My-First-Chrome-Extension-Ordner aus. (P.S. in meinem Fall ist es Aimlapi-Tutorial-One).

• Installation überprüfen: Die Erweiterung sollte nun mit ihrem Namen und Symbol in der Liste erscheinen.

Funktionalität testen

• Zu einer Webseite navigieren: Öffnen Sie eine Webseite mit Textinhalt, z. B. einem Artikel oder Blogbeitrag.
• Text auswählen: Markieren Sie einen Absatz oder Satz.
• Interaktion mit dem Overlay: Das „Laden…“-Overlay sollte über dem ausgewählten Text erscheinen. Warten Sie ein paar Sekunden, während Sie den Text-zu-Sprache-Vorgang starten.
• Hören: Nach einer kurzen Bearbeitungszeit sollten Sie hören, wie der Text von der KI-Stimme vorgelesen wird.

Tipps zur Fehlerbehebung

• Overlay wird nicht angezeigt: Überprüfen Sie, ob content_scripts in manifest.json korrekt angegeben sind.
• Keine Audiowiedergabe: Stellen Sie sicher, dass Ihr API-Schlüssel richtig eingestellt ist und dass API-Anfragen erfolgreich sind.
• Konsolenfehler: Verwenden Sie die Entwicklertools des Browsers, um etwaige JavaScript-Fehler oder Netzwerkprobleme zu überprüfen.

---

Projektzusammenfassung

In diesem Tutorial haben wir:

• Einrichten der Entwicklungsumgebung: Erstellt die erforderliche Projektstruktur und Dateien für eine Chrome-Erweiterung.
• Konfigurierte manifest.json: Definierte wesentliche Metadaten und Berechtigungen, um die Bedeutung jedes Feldes zu verstehen.
• scripts.js entwickelt: Die Logik für die Handhabung der Textauswahl, die Interaktion mit der AI/ML-API und die Verwaltung der Audiowiedergabe skizziert.
• Implementierte IndexedDB-Integration: Erfahren Sie, wie Sie IndexedDB zum lokalen Speichern und Abrufen von Audiodateien verwenden.
• Die Erweiterung wurde mit „styles.css“ gestylt: CSS wurde angewendet, um die Benutzeroberfläche zu verbessern und das Benutzererlebnis zu verbessern.
• API-Schlüssel erhalten und eingerichtet: Einen API-Schlüssel von der AI/ML-API-Plattform erhalten und ihn sicher in unsere Erweiterung integriert.
• Die Erweiterung geladen und getestet: Die Erweiterung in Chrome bereitgestellt und ihre Funktionalität auf Live-Webseiten validiert.
• Besprochene Best Practices: Betont die Bedeutung von Sicherheit, Benutzererfahrung und Fehlerbehandlung bei der Erweiterungsentwicklung.

---

Nächste Schritte

Mit einer soliden Grundlage können Sie Ihre Erweiterung weiter verbessern:

• Anpassungsoptionen hinzufügen: Ermöglichen Sie Benutzern die Auswahl verschiedener Stimmen oder Sprachen.
• Fehlerbehandlung verbessern: Stellen Sie benutzerfreundliche Nachrichten und Fallback-Optionen bereit, wenn die API nicht verfügbar ist.
• Leistung optimieren: Implementieren Sie Caching-Strategien oder optimieren Sie API-Anfragen, um die Latenz zu reduzieren.
• Veröffentlichen Sie Ihre Erweiterung: Teilen Sie Ihre Kreation mit anderen, indem Sie sie im Chrome Web Store veröffentlichen.

---

Abschluss

Herzlichen Glückwunsch zum Erstellen einer Chrome-Erweiterung, die erweiterte KI-Funktionen integriert! Dieses Projekt zeigt, wie durch die Kombination von Webtechnologien mit leistungsstarken APIs ansprechende und zugängliche Benutzererlebnisse geschaffen werden können. Sie verfügen nun über das Wissen, diese Erweiterung zu entwickeln und zu erweitern oder völlig neue Erweiterungen zu erstellen, die AI/ML-APIs nutzen.

Vollständige Implementierung auf Github verfügbar; https://github.com/TechWithAbee/Building-a-Chrome-Extension-from-Scratch-with-AI-ML-API-Deepgram-Aura-and-IndexDB-Integration

---

Sollten Sie Fragen haben oder weitere Hilfe benötigen, zögern Sie nicht, uns per E-Mail an abdibrokhim@gmail.com zu kontaktieren.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Chrome-Erweiterung von Grund auf mit AI/ML-API, Deepgram Aura und IndexedDB-Integration. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!