Créer une extension Chrome à partir de zéro avec l'API AI/ML, Deepgram Aura et l'intégration IndexedDB

Introduction

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.

API IA/ML

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 :

• Bibliothèque de modèles étendue : 200 modèles pré-entraînés pour un prototypage et un déploiement rapides
• Options de personnalisation : affinez les modèles pour les adapter à votre cas d'utilisation spécifique
• Intégration conviviale pour les développeurs : API et SDK RESTful pour une intégration transparente dans votre pile
• Architecture sans serveur : concentrez-vous sur le codage, pas sur la gestion de l'infrastructure

Plongée en profondeur dans la documentation de l'API AI/ML ; https://docs.aimlapi.com/

Extension Chrome

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/

Aura du Deepgramme

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

IndexDB

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

Premiers pas avec l'extension Chrome

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.

Configuration de votre environnement de développement

Avant de commencer à coder, assurez-vous d'avoir les éléments suivants :

• Navigateur Chrome : le navigateur dans lequel nous allons charger et tester notre extension.
• Éditeur de texte ou IDE : des outils tels que Visual Studio Code, Sublime Text ou Atom conviennent à l'édition de code. Nous utiliserons Visual Studio Code dans ce didacticiel.
• Connaissance de base de HTML, CSS et JavaScript : la connaissance de ces technologies est essentielle pour créer des extensions Chrome.

Création de la structure du projet

Une extension Chrome minimale nécessite au moins trois fichiers :

• manifest.json : contient les métadonnées et la configuration de l'extension.
• scripts.js : contient le code JavaScript qui définit le comportement de l'extension.
• styles.css : inclut n'importe quel style pour les éléments de l'interface utilisateur de l'extension.

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

Comprendre manifest.json

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"
  }
}

Champs essentiels dans manifest.json

Au minimum, manifest.json doit inclure :

• manifest_version : Spécifie la version du format de fichier manifeste. Chrome utilise actuellement la version 3.
• nom : le nom de votre extension, tel qu'il apparaîtra aux utilisateurs.
• version : Le numéro de version de votre extension, suivant le versionnement sémantique.

Ajout de métadonnées et d'autorisations

Au-delà des champs essentiels, nous ajouterons :

• description : un bref résumé de ce que fait votre extension.
• host_permissions : Spécifie les domaines auxquels l'extension peut accéder. Pour notre intégration avec l'API AI/ML, nous aurons besoin d'accéder à *.aimlapi.com.
• autorisations : déclare les autorisations spéciales nécessaires, telles que l'accès à l'onglet actif.
• content_scripts : définit les scripts et les styles à injecter dans les pages Web.
• icônes : fournit des icônes pour l'extension de différentes tailles.

Explication des champs clés

• manifest_version : définissez-le sur 3 pour utiliser les dernières fonctionnalités de l'extension Chrome.
• nom : nous nommerons notre extension "Read Aloud" reflétant sa fonctionnalité.
• version : commencer par « 1.0 » indique la version initiale.
• description : "Lire à voix haute tout ce qui se trouve dans n'importe quel onglet" informe les utilisateurs du but de l'extension.
• host_permissions : Le caractère générique *://*.aimlapi.com/* permet à l'extension de communiquer avec n'importe quel sous-domaine d'aimlapi.com, nécessaire aux appels API.
• permissions : "activeTab" permet à l'extension d'interagir avec le contenu de l'onglet actuel.
• content_scripts : spécifie que scripts.js et styles.css doivent être injectés dans toutes les pages Web ("").
• icônes : référence les fichiers d'icônes pour l'extension (assurez-vous d'avoir les fichiers d'icônes appropriés dans un répertoire d'icônes).

Icône de génération

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.

Finalisation de manifest.json

Avec tous les champs correctement définis, votre manifest.json permettra au navigateur de comprendre et de charger correctement votre extension.

---

Développement de scripts.js

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.

Variables et initialisation

Commencez par configurer les variables nécessaires :

• Clé API : vous aurez besoin d'une clé API de la plateforme API AI/ML pour authentifier vos demandes.
• Éléments de superposition : créez des éléments DOM pour la superposition et le bouton "Lire à haute voix".
• Variables de sélection : stockez des informations sur le texte sélectionné par l'utilisateur et sa position.

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

Gestion de la sélection de texte

Votre extension doit détecter lorsqu'un utilisateur sélectionne du texte sur une page Web :

• Écouteur d'événement : attachez un écouteur d'événement mouseup au document pour détecter le moment où l'utilisateur a fini de sélectionner du texte.

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

• Détection de sélection : vérifiez si le texte sélectionné n'est pas vide et stockez-le.

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

• Positionnement de la superposition : calculez où placer la superposition afin qu'elle soit proche du texte sélectionné.

{
  "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"
  }
}

• Gestion des superpositions : assurez-vous que toute superposition existante est supprimée avant d'en ajouter une nouvelle.

// 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;

Code complet :

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

Interagir avec l'API AI/ML

Lorsque l'utilisateur clique sur le bouton « Lire à haute voix » :

• Validation d'entrée : vérifiez si le texte sélectionné répond aux exigences de longueur.

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

• Désactiver le bouton : évitez les clics multiples en désactivant le bouton pendant le traitement.

// 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;

• Demande API : envoyez une requête POST à ​​l'API AI/ML avec le texte sélectionné pour la conversion texte-parole.

// 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();
  }
}

• Gestion des erreurs : gérez avec élégance toutes les erreurs qui se produisent lors de la requête API.

// 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();
    }
  }
});

• Lecture audio : une fois l'audio reçu, lisez-le à l'utilisateur.

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

Utiliser IndexedDB pour le stockage

Pour gérer efficacement les fichiers audio :

• Ouvrir la base de données : créez ou ouvrez une base de données IndexedDB pour stocker les blobs audio.

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

• Enregistrer l'audio : stockez le blob audio dans IndexedDB après l'avoir reçu de l'API.

// 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
  })
});

• Récupérer l'audio : récupérez le blob audio d'IndexedDB pour la lecture.

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.');
}

• Supprimer l'audio : supprimez le blob audio de la base de données après la lecture pour libérer de l'espace.

// Play the audio
audio.play();

Nettoyage et expérience utilisateur

• Suppression de la superposition : supprimez la superposition si l'utilisateur clique ailleurs ou désélectionne le texte.

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

• Bouton Réactiver : assurez-vous que le bouton « Lire à haute voix » est réactivé une fois le traitement terminé.
• Commentaires de l'utilisateur : fournissez des repères visuels, comme changer le texte du bouton en « Chargement… », pour informer l'utilisateur que le traitement est en cours.

Code complet :

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

---

Implémentation des fonctions IndexedDB

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.

Fonctionnalité à mettre en œuvre

Vous devrez créer quatre fonctions principales pour interagir avec IndexedDB :

• openDatabase() : ouvre une connexion à la base de données et crée un magasin d'objets s'il n'existe pas.

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

• saveAudioToIndexedDB() : enregistre le blob audio avec un ID unique.

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

• getAudioFromIndexedDB() : récupère le blob audio à l'aide de son ID.

{
  "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() : supprime le blob audio après la lecture.

// 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;

Concepts clés

• Transactions : toutes les interactions avec IndexedDB se produisent dans le cadre d'une transaction. Assurez-vous de spécifier le mode de transaction correct (lecture seule ou lecture-écriture).
• Magasins d'objets : Semblables aux tables des bases de données SQL, les magasins d'objets contiennent les données. Nous utiliserons un magasin d'objets nommé "audios".
• Gestion des erreurs : gérez toujours les erreurs liées aux opérations de base de données afin d'éviter tout comportement inattendu.

---

Styliser avec styles.css

Pour offrir une expérience utilisateur fluide, votre extension doit avoir une interface claire et intuitive.

Styliser la superposition et le bouton

Définir des styles pour :

• Positionnement de la superposition : positionnement absolu pour placer la superposition à proximité du texte sélectionné.

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

• Apparence du bouton : stylisez le bouton « Lire à haute voix » pour qu'il corresponde à la superposition et soit facilement cliquable.

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

• Effets de survol : améliorez l'interaction de l'utilisateur avec des effets de survol sur le bouton.

// 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;

• État désactivé : indique visuellement quand le bouton est désactivé.

// 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();
  }
}

---

Obtention et configuration de votre clé API

Pour interagir avec l'API AI/ML et le modèle Deepgram Aura, vous aurez besoin d'une clé API.

Étapes pour obtenir votre clé API

• Visitez la plateforme API AI/ML : accédez à aimlapi.com.

• Connectez-vous : cliquez sur "Obtenir la clé API" et connectez-vous à l'aide de votre compte Google.

• Accédez au tableau de bord : après vous être connecté, vous serez redirigé vers votre tableau de bord.

• Créer une clé API : accédez à l'onglet "Gestion des clés" et cliquez sur "Créer une clé API".

• Copiez la clé API : Une fois générée, copiez votre clé API.

Définition de la clé API dans votre extension

• Remarque de sécurité : ne codez jamais en dur votre clé API dans vos scripts si vous envisagez de distribuer votre extension. Pensez à utiliser des variables d'environnement ou à demander à l'utilisateur de saisir sa 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.

• Pour les tests : dans votre scripts.js, attribuez votre clé API à la variable gérant l'authentification pour les requêtes API.

{
  "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"
  }
}

---

Exécuter et tester l'extension

Une fois tous les composants en place, il est temps de charger votre extension dans le navigateur Chrome et de la voir en action.

Chargement de l'extension

• Ouvrir la page Extensions : dans Chrome, accédez à chrome://extensions/.

Activer le mode développeur : activez le commutateur "Mode développeur" dans le coin supérieur droit.

• Charger l'extension décompressée : cliquez sur "Charger l'extension décompressée" et sélectionnez votre dossier my-first-chrome-extension. (ps. dans mon cas, c'est aimlapi-tutorial-one).

• Vérifier l'installation : l'extension devrait maintenant apparaître dans la liste avec son nom et son icône.

Fonctionnalité de test

• Accéder à une page Web : ouvrez une page Web contenant du contenu textuel, tel qu'un article ou un billet de blog.
• Sélectionner du texte : mettez en surbrillance un paragraphe ou une phrase.
• Interagissez avec la superposition : la superposition « Chargement… » doit apparaître au-dessus du texte sélectionné. Attendez quelques secondes pendant le lancement du processus de synthèse vocale.
• Écoutez : après une brève période de traitement, vous devriez entendre le texte lu à haute voix par la voix de l'IA.

Conseils de dépannage

• La superposition n'apparaît pas : vérifiez si les content_scripts sont correctement spécifiés dans manifest.json.
• Pas de lecture audio : vérifiez que votre clé API est correctement définie et que les requêtes API réussissent.
• Erreurs de console : utilisez les outils de développement du navigateur pour inspecter les erreurs JavaScript ou les problèmes de réseau.

---

Résumé du projet

Dans ce tutoriel, nous avons :

• Configurer l'environnement de développement : création de la structure de projet et des fichiers nécessaires pour une extension Chrome.
• Manifest.json configuré : définition des métadonnées et des autorisations essentielles, compréhension de l'importance de chaque champ.
• Développement de scripts.js : description de la logique de gestion de la sélection de texte, d'interaction avec l'API AI/ML et de gestion de la lecture audio.
• Implémentation de l'intégration d'IndexedDB : j'ai appris à utiliser IndexedDB pour stocker et récupérer des fichiers audio localement.
• Style de l'extension avec styles.css : application de CSS pour améliorer l'interface utilisateur et améliorer l'expérience utilisateur.
• Obtention et configuration d'une clé API : acquisition d'une clé API auprès de la plateforme API AI/ML et intégration sécurisée dans notre extension.
• Chargé et testé l'extension : déploiement de l'extension dans Chrome et validation de sa fonctionnalité sur les pages Web en direct.
• Bonnes pratiques discutées : a souligné l'importance de la sécurité, de l'expérience utilisateur et de la gestion des erreurs dans le développement d'extensions.

---

Prochaines étapes

Avec une base solide, vous pouvez valoriser davantage votre extension :

• Ajouter des options de personnalisation : autorisez les utilisateurs à choisir différentes voix ou langues.
• Améliorez la gestion des erreurs : fournissez des messages conviviaux et des options de secours si l'API n'est pas disponible.
• Optimiser les performances : mettre en œuvre des stratégies de mise en cache ou optimiser les requêtes API pour réduire la latence.
• Publiez votre extension : partagez votre création avec d'autres personnes en la publiant sur le Chrome Web Store.

---

Conclusion

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!