Simple browserAction explanation please

Question

I'm developing a Chrome extension which sends the highlighted selection to a speech engine API. I want to implement both context menu and on icon click. Here's the problem:

This works perfectly:

chrome.contextMenus.create({
    "title" : "Speak Me",
    "contexts" : ["selection"],
    onclick: function (info, tab) {
        speakMe(info.selectionText);
    }
});

Directly underneath it I have:

chrome.browserAction.onClicked.addListener(function() {
  speakMe(info.selectionText);
});

Which doesn't work.

If I leave the parameter empty it returns an audio saying "Undefined". So I guess the speech engine is telling me it got no text. What am I doing wrong?

This is the function in question, placed above:

var speakMe = function (text) {
        var key, lang, url, audio;
        key = "key=12345678910";
        lang = "sv_se";
        url = "http://tts.engine.com/api/speak?" + key + "&lang=en_us&voice=male1&speed=100&audioformat=ogg&oggbitrate=100&text=" + text; 
        audio = new Audio(url);
        audio.play();
    };

The selection text comes from another JS file:

function getSelectedText() {
  var text = "";
  if (typeof window.getSelection != "undefined") {
    text = window.getSelection().toString();
  } else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
    text = document.selection.createRange().text;
  }
  return text;
}

But since the context menu works perfectly, I don't think there's a problem with that. It's just the browserAction that I don't get how to use properly.

Answer 1

Because the browser action's onClicked event doesn't have any information about the selected text. You need to figure it out yourself. You can inject a content script into the current page and get the selected text with window.getSelection().toString(). Then send the message back to the extension and speak the text.

Here's an example:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(tab.id,
      {code: 'window.getSelection().toString()'}, function(results) {
    alert(results[0]);
  });
});

It just shows an alert, but it's very easy to change it to call speakMe.