by Palash Taneja
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.
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.
1. Creating a permissions trigger script and page
To get around Chrome’s restrictions, we use a web page from our extension like
popup.html to get mic permissions for the entire extension.
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.
For our extension, TalkToMe, we used
options.html as our permission trigger page.
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.
It tries to access the mic every 100 ms, and opens the permission-trigger page if the request is denied by Chrome.
For the script to work, you need to add it to your
manifest.json with other background scripts.
3. Hooking up Annyang for speech recognition
Annyang provides a versatile library for speech recognition, and it is 100% free to use.
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.
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.
And ta-da, just like that you have replicated our hours of searching StackOverflow for adding mic permissions to your chrome extension.
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.