La création d'une extension Chrome qui exploite les technologies d'IA peut améliorer considérablement l'expérience utilisateur en ajoutant des fonctionnalités puissantes directement dans le navigateur.
Dans ce didacticiel, nous couvrirons l'ensemble du processus de création d'une extension Chrome à partir de zéro avec l'API AI/ML, Deepgram Aura et IndexDB, de la configuration au déploiement. Nous commencerons par configurer notre environnement de développement, y compris l'installation des outils nécessaires et la configuration de notre projet. Ensuite, nous aborderons les composants principaux de notre extension Chrome : manifest.json contient des métadonnées de base sur votre extension, scripts.js responsable du comportement de notre extension et styles.css pour ajouter du style. Nous explorerons comment intégrer ces technologies à Deepgram Aura via l'API AI/ML et utiliser IndexDB comme stockage temporaire pour le fichier audio généré. En cours de route, nous discuterons des meilleures pratiques pour créer une extension Chrome, gérer les requêtes des utilisateurs et enregistrer les données dans la base de données. À la fin de ce didacticiel, vous disposerez d'une base solide pour créer une extension Chrome et serez bien équipé pour créer n'importe quelle extension Chrome basée sur l'IA.
Voyons un bref aperçu des technologies que nous allons utiliser.
AI/ML API est une plateforme révolutionnaire pour les développeurs et les entrepreneurs SaaS qui cherchent à intégrer des capacités d'IA de pointe dans leurs produits. L'API AI/ML offre un point d'accès unique à plus de 200 modèles d'IA de pointe, couvrant tout, de la PNL à la vision par ordinateur.
Fonctionnalités clés pour les développeurs :
Plongée en profondeur dans la documentation de l'API AI/ML ; https://docs.aimlapi.com/
L'extension Chrome est un petit logiciel qui modifie ou améliore les fonctionnalités du navigateur Web Google Chrome. Ces extensions sont construites à l'aide de technologies Web telles que HTML, CSS et JavaScript, et sont conçues pour servir un seul objectif, les rendant faciles à comprendre et à utiliser.
Parcourir le Chrome Web Store ; https://chromewebstore.google.com/
Deepgram Aura est le premier modèle d'IA de synthèse vocale (TTS) conçu pour les agents et applications d'IA conversationnelle en temps réel. Il offre une qualité vocale proche de celle d'un humain avec une vitesse et une efficacité inégalées, ce qui change la donne en matière de création d'expériences d'IA vocale réactives et à haut débit.
En savoir plus sur les détails techniques ; https://aimlapi.com/models/aura
IndexedDB est une API de bas niveau pour le stockage côté client de quantités importantes de données structurées, y compris des fichiers/blobs. IndexedDB est une base de données orientée objet basée sur JavaScript.
En savoir plus sur les concepts clés et leur utilisation ; https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
Créer une extension Chrome implique de comprendre sa structure, ses autorisations et la manière dont elle interagit avec les pages Web. Nous commencerons par configurer notre environnement de développement et créer les fichiers fondamentaux requis pour notre extension.
Avant de commencer à coder, assurez-vous d'avoir les éléments suivants :
Une extension Chrome minimale nécessite au moins trois fichiers :
Créons un répertoire pour notre projet et configurons ces fichiers.
Étape 1 : Créer un nouveau répertoire
Ouvrez votre terminal et exécutez les commandes suivantes pour créer un nouveau dossier pour votre extension :
mkdir my-first-chrome-extension cd my-first-chrome-extension
Étape 2 : Créer des fichiers essentiels
Dans le nouveau répertoire, créez les fichiers nécessaires :
touch manifest.json touch scripts.js touch styles.css
Le fichier manifest.json est le cœur de votre extension Chrome. Il indique au navigateur votre extension, ce qu'elle fait et les autorisations dont elle a besoin. Voyons comment configurer correctement ce fichier.
{
"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"
}
}
Au minimum, manifest.json doit inclure :
Au-delà des champs essentiels, nous ajouterons :
Ouvrez votre navigateur et accédez à chatgpt.com. Générons maintenant une icône pour notre extension Chrome. Nous utiliserons une icône pour différentes tailles (c'est tout à fait ok).
Entrez l'invite suivante :
Générer une icône en noir et blanc pour mon extension Chrome "Lecture à haute voix". Cette extension permet aux utilisateurs de mettre en évidence le texte spécifique du site Web et de l'écouter. Il s'agit d'une extension Chrome alimentée par l'IA. Le fond doit être blanc et uni.
Attendez quelques secondes jusqu'à ce que ChatGPT génère l'icône (image). Cliquez sur Télécharger et renommez-le en icon.png. Ensuite, placez-le dans le dossier des icônes.
Avec tous les champs correctement définis, votre manifest.json permettra au navigateur de comprendre et de charger correctement votre extension.
Le fichier scripts.js contient la logique qui contrôle le comportement de votre extension. Nous décrirons les fonctionnalités clés que votre script doit implémenter.
Commencez par configurer les variables nécessaires :
mkdir my-first-chrome-extension cd my-first-chrome-extension
Votre extension doit détecter lorsqu'un utilisateur sélectionne du texte sur une page Web :
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
}
Lorsque l'utilisateur clique sur le bouton « Lire à haute voix » :
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
}
Pour gérer efficacement les fichiers audio :
// 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 est un puissant système de stockage côté client qui nous permet de stocker de grandes quantités de données, y compris des fichiers et des blobs.
Vous devrez créer quatre fonctions principales pour interagir avec IndexedDB :
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;
Pour offrir une expérience utilisateur fluide, votre extension doit avoir une interface claire et intuitive.
Définir des styles pour :
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();
}
}
Pour interagir avec l'API AI/ML et le modèle Deepgram Aura, vous aurez besoin d'une clé API.
mkdir my-first-chrome-extension cd my-first-chrome-extension
Mettez maintenant votre clé API :
touch manifest.json touch scripts.js touch styles.css
Mais cela ne fonctionnera pas instantanément. L'utilisation de .env dans les extensions Chrome nécessite d'autres configurations supplémentaires. Nous en parlerons dans les prochains tutoriels.
{
"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"
}
}
Une fois tous les composants en place, il est temps de charger votre extension dans le navigateur Chrome et de la voir en action.
Activer le mode développeur : activez le commutateur "Mode développeur" dans le coin supérieur droit.
Dans ce tutoriel, nous avons :
Avec une base solide, vous pouvez valoriser davantage votre extension :
Félicitations pour la création d'une extension Chrome qui intègre des fonctionnalités d'IA avancées ! Ce projet montre comment la combinaison des technologies Web avec des API puissantes peut créer des expériences utilisateur attrayantes et accessibles. Vous disposez désormais des connaissances nécessaires pour développer et développer cette extension ou en créer de toutes nouvelles qui exploitent les API AI/ML.
Implémentation complète disponible sur Github ; https://github.com/TechWithAbee/Building-a-Chrome-Extension-from-Scratch-with-AI-ML-API-Deepgram-Aura-and-IndexDB-Integration
Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à nous contacter par e-mail à abdibrokhim@gmail.com.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
utilisation de l'instruction de mise à jour
Comment utiliser l'outil de capture de paquets HttpCanary
Comment utiliser la monnaie numérique
Comment utiliser aspose
Solutions aux caractères chinois tronqués
Comment configurer la connexion à la base de données dans mybatis
Utilisation de la fonction fgets
Comment définir la police Dreamweaver
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
