< 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 CodeThis 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 HackAfter 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 SpanishSince 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 > |