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 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:
Tiefer Einblick in die AI/ML-API-Dokumentation; https://docs.aimlapi.com/
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 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
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
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.
Bevor wir mit dem Codieren beginnen, stellen Sie sicher, dass Sie über Folgendes verfügen:
Eine minimale Chrome-Erweiterung erfordert mindestens drei Dateien:
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
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"
}
}
Manifest.json muss mindestens Folgendes enthalten:
Über die wesentlichen Felder hinaus fügen wir hinzu:
Ö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.
Wenn alle Felder richtig definiert sind, ermöglicht Ihr manifest.json dem Browser, Ihre Erweiterung zu verstehen und korrekt zu laden.
Die Datei scripts.js enthält die Logik, die das Verhalten Ihrer Erweiterung steuert. Wir skizzieren die wichtigsten Funktionen, die Ihr Skript implementieren muss.
Beginnen Sie mit der Einrichtung der erforderlichen Variablen:
mkdir my-first-chrome-extension cd my-first-chrome-extension
Ihre Erweiterung sollte erkennen, wenn ein Benutzer Text auf einer Webseite auswählt:
mkdir my-first-chrome-extension cd my-first-chrome-extension
touch manifest.json touch scripts.js touch styles.css
{
"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"
}
}
// 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;
document.addEventListener('mouseup', (event) => {
console.log('mouseup event: ', event);
//...code
}
Wenn der Benutzer auf die Schaltfläche „Vorlesen“ klickt:
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();
}
}
// 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();
}
}
});
if (selectedText.length > 200) {
// ...code
}
Um Audiodateien effizient zu verwalten:
// Disable the button askButton.disabled = true; askButton.innerText = 'Loading...';
// 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
})
});
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.');
}
// Play the audio audio.play();
// Open IndexedDB const db = await openDatabase(); const audioId = 'audio_' + Date.now(); // Generate a unique ID for the audio
// Save audio blob to IndexedDB await saveAudioToIndexedDB(db, audioId, audioBlob);
IndexedDB ist ein leistungsstarkes clientseitiges Speichersystem, mit dem wir große Datenmengen, einschließlich Dateien und Blobs, speichern können.
Sie müssen vier Hauptfunktionen erstellen, um mit IndexedDB zu interagieren:
mkdir my-first-chrome-extension cd my-first-chrome-extension
touch manifest.json touch scripts.js touch styles.css
{
"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"
}
}
// 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;
Um ein nahtloses Benutzererlebnis zu bieten, sollte Ihre Erweiterung über eine saubere und intuitive Benutzeroberfläche verfügen.
Stile definieren für:
document.addEventListener('mouseup', (event) => {
console.log('mouseup event: ', event);
//...code
}
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();
}
}
Um mit der AI/ML-API und dem Deepgram Aura-Modell zu interagieren, benötigen Sie einen API-Schlüssel.
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.
{
"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"
}
}
Sobald alle Komponenten vorhanden sind, ist es an der Zeit, Ihre Erweiterung in den Chrome-Browser zu laden und sie in Aktion zu sehen.
Entwicklermodus aktivieren: Schalten Sie den „Entwicklermodus“-Schalter in der oberen rechten Ecke um.
In diesem Tutorial haben wir:
Mit einer soliden Grundlage können Sie Ihre Erweiterung weiter verbessern:
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!
Einführung in das von vscode verwendete Framework
Was ist Bitcoin? Ist es ein Betrug?
So importieren Sie Easygui in vscode
Was ist ein Bitcoin-ETF?
So löschen Sie WeChat-Emoticons
So stellen Sie den Textbereich schreibgeschützt ein
Der Unterschied zwischen WLAN und WLAN
Ist es legal, Bitcoin auf Huobi.com zu kaufen und zu verkaufen?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
