Hack 90. Translate Any Web Page

 < Day Day Up > 

Add a form at the top of every web page to translate it into your language.

Google Language Tools offers automated online translation of any web page. It's simple to use; just visit http://translate.google.com, enter the URL of the page, and select the source and target languages.

As is the case with so many web services, it would be even simpler to use if it were integrated with the web pages you visit. This hack adds a form at the top of every web page to hook it into Google's translation service.

11.2.1. The Code

This user script runs on all pages. It contains a hardcoded matrix of all the translations that Google Language Tools can perform automatically. English dominates the lists, as both a source and a target language. The script attempts to autodiscover the page's language by looking for a lang attribute on the <html> element. In XHTML, authors can also specify the language in the xml:lang attribute, but that functionality is left as an exercise for the reader. In theory, authors can also specify the language in the Content-Language HTTP header, but HTTP headers are not accessible to user scripts, so we can't check for that either.

On the bright side, the script does remember your previous choices for source and target languages, using the GM_setValue and GM_getValue functions to store your preferences in the local Firefox preferences registry.

Save the following user script as translatepage.user.js:

 // ==UserScript== // @name   Translate Page // @namespace   http://diveintomark.org/projects/greasemonkey/ // @description   translate pages with Google Language Tools // @include   http://* // @include   https://* // @exclude   http://www.google.com/language_tools* // @exclude   http://translate.google.com/* // ==/UserScript== if (location.pathname == '/translate_c') return; var arArTranslate = {}; arArTranslate['en'] = ['de', 'es', 'fr', 'it', 'pt', 'ja', 'ko', 'zh-CN']; arArTranslate['de'] = ['en', 'fr']; arArTranslate['es'] = ['en']; arArTranslate['fr'] = ['en', 'de']; arArTranslate['it'] = ['en']; arArTranslate['pt'] = ['en']; arArTranslate['ja'] = ['en']; arArTranslate['ko'] = ['en']; arArTranslate['zh-CN'] = ['en']; var arTranslateName = {  'en': 'English',  'es': 'Spanish',  'de': 'German',  'fr': 'French',  'it': 'Italian',  'pt': 'Portuguese',  'ja': 'Japanese',  'ko': 'Korean',  'zh-CN': 'Chinese (Simplified)'}; var langSource;  var attrLang = document.evaluate("//html/@lang", document, null,  XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;  if (attrLang) { langSource = attrLang.value; } if (!(langSource in arArTranslate)) { langSource = GM_getValue('lang.source') || 'en';  } var langTarget = GM_getValue('lang.target') || arArTranslate[langSource][0]; for (var i = arArTranslate[langSource].length; i >= 0; i--) { if (arArTranslate[langSource][i] == langTarget) break;  } if (i < 0) { langTarget = arArTranslate[langSource][0];  } var elmTranslateDiv = document.createElement('div'); elmTranslateDiv.style.borderBottom = '1px solid silver'; elmTranslateDiv.style.textAlign = 'right'; var htmlSelect = '<select name="langpair" >'; for (var langOneSource in arArTranslate) { for (var i = 0; i < arArTranslate[langOneSource].length; i++) { langOneTarget = arArTranslate[langOneSource][i]; htmlSelect += '<option value="' + langOneSource + '|' + langOneTarget + '"' + (((langOneSource == langSource) && (langOneTarget == langTarget)) ?  ' selected' : '') + '>' + arTranslateName[langOneSource] +   ' to ' + arTranslateName[langOneTarget] + '</option>'; }  } htmlSelect += '</select> '; elmTranslateDiv.innerHTML =  '<form  method="GET" ' +  'action="http://translate.google.com/translate" ' +  'style="font-size: small; font-family: sans-serif;">' +  'Translate this page from ' +  htmlSelect +  '<input type="hidden" name="u" value="' + location + '">' +  '<input type="hidden" name="hl" value="en">' +  '<input type="hidden" name="c2coff" value="1">' +  '<input type="hidden" name="ie" value="UTF-8">' +  '<input type="hidden" name="oe" value="UTF-8">' +  '<input type="submit" value="Translate">' +  '</form>'; document.body.insertBefore(elmTranslateDiv, document.body.firstChild);  var elmTranslateForm = document.getElementById('translatepage'); if (!elmTranslateForm) return; elmTranslateForm.addEventListener('submit', function(event) {  var elmSelect = document.getElementById('langpair');  if (!elmSelect) return true;  var ssValue = elmSelect.value;  var langSource = ssValue.substring(0, ssValue.indexOf('|'));  var langTarget = ssValue.substring(ssValue.indexOf('|') + 1);  GM_setValue('lang.source', langSource);  GM_setValue('lang.target', langTarget);  return true; }, true); 

11.2.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://greasemonkey.mozdev.org. At the top of the page, you will see drop-down box labeled "Translate this page from." This hack tries to autopopulate the source language by looking at the pages metadata. However, many pages do not properly specify their language, so you might need to tweak the value manually.

After selecting the appropriate values, click Translate to see Google's translation, as shown in Figure 11-1.

Figure 11-1. Greasemonkey home page in Spanish


Since the translation is done entirely by a computer, it is far from perfect. In some cases, it is wildly and humorously inaccurate. (There are entire sites devoted to cataloging humorous computer translations of famous texts. Some people have entirely too much free time.) But Google's autotranslation will usually be accurate enough to give you a general overview of what the author was trying to express.

     < Day Day Up > 


    Greasemonkey Hacks
    Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox
    ISBN: 0596101651
    EAN: 2147483647
    Year: 2005
    Pages: 168
    Authors: Mark Pilgrim

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net