Erstellen Sie eine Chrome-Erweiterung von Text-to-Speech-Chrom

Kernpunkte

In diesem Artikel wird erläutert, wie eine Erweiterung (Chrome Browser Text-to-Speech) erstellt wird, bei der die API für die HTML5-Voice-Synthese oder eine API von Drittanbietern verwendet wird, um hervorgehobene Text- oder Zwischenboardinhalte in Sprache umzuwandeln.

Chrome -Erweiterungen enthalten normalerweise Manifestdateien (Metadatendateien), Bilder (z. B. Erweiterungssymbole), HTML -Dateien, JavaScript -Dateien und andere Ressourcen (z. B. Stilblätter).

TTS -Erweiterung wartet darauf, dass der Benutzer auf sein Symbol klickt oder einen bestimmten Hotkey (Shift Y) drückt, und konvertiert dann den hervorgehobenen Text- oder Zwischenablage -Inhalt in die Sprache.

Der Code für die Erweiterung enthält Hintergrundskripte und Inhaltskripte, Berechtigungen zum Zugriff auf aktive Tags und Benutzerklemme sowie Überprüfung hervorgehobener Text- oder Zwischenablettungsinhalt, Initialisierung von Erweiterungen, Hinzufügen von Hotkeys und Konvertierungen in die Sprachmethode.

Wenn die HTML5-Voice-Synthese-API nicht verfügbar ist, verwendet die Erweiterung eine API von Drittanbietern wie Voice RSS, um Text in Sprache umzuwandeln. Die Erweiterung enthält auch eine Fehlerbehebung, um das Problem zu beheben, dass Chrom die Aussprache nach 200-300 Wörtern stoppt.

Dieser Artikel wurde von Marc Towler überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, um den Inhalt von SitePoint perfekt zu machen!

Text zur Sprache (auch als Sprachsynthese oder TTS bezeichnet) ist ein Weg, um menschliche Sprache künstlich zu produzieren. Dies ist laut Wikipedia nichts Neues, dass Menschen versucht haben, Maschinen zu schaffen, die mindestens tausend Jahre lang menschliche Stimme produzieren können.

tts wird heute in unserem Leben immer häufiger und jeder kann davon profitieren. Wir werden dies demonstrieren, indem wir eine Chromerweiterung erstellen, die Text in Sprache umwandelt. HTML5 bringt uns eine Sprachsynthese -API, mit der jede Webanwendung willkürliche Textzeichenfolgen in Sprache und KOSTENLOS an Benutzer umwandeln kann.

Chromverlängerungen enthalten normalerweise Folgendes:

1. Talentdatei (erforderliche Datei mit Metadaten)
2. Bild (wie Symbol für die Erweiterung)
3. HTML -Datei (z. B. ein Popup -Fenster, das angezeigt wird, wenn der Benutzer auf das Symbol der Erweiterung klickt)
4. JavaScript -Dateien (z. B. Inhalte und/oder Hintergrundskripte, die später erklärt werden)
5. Alle anderen Ressourcen, die die Anwendung verwenden kann (z. B. Stilblätter)

Über Seite der Sprachausdehnung

Aufgrund der Popularität von Chrom und des Aufstiegs von TTs werden wir eine Chromverlängerung erstellen, die Text in die Stimme umwandelt. Die Erweiterung wartet darauf, dass der Benutzer auf sein Symbol klickt oder auf einen speziellen Hotkey (Shift Y) drückt, und dann versuchen, zu finden, was der Benutzer auf der Seite hervorhebt, die sie derzeit anzeigen, oder zu versuchen, zu finden, was in ihre Zwischenablage kopiert wird. Wenn etwas gefunden wird, wird zunächst versucht, sie mit der HTML5-Sprachsynthese-API in Sprache umzuwandeln, und wenn diese API nicht verfügbar ist, wird eine API von Drittanbietern aufgerufen.

Grundlagen der Chromverlängerung

Jede Chrome -Erweiterung erfordert eine Datei namens Manifest.json. Das Manifest ist eine JSON -Datei, die Daten enthält, die für die Anwendung von den Namen, Beschreibung, Symbol und Autor der Erweiterung von entscheidender Bedeutung sind, zu den Daten, die die Anforderungen der Erweiterung definieren - auf welchen Websites die Erweiterung in der Lage sein sollte, ausgeführt zu werden (diese werden (diese werden Seien Sie Berechtigungen, die der Benutzer gewähren muss) oder welche Dateien ausgeführt werden sollen, wenn der Benutzer eine bestimmte Website durchstürzt.

<code class="language-json">{
  "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"
  },
</code>

Unsere Liste beginnt mit dem Namen, Beschreibung, Autor, Version und Symbol der Erweiterung. Sie können viele Symbole im Icons -Objekt unterschiedliche Größen zur Verfügung stellen.

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

Dann definieren wir ein Hintergrundskript namens Hintergrund.min.js im Hintergrundobjekt (beachten Sie, dass wir eine Minimierungsdatei verwenden). Hintergrundskripte sind langlebige Skripte, die weiter ausgeführt werden, bis der Browser des Benutzers geschlossen oder die Erweiterung deaktiviert ist.

Nach

haben wir eine Reihe von content_scripts, die Chrome anweisen, zwei JavaScript -Dateien auf jeder Website -Anforderung zu laden " http: //*/*" und "https: //*/*" "und" https: //*/*"". Im Gegensatz zu Hintergrundskripten können Inhaltskripte auf die DOM der tatsächlichen Website zugreifen, die der Benutzer besucht. Inhaltskripte können das DOM einer einzelnen Webseite lesen und ändern. Daher können unsere Polyfill.min.js und ext.min.js alle Daten auf jeder Webseite lesen und ändern.

<code class="language-json">  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}
</code>

Warten Sie! Wir haben auch ein Array namens Berechtigungen, das wir beantragen, nur auf die Webseite (Aktivitäts -Tag) zugreifen zu können, die derzeit vom Benutzer geöffnet wird. Wir fordern auch eine weitere Berechtigung namens ClipboardRead an, mit der wir die Zwischenablage des Benutzers lesen können (damit wir den Inhalt in Stimme umwandeln können).

eine Seite zum Voice Chrome -Erweiterung schreiben

Erstens erstellen wir unser einziges Hintergrundskript, das einen Ereignishörer anschließt, der feuert, wenn der Benutzer auf das Symbol der Erweiterung klickt. In diesem Fall werden wir die SendMessage -Funktion aufrufen, die die Methode von Chrome.Tabs.SendMessage (Tabid, Nachricht, Rückruf) verwendet, um eine Nachricht an unser Inhaltskript zu senden (das Inhaltskript kann das DOM lesen und herausfinden, was der Benutzer hervorhebt . Inhalt und/oder Inhalt des Benutzers in der Zwischenablage). Wir verwenden die Methode von Chrome.tabs.Query, um eine Nachricht an die aktuell geöffnete Registerkarte zu senden - da wir daran interessiert sind und was wir zugreifen können - die Parameter der Methode enthalten eine Rückruffunktion, die die folgenden verwenden : Abfragen Sie den Parameteraufruf für die Registerkarte "Matching".

<code class="language-javascript">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) {});
  });
}
</code>

Jetzt ist das ausführlichere Ding unser Content -Skript. Wir erstellen ein Objekt, um einige Daten in Bezug auf die Erweiterung zu enthalten und dann unsere Initialisierungsmethode zu definieren.

<code class="language-javascript">initialize: function() {
    if (!pageToSpeech.hasText()) { return;}
    if (!pageToSpeech.trySpeechSynthesizer()) {
        pageToSpeech.trySpeechApi();
    }
},
</code>

Diese Methode prüft, ob der Benutzer nicht mit Text oder nichts in der Zwischenablage hervorgehoben wird, und in diesem Fall wird er nur zurückgegeben. Andernfalls wird versucht, Sprache unter Verwendung der HTML5 -Sprachsynthese -API zu generieren. Wenn dies fehlschlägt, wird schließlich versucht, eine API von Drittanbietern zu verwenden.

So überprüfen Sie den Text, führt mehrere Aktionen aus. Es wird versucht, ein Objekt mit hervorgehobenem Text mit der integrierten GetSelection () -Methode zu erhalten und ihn mit toString () in eine Textzeichenfolge umzuwandeln. Wenn der Text nicht hervorgehoben ist, wird versucht, den Text in der Zwischenablage des Benutzers zu finden. Dies geschieht, indem es der Seite ein Eingabeelement hinzufügt, es fokussiert, ein Paste -Ereignis mit ExecCommand ('Paste') ausgelöst und dann den in diese Eingabe eingefügten Text in einer Eigenschaft gespeichert. Dann löscht es die Eingabe. In beiden Fällen gibt es zurück, was es gefunden hat.

<code class="language-json">{
  "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"
  },
</code>

Ermöglicht es dem Benutzer, die Konvertierung von Text zu Sprache mithotkeys (hart als Verschiebung y) auszuführen, ein Array initialisieren und einen Ereignishörer für die Ereignisse von Onkeydown- und OnKeyup-Ereignissen einrichten. Im Hörer speichern wir einen Index, der dem Schlüsselcode des gedrückten Schlüssels entspricht, der aus dem Vergleichsergebnis des Ereignistyps und des Tastens von E. Typs abgeleitet ist und ein boolescher Wert ist. Wenn eine Taste gedrückt wird, wird der Wert des entsprechenden Schlüsselindex auf true gesetzt, und wenn eine Taste freigegeben wird, wird der Wert des Index in False geändert. Wenn beide Indizes 16 und 84 wahre Werte enthalten, wissen wir, dass der Benutzer unsere Hotkeys verwendet, sodass wir den Text in Sprachkonvertierung initialisieren.

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

Um Text in Sprache umzuwandeln, verlassen wir uns auf die Methode der Tryspeechsynthesizer (). Wenn die HTML5 -Sprachsynthese im Browser des Benutzers (window.speechsynthese) vorhanden ist, wissen wir, dass der Benutzer sie verwenden kann. Wir überprüfen also, ob die Sprache derzeit ausgeführt wird (wir wissen, ob sie durch die pagetspeech.data.speechinprogress boolean läuft) . Wenn die Stimme im Gange ist, werden wir die aktuelle Stimme stoppen (da Tryspeechsynthesizer eine neue Stimme startet, möchten wir nicht gleichzeitig zwei Geräusche machen). Anschließend setzen wir Sprachprogress auf True, und wenn die Rede abgeschlossen ist, setzen wir die Eigenschaft erneut auf einen falschen Wert.

Nun, ich möchte nicht näher darauf eingehen, warum wir Sprachankecher verwenden, aber es handelt sich um eine Fehlerbehebung im Zusammenhang mit der Chrome-Stoping-Sprachsynthese, nachdem sie 200-300 Wörter abgelegt haben. Grundsätzlich spaltet es unsere Textzeichenfolge in viele kleinere Stücke (in unserem Fall 120 Wörter) und ruft die Sprachsynthese -API mit einem Block nach dem anderen auf.

<code class="language-json">  "browser_action": {
    "default_icon": "speech.png"
  },
   "permissions": [
     "activeTab",
     "clipboardRead"
    ]
}
</code>

Schließlich werden wir eine API ausprobieren, wenn die API der HTML5 -Sprachsynthese nicht verfügbar ist. Wir haben die gleichen Eigenschaften, um zu wissen, ob wir das bereits laufende Audio stoppen müssen. Anschließend erstellen wir ein neues Audioobjekt direkt und übergeben ihm die URL des gewünschten API -Endpunkts, da die Demo -API, die wir ausgewählt haben, das Audio direkt gestreamt. Wir müssen nur den API -Schlüssel und den zu konvertierten Text übergeben. Wir prüfen auch, ob der Audio einen Fehler auslöst. In diesem Fall müssen wir dem Benutzer nur eine Benachrichtigung zeigen, die wir zu diesem Zeitpunkt nicht helfen können (wir testen den Code für diese spezifische API, Voice RSS, und ermöglicht 300 Anforderungen für die freie Hierarchie).

<code class="language-json">{
  "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"
  },
</code>

Schließlich nennen wir außerhalb eines lokalen Bereichs die Addhotkeys -Methode, mit der der Benutzer auf den richtigen Hotkey drückt, und wir stellen einen Listener ein, der darauf wartet, dass die Nachricht vom Hintergrundskript empfangen wird. Wenn Sie die richtige Nachricht ( speakHighlight ) erhalten oder den Hotkey drücken, werden wir den Text in Sprachkonvertierungsobjekt initialisieren.

<code class="language-json"> "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": [ "polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }],
</code>

Schlussfolgerung

Stimme, wir haben eine schöne Chromerweiterung, die Text in die Stimme umwandelt. Das Konzept hier kann verwendet werden, um Chromverlängerungen für verschiedene Zwecke zu erstellen. Haben Sie interessante Chromverlängerungen gebaut oder möchten Sie eines bauen? Bitte lassen Sie es mich in den Kommentaren wissen!

Wenn Ihnen diese Idee gefällt und sie weiterentwickeln möchten, finden Sie den vollständigen Code in unserem Github -Repository. Wenn Sie es testen möchten, finden Sie eine Produktionsversion der Erweiterung im Chrome Web Store.

References: https://www.php.cn/link/b8b0e04211dce1c104dfcdb685c9b9ad https://www.php.cn/link/e417baa9cdf34202f71b55a27da899e8

Text zu Sprachchromerweiterung FAQ

Wie installiere ich den Text in die Erweiterung der Voice -Chrome?

Die Installation der Chrome-Erweiterung von Text-to-Speech-Chrom ist ein einfacher Prozess. Öffnen Sie zunächst Ihren Google Chrome -Browser und navigieren Sie zum Chrome -Webladen. Geben Sie in der Suchleiste den Namen der Erweiterung ein, die Sie installieren möchten, z. B. "Vorlesen" oder "Text-to-Speech (TTS)". Klicken Sie aus den Suchergebnissen auf die Erweiterung und klicken Sie auf die Schaltfläche "Zu Chrome hinzufügen". Ein Pop-up-Fenster scheint nach Bestätigung zu fragen und auf "Erweiterung hinzufügen" zu klicken. Die Erweiterung wird installiert und in Ihrer Browser -Symbolleiste wird ein Symbol angezeigt.

Kann ich meine Stimme in meinem Text an Sprachchromeerweiterung anpassen?

Ja, die meisten Erweiterungen der Sprachchrome von Text -to Speech -Chrom ermöglichen es Ihnen, Ihre Sprache anzupassen. Sie können normalerweise aus einer Vielzahl von Stimmen wählen, einschließlich männlicher und weiblicher Stimmen in verschiedenen Akzenten und Sprachen. Um Ihre Stimme anzupassen, klicken Sie in der Browser -Symbolleiste auf das Erweiterungssymbol und navigieren Sie zu den Einstellungen oder Optionen. Hier sollten Sie Optionen finden, um Sprache, Geschwindigkeit, Ton und Lautstärke zu ändern.

Ist der Text zur Sprachchrom -Erweiterung kostenlos zu verwenden?

Viele Text-zu-Sprach-Chromverlängerungen können kostenlos verwendet werden, einige können jedoch eine geringe Gebühr erheben, um erweiterte Funktionen anzubieten. Diese erweiterten Funktionen können andere Sprach-, Anzeigenverwendungen oder Speichern von Audiodateien umfassen. Überprüfen Sie die Details der Erweiterung im Chrome -Web Store vor der Installation.

Kann ich den Text offline verwenden, um Chrome -Erweiterung zu spricht?

Ein gewisser Text zur Sprachchrom -Erweiterungen kann offline verwendet werden, aber nicht alle Erweiterungen können dies tun. Es hängt davon ab, wie die Erweiterung gestaltet ist. Wenn Ihnen die Offline -Verwendung wichtig ist, überprüfen Sie die Beschreibung der Erweiterung im Chrome -Web Store oder die Einstellungen für die Erweiterung nach der Installation.

Wie verwendet ich den Text zur Sprachchrom -Erweiterung?

Navigieren Sie zuerst zur Webseite, die Sie vorlesen möchten. Klicken Sie dann auf das Erweiterungssymbol in der Browser -Symbolleiste. Einige Erweiterungen lesen sofort die Seite vor, während andere möglicherweise den Text auswählen, den Sie lesen möchten. Normalerweise können Sie Steuerelemente im Erweiterungs-Popup-Fenster verwenden, um zu pausieren, wieder aufzunehmen oder nicht mehr zu lesen.

Kann ich den Text auf einer Website zum Voice Chrome -Erweiterung verwenden?

Die meisten Textverlängerungen für Sprachchrom sollten auf einer beliebigen Website mit Ausnahmen funktionieren. Einige Websites haben möglicherweise Kompatibilitätsprobleme mit bestimmten Erweiterungen, oder Erweiterungen können möglicherweise nicht in der Lage sein, bestimmte Arten von Inhalten wie Bilder oder Videos zu lesen. Wenn Sie Probleme haben, verwenden Sie eine andere Erweiterung oder wenden Sie sich an den Entwickler der Erweiterung, um sie zu unterstützen.

Ist meine Daten in Text -to Speech -Chrom -Erweiterung sicher?

Die meisten Chrom-Erweiterungen von Text-to-Speech-Chrom sollten Ihre Privatsphäre respektieren und Ihre Daten nicht ohne Ihre Zustimmung sammeln oder weitergeben. Es ist jedoch am besten, die Datenschutzrichtlinie der Erweiterung vor der Installation zu überprüfen. Wenn Sie mit dieser Richtlinie nicht zufrieden sind, sollten Sie nach anderen Erweiterungen suchen.

Kann ich die Sprachgeschwindigkeit im Text in der Chromverlängerung ändern?

Ja, die meisten Erweiterungen der Sprachchrome von Text -to -Sprache können die Geschwindigkeit Ihrer Sprache anpassen. Dies kann normalerweise im Einstellungs- oder Optionsmenü der Erweiterung erfolgen. Normalerweise können Sie eine Reihe von Geschwindigkeiten von sehr langsam bis sehr schnell auswählen.

Kann ich den Text verwenden, um Chrome -Erweiterung in anderen Browsern zu sprachen?

Text zur Sprachchrome -Erweiterung ist so ausgelegt, dass sie in Google Chrome ausgeführt wird und möglicherweise nicht in anderen Browsern ausgeführt wird. Viele Erweiterungsentwickler erstellen jedoch auch Versionen ihrer Erweiterungen für andere Browser wie Firefox oder Edge. Bitte überprüfen Sie die Website des Entwicklers oder den entsprechenden Erweiterungsgeschäft, damit diese Browser feststellen, ob eine Version verfügbar ist.

Kann ich den Text verwenden, um Chrome -Erweiterung auf meinem mobilen Gerät zu sprachen?

Ein gewisser Text zur Sprachverchrom -Erweiterungen kann für Chrome auf Android oder iOS funktionieren, aber nicht alle Erweiterungen sind verfügbar. Es hängt davon ab, wie die Erweiterung gestaltet ist. Wenn Ihnen die mobile Verwendung wichtig ist, überprüfen Sie die Beschreibung der Erweiterung im Chrome -Web Store oder die Einstellungen für die Erweiterung nach der Installation.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Chrome-Erweiterung von Text-to-Speech-Chrom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!