chrome麥克風權限

by Palash Taneja

由Palash Taneja

如何在Chrome擴展程序中處理麥克風輸入權限和語音識別 (How to handle mic input permissions and speech recognition in Chrome extensions)

This tutorial assumes that you have a basic understanding of Chrome extensions and the associated configuration files. If not, then you can refer to this article which sets up the files for this tutorial.

本教程假定您對Chrome擴展程序和相關的配置文件有基本的了解。 如果不是，那么您可以參考本文 ， 該文章為本教程設置了文件。

Setting up microphone recording permissions in a Chrome extension is a gray area. There is no officially documented way to do it, and developers are forced to use a “hack” to get mic permissions for their Chrome extension.

在Chrome擴展程序中設置麥克風錄制權限為灰色區域。 目前尚無正式記錄的方法，開發人員被迫使用“ hack”來獲取其Chrome擴展程序的麥克風權限。

In this short article, we use the options.html page to get microphone permissions and use the popular annyang.js library for detecting speech from the user.

在這篇簡短的文章中，我們使用options.html頁面獲取麥克風權限，并使用流行的annyang.js 庫檢測用戶的語音。

1.創建權限觸發腳本和頁面 (1. Creating a permissions trigger script and page)

To get around Chrome’s restrictions, we use a web page from our extension like options.html andpopup.html to get mic permissions for the entire extension.

為了解決Chrome的限制，我們使用擴展程序中的網頁(如options.html和popup.html來獲取整個擴展程序的麥克風權限。

First, we need to create a JavaScript file to get mic permissions on a web page. I created a minimal file that requests permission to use the mic from chrome.

首先，我們需要創建一個JavaScript文件來獲取網頁上的麥克風權限。 我創建了一個最小文件，該文件請求允許使用Chrome中的麥克風。

If you’re not a fan of using JQuery, then you can embed this JS code at the end of the HTML page file that you intend to use as a permission trigger.

如果您不喜歡使用JQuery，則可以將此JS代碼嵌入打算用作權限觸發器HTML頁面文件的末尾。

For our extension, TalkToMe, we used options.html as our permission trigger page.

對于我們的擴展程序TalkToMe，我們使用options.html作為權限觸發頁面。

2.自動打開觸發頁面 (2. Opening the trigger page automagically)

The mic permission popup will only be opened if the trigger page was opened in the current browser session. Having the user manually open it everytime is bad UX. We created a background script to get around this.

僅當在當前瀏覽器會話中打開了觸發頁面時，才會打開“麥克風”權限彈出窗口。 用戶每次手動打開它都是糟糕的UX。 我們創建了一個后臺腳本來解決這個問題。

It tries to access the mic every 100 ms, and opens the permission-trigger page if the request is denied by Chrome.

它會嘗試每100毫秒訪問一次麥克風，如果Chrome拒絕了該請求，則會打開權限觸發頁面。

For the script to work, you need to add it to your manifest.json with other background scripts.

為了使腳本正常工作，您需要將其與其他后臺腳本一起添加到manifest.json 。

3.連接安陽進行語音識別 (3. Hooking up Annyang for speech recognition)

Annyang provides a versatile library for speech recognition, and it is 100% free to use.

安陽提供了用于語音識別的多功能庫，并且100％免費使用。

It works on a command-based structure, in that it calls functions based on the user’s speech. This feature made it a perfect fit for TalkToMe.

它在基于命令的結構上工作，它基于用戶的語音來調用函數。 此功能使其非常適合TalkToMe。

You can add the annyang.js code to a background script and start using it. Here I am showing you the Hello World example from the docs.

您可以將annyang.js代碼添加到后臺腳本中并開始使用它。 在這里，我向您展示文檔中的Hello World示例。

And ta-da, just like that you have replicated our hours of searching StackOverflow for adding mic permissions to your chrome extension.

和ta-da一樣，就像您已經復制了我們在搜索StackOverflow上花費了數小時來為chrome擴展程序添加麥克風權限一樣。

If this tutorial helped you, we’d really ?? if you could give your thoughts on our extension TalkToMe, even if you may not be a visually impaired user.

如果本教程對您有幫助，即使您可能不是視力障礙的用戶，也可以對我們的擴展TalkToMe提出您的想法，我們真的會??。

翻譯自: https://www.freecodecamp.org/news/handling-mic-input-permissions-and-speech-recognition-in-chrome-extensions-ff7e3ca84cb0/

chrome麥克風權限