Pilgrim M. Greasemonkey Hacks / Chapter 11. Site Integration

Computers & Technology
Education & Reference
Business & Investing
Science & Math

Greasemonkey Hacks
Authors: Pilgrim M.
Published year: 2005
Pages: 128-130/168

Buy this book on amazon.com >>

<< Previous page
Table of contents
Next page >>

< Day Day Up >

Chapter 11. Site Integration

Section 11.1. Hacks 90-94: Introduction

Hack 90. Translate Any Web Page

Hack 91. Warn Before Buying an Album

Hack 91. Find Out Who's Reading What You're Reading

Hack 93. Add Wikipedia Links to Any Web Page

Hack 94. Compare Book Prices

< Day Day Up >

11.1. Hacks 90-94: Introduction

One of the most powerful features of Greasemonkey scripts is the ability to integrate different sites in ways that neither site expected. This can be as simple as adding a form on one site that submits data to another site, or as complex as pulling data from disparate sites and combining them dynamically.

Most of the hacks in this chapter rely on a Greasemonkey API function called GM_xmlhttpRequest , which allows user scripts to get and post data to any site, anywhere , at any time. As you may recall from "Avoid Common Pitfalls" [Hack #12] , this function was the center of a number of security holes in previous versions of Greasemonkey. Those vulnerabilities have long since been resolved, but you should always be aware of the power that Greasemonkey provides. It's a wonderful thing, but like every sufficiently advanced technology, it can be used for evil as well as good.

All the scripts in this chapter are safe to use, which is to say that they only do what they claim to do. Where there are unavoidable privacy concerns, I call them out specifically in the text.

< Day Day Up >

Hack 90. Translate Any Web Page

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 >