Make your web app Voice In compatible

Note: This is a technical guide meant for developers

The Voice In Chrome extension lets users use their voice to type on a website. Voice In can be used to dictate into the following HTML elements:

1. input fields <input>

2. content editable e.g. <div contenteditable="true" >

3. textarea <textarea>

If the input box you want your users to dictate into conforms to one of the three above, Voice In should work by default.

If Voice In is not working on your web page, here are common reasons why:

1. Not a Live Page: Voice In Chrome extension only gets inserted into pages that have URLs starting with http:// or https:// . Voice In will not work on the new tab page, chrome internal pages / other Chrome extension pages (these will have URLs starting with chrome://), and on pages starting with file:// . One exception to the rule is the Chrome Webstore. Voice In also doesn't work in the Chrome Webstore - no extension works on the Chrome Webstore.

2. Input handling: If you use Javascript to modify the inserted user input, Voice-in text insertions may not work. To work around this, consider listening to the change event instead of keyboard events like keydown.

3. Paste handling: Voice In's advanced mode requires the ability to paste in the page via Javascript. Voice In correctly formats the text. To prevent the underlying page from interfering, we do something like window.addEventListener('paste', (e) => {if (recognizing) {e.stopImmediatePropagation();}}, true); Make sure your page doesn't rely on receiving the paste event.

4. IFrame: If your webpage loads the input textbox via an iframe and the iframe is loading from a different host, then the Chrome extension will not be able to access the textbox due to content security policies. You can either load the input textbox directly without an iframe or, alternatively, enable cross-origin access to your iframe. Read more here.