如何在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提出您的想法，我们真的会❤️。