Develop a Google Chrome extension using Google Translate

Question

Hi, I am developing a Google Chrome extension:
It is a dictionary that uses the Google translate API,
When the user selects a text on the page I would like a popup to appear and show the selected text definition,

I have this code in my js file :

var req = new XMLHttpRequest();
req.open(
    "GET",
    "https://www.googleapis.com/language/translate/v2?" +
    "format=html" +
    "q=" + get_text_selection() + // Source Text
"source=en&" + // Source Language
"target=fa&" + // Target Language
true);
req.send(null);

function get_text_selection() {

    if (window.getSelection)

    return window.getSelection();

    if (document.getSelection)

    return document.getSelection();

    if (document.selection)

    return document.selection.createRange().text;

    return '';

}

and this code in my Manifest.json file :

{
  "name": "Google Translator",
  "version": "1.0",
  "manifest_version": 2,
  "description": "This Extention helps you to translate text in your page",
  "browser_action": {
    "default_icon": "Dictionary-Book-icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [ "http://*/*", "https://*/*", "tabs" ]
}

and this code in my html file :

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }

    </style>
    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
  </body>
</html>

but it's not working?
Where is my problem?
Thanks for your advice.

Related: http://stackoverflow.com/questions/2626859/chrome-extension-how-to-capture-selected-text-and-send-to-a-web-service. But you also need to know how to communicate between the active page and the popup. I'm sure that question has also been asked, but I can't find it at the moment... — apsillers, Nov 14 '12 at 20:44

The Alpha · Accepted Answer · 2012-11-14T21:23:05.170

First of all Google Translate API is a paid service now. To use Google Translate API you need to get an API key from Google, you can get more information from here. After you get an API key your url should be like

"https://www.googleapis.com/language/translate/v2?key=INSERT-YOUR-KEY&source=en&target=fa&q=Hello%20world" // "Hello world" is query here

Which is in your case

"https://www.googleapis.com/language/translate/v2?key=INSERT-YOUR-KEY" + "&format=html" + "&source=en" +"&target=fa" + "&q=" + get_text_selection()

Using following request (using my valid key from the browser address bar)

"https://www.googleapis.com/language/translate/v2?key=my_valid_key&format=html&q=home&source=en&target=fa" // I've replaced my key with my_valid_key

I've got this result

{  "error": {   "errors": [    {
    "domain": "usageLimits",
    "reason": "dailyLimitExceeded",
    "message": "Daily Limit Exceeded"    }   ],
    "code": 403,   
    "message": "Daily Limit Exceeded"  
  }
}

Google Translate API no longer free and Translate API FAQ.

Develop a Google Chrome extension using Google Translate

1 Answers1