Now, here's a demo of a chrome app that uses the chrome text-to-speech engine.

And, here's the source I've modified this app to work as an 'extension' instead of an app. But, the tts is not available it seems. I've added 'tts' under 'permissions' in my manifest file.

{
  "manifest_version": 2,
  "name": "Text2Speech",
  "version": "1",
  "minimum_chrome_version": "23",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "permissions": ["tts"],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["js/jquery-1.7.2.min.js", "js/app.js"]
    }
  ]
}

And, here's my code so far:

$(document).ready(function(){
  $(document).on("keypress", function(e) { 
    if ( e.shiftKey && ( e.keyCode === 108 || e.keyCode === 76) ) {
      console.log( "You pressed SHIFT + L" , $(prevElement).text());
      saySomething($(prevElement).text());
    }
  });
});
var prevElement = null;
document.addEventListener('mousemove',
  function(e){
      var elem = e.target || e.srcElement;
      if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
      elem.classList.add("mouseOn");
      prevElement = elem;
  },true);

function saySomething(toSay) {
  chrome.tts.speak(toSay, { rate: 0.8, onEvent: function(event) {}}, function(evt) {});
}

I am getting an error in saySomething method.

Uncaught TypeError: Cannot read property 'speak' of undefined

Any help is appreciated.

Now, here's a demo of a chrome app that uses the chrome text-to-speech engine.

And, here's the source I've modified this app to work as an 'extension' instead of an app. But, the tts is not available it seems. I've added 'tts' under 'permissions' in my manifest file.

{
  "manifest_version": 2,
  "name": "Text2Speech",
  "version": "1",
  "minimum_chrome_version": "23",
  "icons": {
    "16": "icon_16.png",
    "128": "icon_128.png"
  },
  "permissions": ["tts"],
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["js/jquery-1.7.2.min.js", "js/app.js"]
    }
  ]
}

And, here's my code so far:

$(document).ready(function(){
  $(document).on("keypress", function(e) { 
    if ( e.shiftKey && ( e.keyCode === 108 || e.keyCode === 76) ) {
      console.log( "You pressed SHIFT + L" , $(prevElement).text());
      saySomething($(prevElement).text());
    }
  });
});
var prevElement = null;
document.addEventListener('mousemove',
  function(e){
      var elem = e.target || e.srcElement;
      if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
      elem.classList.add("mouseOn");
      prevElement = elem;
  },true);

function saySomething(toSay) {
  chrome.tts.speak(toSay, { rate: 0.8, onEvent: function(event) {}}, function(evt) {});
}

I am getting an error in saySomething method.

Uncaught TypeError: Cannot read property 'speak' of undefined

Any help is appreciated.

• javascript
• google-chrome
• google-chrome-extension
• text-to-speech

2 Answers 2

According to https://developer.chrome./extensions/content_scripts, content scripts have some limitations. They cannot:

Use chrome.* APIs, with the exception of:

• extension ( getURL , inIncognitoContext , lastError , onRequest , sendRequest )
• i18n
• runtime ( connect , getManifest , getURL , id , onConnect , onMessage , sendMessage )
• storage

You may want to send a message from your content script to your background page as documented at https://developer.chrome./extensions/messaging#simple

// content script
chrome.runtime.sendMessage({toSay: "hello Vikram"}, function() {});

// background page
chrome.runtime.onMessage.addListener(function(request) {
  chrome.tts.speak(request.toSay, 
                  { rate: 0.8, onEvent: function(event) {}}, function() {});
});

I think you have to use chrome.tts from your background page and not in a content script.

see this for an example: https://developer.chrome./extensions/samples#speak-selection