Speak to Site

A chrome extension that allows you to use a context menu drop down on any editable input (input, textarea, etc) to flip the "speech" attribute which tells the browser that you can do speech-to-text conversion.

For a full sample see:

http://trac.webkit.org/export/66389/trunk/LayoutTests/fast/speech/input-appearance-speechbutton.html

• NOTE: The Context Menu API *

I was shocked that the context menu API in Chrome (http://code.google.com/chrome/extensions/beta/contextMenus.html as of Sept 27th 2010) didn't pass you the DOM element of the editable element.

Fortunately, antimatter15 (he is 15!) had the nice hack:

http://antimatter15.com/wp/2010/08/chrome-extension-hide-element/ http://github.com/antimatter15/hideelements http://code.google.com/p/chromium/issues/detail?id=39507 http://jsconfeu2010-pi.appspot.com/

--

Chrome Speak To Site; Give any input the power to listen to you

Paul Irish gave a fantastic updated State of HTML5 talk at JSConf.EU. It is packed full of demos, including sharks with freaking lazer beams!

At one point he showed off the WebKit support for <input speech> implementation that allows you to talk into an input area. You click on the microphone, speak in, and it will get translated for you with the results. I am not sure if you can tweak how the translation is done (choose a Nuance vs. Google vs. .... solution for example), but it definitely works well out of the box.

[]

I was surprised to see this already landed in my developer-channel Chrome, so I was incented to do something with it on the plane trip back from Berlin to New York City. Something simple would be to give the user the ability to enable speech on any input. I whipped up a Chrome extension using the context menu API, but was quickly surprised to see that there isn't support in the API to get the DOM node that you are working on. Huh. Kinda crazy in fact.

Then the whizzkid antimatter came to the rescue with his cheeky little hack around the system. Here is how it plays out in the world of this extension:

The background page

First we enable the context menu on any "editable" element (vs. anywhere on the page, on any text, etc), and when clicked we fire off an event to the content script in the given tab:

Catching in a content script

A content script then does two things:

• Listens for mousedown events to keep resetting the last element in focus
• Catches the event, and turns on the speech attribute on the target DOM node

var last_target = null;
document.addEventListener('mousedown', function(event) {
    last_target = event.target;
}, true);

chrome.extension.onRequest.addListener(function(event) {
    last_target.setAttribute("speech", "on");
    last_target = null;
})

Wire-y wire-y

Of course, it all gets wired up in the manifest:

{
    "name": "Turn on Speech Input",
    "description": "Turns on the speech attribute, allows you to speak into an input",
    "version": "0.1",
    "permissions": ["contextMenus"],
    "minimum_chrome_version": "6",
    "background_page": "background.html",
    "content_scripts": [{
        "matches": [""],
        "js": ["input-speech.js"]
    }]
}

This trivial extension is of course on GitHub (I want git-achivements after all! :).