Créer une extension de chrome de texte-parole

Points de base

Cet article explique comment créer une extension de texte à dispection Chrome de navigateur (TTS) qui utilise une API de synthèse vocale HTML5 ou une API tierce pour convertir le texte en surbrillance ou le contenu du presse-papiers en parole.

Les extensions de chrome contiennent généralement des fichiers manifestes (fichiers de métadonnées), des images (telles que des icônes d'extension), des fichiers HTML, des fichiers JavaScript et d'autres ressources (tels que des feuilles de style).

L'extension TTS attend que l'utilisateur clique sur son icône ou appuyez sur une cure de tête spécifique (Shift Y), puis convertit le contenu de texte ou de presse-papiers en surbrillance.

Le code de l'extension comprend des scripts d'arrière-plan et des scripts de contenu, des autorisations pour accéder aux balises actives et à des tableaux de gamme d'utilisateurs, ainsi qu'à la vérification du text en surbrillance ou du contenu du presse-papiers, à l'initialisation des extensions, à l'ajout de raccourcis clavier et à la conversion du texte en méthode vocale.

Si l'API de synthèse vocale HTML5 n'est pas disponible, l'extension utilisera une API tierce telle que la voix RSS pour convertir le texte en parole. L'extension comprend également une correction de bogue pour résoudre le problème que Chrome arrête la prononciation après 200 à 300 mots.

Cet article a été évalué par des pairs par Marc Towler. Merci à tous les pairs examinateurs de SitePoint pour rendre le contenu de SitePoint parfait!

Le texte à la parole (également connu sous le nom de synthèse de la parole ou TTS) est une façon de produire artificiellement la parole humaine. Ce n'est pas nouveau, selon Wikipedia, les gens ont essayé de créer des machines qui peuvent produire une voix humaine pendant au moins mille ans.

TTS devient de plus en plus courant dans nos vies aujourd'hui et tout le monde peut en bénéficier. Nous le démontrerons en créant une extension chromée qui convertit le texte en parole. HTML5 nous apporte une API de synthèse de la parole qui permet à toute application Web de convertir gratuitement des chaînes de texte arbitraires en parole et de jouer aux utilisateurs.

Les extensions de chrome contiennent généralement les éléments suivants:

1. Fichier de talents (fichier requis contenant des métadonnées)
2. Image (comme l'icône pour l'extension)
3. Fichier HTML (par exemple, une fenêtre contextuelle qui apparaît lorsque l'utilisateur clique sur l'icône de l'extension)
4. Fichiers JavaScript (tels que des scripts de contenu et / ou d'arrière-plan qui seront expliqués plus loin)
5. Toutes autres ressources que l'application peut utiliser (comme les feuilles de style)

À propos de la page à l'extension vocale

En raison de la popularité du chrome et de la montée des TT, nous créerons une extension chromée qui convertit le texte en voix. L'extension attendra que l'utilisateur clique sur son icône ou appuyez sur une cure de putain spéciale (Shift Y), puis essayez de trouver ce que l'utilisateur met en évidence sur la page qu'il consulte actuellement, ou essayez de trouver ce qui est copié dans son presse-papiers. Si quelque chose est trouvé, il essaiera d'abord de le convertir en parole en utilisant l'API de synthèse de la parole HTML5, et si cette API n'est pas disponible, une API tierce est appelée.

Bases de l'extension chromée

Chaque extension Chrome nécessite un fichier nommé Manifest.json. Le manifeste est un fichier JSON contenant des données essentielles à l'application, du nom, de la description, de l'icône et de l'auteur Soyez autorisé que l'utilisateur doit accorder) ou quels fichiers exécutent lorsque l'utilisateur navigue sur un site Web spécifique.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

Notre liste commence par le nom, la description, l'auteur, la version et l'icône de l'extension. Vous pouvez fournir de nombreuses icônes avec différentes tailles dans l'objet icônes.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Ensuite, nous définissons un script d'arrière-plan appelé background.min.js dans l'objet d'arrière-plan (notez que nous utilisons un fichier de minimisation). Les scripts d'arrière-plan sont des scripts de longue date qui continueront à s'exécuter jusqu'à ce que le navigateur de l'utilisateur soit fermé ou que l'extension soit désactivée.

Après

, nous avons un tableau de contenu_scripts qui demande à Chrome de charger deux fichiers JavaScript sur chaque demande de site Web en raison de wildcards " http: // * / *" et "https: // * / *" "et" https: // * / * "". Contrairement aux scripts d'arrière-plan, les scripts de contenu peuvent accéder au DOM du site Web réel que l'utilisateur visite. Les scripts de contenu peuvent à la fois lire et modifier le dom de toute page Web intégrée. Par conséquent, nos polyfill.min.js et ext.min.js pourront lire et modifier toutes les données sur chaque page Web .

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

attendez! Nous avons également un tableau appelé autorisation, que nous demandons d'accéder uniquement à la page Web (balise d'activité) actuellement ouverte par l'utilisateur. Nous demandons également une autre autorisation appelée ClipboardRead, qui nous permettra de lire le presse-papiers de l'utilisateur (afin que nous puissions convertir son contenu en voix).

Écriture d'une page pour exprimer Chrome Extension

Tout d'abord, nous créons notre seul script d'arrière-plan qui connecte un écouteur d'événements qui tirera lorsque l'utilisateur clique sur l'icône de l'extension. Lorsque cela se produit, nous appellerons la fonction SendMessage, qui utilise la méthode chrome.tabs.sendMessage (Tabid, Message, rappel) pour envoyer un message à notre script de contenu (le script de contenu peut lire le DOM et découvrir ce que l'utilisateur met en évidence . Contenu et / ou contenu placé par l'utilisateur dans le presse-papiers). Nous utilisons la méthode chrome.tabs.query pour envoyer un message à la page onglet actuellement ouverte - car c'est ce qui nous intéresse et ce à quoi nous pouvons accéder - les paramètres de la méthode incluent une fonction de rappel qui utilisera les éléments suivants : Interrogez l'appel de paramètre pour les pages d'onglet correspondantes.

chrome.browserAction.onClicked.addListener(function (tab) {
    //fired when the user clicks on the ext's icon
    sendMessage();
});
function sendMessage() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {action: "pageToSpeech"}, function(response) {});
  });
}

Maintenant, plus la chose verbale est notre script de contenu. Nous créons un objet pour maintenir certaines données liées à l'extension, puis définissons notre méthode d'initialisation.

initialize: function() {
    if (!pageToSpeech.hasText()) { return;}
    if (!pageToSpeech.trySpeechSynthesizer()) {
        pageToSpeech.trySpeechApi();
    }
},

Cette méthode vérifie si l'utilisateur n'est pas mis en évidence avec du texte ou rien dans le presse-papiers, et dans ce cas, il n'est renvoyé que. Sinon, il essaiera de générer une parole en utilisant l'API de synthèse de la parole HTML5. Si cela échoue, il finira par essayer d'utiliser une API tierce.

Comment vérifier le texte effectue plusieurs actions. Il essaie d'obtenir un objet contenant du texte en surbrillance à l'aide de la méthode GetSelection () intégrée et de le convertir en une chaîne de texte à l'aide de ToString (). Ensuite, si le texte n'est pas mis en surbrillance, il essaiera de trouver le texte dans le presse-papiers de l'utilisateur. Il le fait en ajoutant un élément d'entrée à la page, en le concentrant, en déclenchant un événement de pâte avec execcommand ('pâte'), puis en enregistrant le texte collé dans cette entrée dans une propriété. Ensuite, il efface l'entrée. Dans les deux cas, il renvoie ce qu'il a trouvé.

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

Pour permettre à l'utilisateur d'exécuter la conversion de texte vocale à l'aide de Howkkeys (codé en dur comme Shift Y), nous initialisons un tableau et configurons un écouteur d'événements pour les événements OnKeyDown et OnkeyUp. Dans l'auditeur, nous stockons un index correspondant au Keycode de la touche enfoncée, qui est dérivé du résultat de comparaison du type d'événement E.Type et de la clé, et est une valeur booléenne. Par conséquent, chaque fois qu'une touche est enfoncée, la valeur de l'indice de clé correspondant sera définie sur true, et chaque fois qu'une touche est libérée, la valeur de l'index sera changée en false. Donc, si les deux index 16 et 84 contiennent des valeurs vraies, nous savons que l'utilisateur utilise nos raccourcis clavier, nous allons donc initialiser le texte en conversion de la parole.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Pour convertir le texte en discours, nous comptons sur la méthode TryspeEchSyntheSizer (). Si la synthèse de la parole HTML5 existe dans le navigateur de l'utilisateur (Window.SpeechSynthesis), nous savons que l'utilisateur peut l'utiliser, nous vérifions donc si le discours est en cours d'exécution (nous savons s'il fonctionne à travers la pagetospeech.data.speechinprogress booléen) . Si la voix est en cours, nous arrêterons la voix actuelle (car TryspeechSyntheSizer commencera une nouvelle voix, nous ne voulons pas faire deux sons en même temps). Nous définissons ensuite la parole sur true, et chaque fois que le discours est terminé, nous relâchons la propriété sur une fausse valeur.

Maintenant, je ne veux pas expliquer pourquoi nous utilisons SpeemberCumberanceChunker, mais c'est un correctif de bogue lié à la synthèse de la parole de Chrome après avoir émis 200 à 300 mots. Fondamentalement, il divise notre chaîne de texte en de nombreux morceaux plus petits (120 mots dans notre cas) et appelle l'API de synthèse de la parole en utilisant un bloc après l'autre.

  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}

Enfin, si l'API de synthèse vocale HTML5 n'est pas disponible, nous essaierons une API. Nous avons les mêmes propriétés pour savoir si nous devons arrêter l'audio déjà en cours d'exécution. Nous créons ensuite directement un nouvel objet audio et passons à l'URL du point de terminaison de l'API souhaité, car l'API de démonstration que nous avons sélectionné diffusée directement diffuse l'audio. Il nous suffit de passer la touche API et le texte à convertir. Nous vérifions également si l'audio déclenche une erreur. Dans ce cas, nous avons juste besoin de montrer à l'utilisateur une alerte que nous ne pouvons pas aider pour le moment (nous testons le code de cette API spécifique, Voice RSS, permettant 300 demandes sur la hiérarchie gratuite).

{
  "manifest_version": 2,

  "name": "Page to Speech",
  "description": "This extension will produce English speech to whatever text you highlight on a webpage. Highlight text and click the extension's icon",
  "author": "Ivan Dimov",
  "version": "1.0",
  "icons": { 
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

Enfin, en dehors de toute portée locale, nous appelons la méthode AddhotKeys, qui commencera à attendre que l'utilisateur appuie sur la bonne cure de putain, et nous configurons un écouteur qui attendra que le message soit reçu du script d'arrière-plan. Si vous recevez le message correct ( Speakhighlight ) ou appuyez sur la touche de putain, nous initialiserons l'objet de conversion du texte en parole.

 "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],

Conclusion

voix, nous avons une belle extension chromée qui convertit le texte en voix. Le concept ici peut être utilisé pour créer des extensions de chrome à différentes fins. Avez-vous construit des extensions de chrome intéressantes, ou voulez-vous en construire une? S'il vous plaît laissez-moi savoir dans les commentaires!

Si vous aimez cette idée et que vous souhaitez le développer davantage, vous pouvez trouver le code complet dans notre référentiel GitHub. Si vous souhaitez le tester, vous pouvez trouver une version de production de l'extension dans le Chrome Web Store.

Références: https://www.php.cn/link/B8B0E04211DCE1C104DFCDB685C9B9AD > Texte à la parole Chrome Extension FAQ

Comment installer le texte pour exprimer Chrome Extension?

L'installation de l'extension de chrome text-to-discours est un processus facile. Tout d'abord, ouvrez votre navigateur Google Chrome et accédez au Chrome Web Store. Dans la barre de recherche, entrez le nom de l'extension que vous souhaitez installer, telle que "lire à haute voix" ou "text-to-dispeach (TTS)". Cliquez sur l'extension dans les résultats de la recherche et cliquez sur le bouton "Ajouter à Chrome". Une fenêtre contextuelle semblera demander une confirmation et cliquer sur "Ajouter une extension". L'extension sera installée et une icône apparaîtra sur la barre d'outils de votre navigateur.

Puis-je personnaliser ma voix dans mon texte pour parler de l'extension chromée?

Oui, la plupart des extensions de chrome de texte à la parole vous permettent de personnaliser votre discours. Vous pouvez généralement choisir parmi une variété de voix, y compris des voix masculines et féminines dans différents accents et langues. Pour personnaliser votre voix, cliquez sur l'icône d'extension dans la barre d'outils du navigateur et accédez au menu Paramètres ou Options. Ici, vous devez trouver des options pour changer la voix, la vitesse, le ton et le volume.

Le texte de l'extension de chrome du texte est-il gratuit?

De nombreuses extensions de chrome de texte vocale sont gratuites, mais certaines peuvent facturer une somme modique pour offrir des fonctionnalités avancées. Ces fonctionnalités avancées peuvent inclure d'autres fichiers audio sans vocation, utilisation sans publicité. Assurez-vous de vérifier les détails de l'extension dans la boutique en ligne Chrome avant l'installation.

Puis-je utiliser le texte pour exprimer Chrome Extension hors ligne?

Certaines extensions de texte chromées peuvent être utilisées hors ligne, mais toutes les extensions ne peuvent pas le faire. Cela dépend de la façon dont l'extension est conçue. Si une utilisation hors ligne est importante pour vous, vérifiez la description de l'extension dans le Chrome Web Store ou les paramètres de l'extension après l'installation.

Comment utiliser l'extension du texte pour parler de chrome?

Pour utiliser l'extension du texte pour parler de chrome, par la pose, par la page Web que vous souhaitez lire à haute voix. Ensuite, cliquez sur l'icône d'extension de la barre d'outils du navigateur. Certaines extensions commenceront immédiatement à lire la page à haute voix, tandis que d'autres peuvent vous obliger à sélectionner le texte que vous souhaitez lire. Vous pouvez généralement utiliser des contrôles dans la fenêtre contextuelle d'extension pour faire une pause, reprendre ou arrêter de lire.

Puis-je utiliser le texte pour exprimer Chrome Extension sur n'importe quel site Web?

La plupart des extensions de texte pour chrome devraient fonctionner sur n'importe quel site Web, avec des exceptions possibles. Certains sites Web peuvent avoir des problèmes de compatibilité avec certaines extensions, ou des extensions peuvent ne pas être en mesure de lire certains types de contenu, tels que des images ou des vidéos. Si vous avez des problèmes, essayez d'utiliser une extension différente ou contactez le développeur de l'extension pour l'assistance.

Mes données sont-elles sans danger dans l'extension du texte à la parole?

La plupart des extensions de chrome de texte vocale doivent respecter votre confidentialité et ne collecter pas ou ne partageront pas vos données sans votre consentement. Cependant, il est préférable de vérifier la politique de confidentialité de l'extension avant l'installation. Si vous n'êtes pas satisfait de cette politique, envisagez de rechercher d'autres extensions.

Puis-je modifier la vitesse de la parole dans le texte en discours dans l'extension chromée?

Oui, la plupart des extensions de chrome de texte à la parole vous permettent d'ajuster la vitesse de votre discours. Cela peut généralement être fait dans le menu Paramètres ou options de l'extension. Vous pouvez généralement choisir une gamme de vitesses, de très lent à très rapidement.

Puis-je utiliser le texte pour exprimer une extension Chrome dans d'autres navigateurs?

L'extension du texte à la parole est conçue pour s'exécuter dans Google Chrome et peut ne pas s'exécuter dans d'autres navigateurs. Cependant, de nombreux développeurs d'extensions créeront également des versions de leurs extensions pour d'autres navigateurs, tels que Firefox ou Edge. Veuillez consulter le site Web du développeur ou la boutique d'extension pertinente pour ces navigateurs pour voir s'il y a une version disponible.

Puis-je utiliser l'extension du texte Chrome sur mon appareil mobile?

Certains extensions de texte pour chrome peuvent fonctionner pour Chrome sur Android ou iOS, mais toutes les extensions ne sont pas disponibles. Cela dépend de la façon dont l'extension est conçue. Si l'utilisation mobile est importante pour vous, vérifiez la description de l'extension dans la boutique en ligne Chrome ou les paramètres de l'extension après l'installation.

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!