Translate Titles on Wikipedia – Firefox Addon

Add links to English and Finnish translations on Wikipedia. Add-on for Firefox.
Download from official Firefox Add-ons site.
The rest of this article is “making of”, interesting if you want to learn to write your own Firefox extensions.

I wrote this addon earlier in 2015 using the previous XUL extensions API. This one is using the latest WebExtensions API, the one extentions API for both Firefox and Chromium/Chrome.
The latest 2.2.0 is also written in vanilla JavaScript (EcmaScript 6) instead of jQuery.

Making the WebExtension

Making WebExtensions is easy. Only two files are really needed: manifest.json and a JavaScript file foo.js.
Firefox has the evil policy that you can only install addons signed by Mozilla. No, you can’t even choose to install an addon of your choosing by changing any about:config settings. So you have to upload your addon to official Mozilla site so that it can be installed on vanilla Firefox.
Mozilla Developer Network MDN has very good WebExtension reference and “Your first extension” tutorial.
To try your files, use about:debugging and “Load Temporary Add-on”. To publish it, just compress to zip, register to Mozilla and upload. You don’t need any software (except Firefox browser) to create add-ons.

The Content Script

See how elements are found and manipulated without jQuery, using just latest JavaScript/ES6. Some of the main tools are querySelectorAll() and innerHTML.

targetLangs=["fi", "en"]; // user settings
langlinks=document.querySelectorAll("a[class=interlanguage-link-target]")
langs = []
html="";
for (let link of langlinks) {
	langs.push(link.lang);
	if (targetLangs.includes(link.lang)) {
		title=link.href.split("/").pop(); // e.g. "Barreli"
		title=decodeURI(title).replace(/_/g, " "); // scandics and space
		html+=" <a href='"+link.href+"'>"+link.lang+":"+title+"</a>";
	}
}
html=" &nbsp; <small>"+html+"</small>";
document.querySelector("h1").innerHTML+=html;

Update: I added some cross site scripting (XSS) protection to the latest version I published on Firefox Add-ons page. It’s a good idea to sanitize data before injecting it back to page using innerHTML. The original version without XSS protection is above.

Add-on Manifest

Manifest contains the basic metadata on the extension. It’s also the main entry point to the program. In this WebExtension, manifest defines when the content script will run.

{
	"manifest_version": 2,
	"name": "Translate titles on Wikipedia - en+fi edition",
	"version": "2.2.0", // APIs used: Firefox Quantum, Wikipedia website
	"description": "Add links to English and Finnish translations to Wikipedia. Translations are shown in main heading h1. Free software under GPL 3 or later. This addon is not affiliated with or endorsed by Wikipedia. ",
	"developer": {
		"name": "Tero Karvinen",
		"url": "http://TeroKarvinen.com"
	},
	"content_scripts": [
		{
			"matches": ["*://*.wikipedia.org/*"],
			"js": ["translate-titles.js"]
		}
	]
}

Conclusions

Creating WebExtensions for Firefox Quantum is easy. Mozilla’s policy of controlling what you and your users can install in their own Firefox is evil.
Download from official Firefox Add-ons site.

Lyhyesti Suomeksi

Suomenkieliset käännökset englanninkieliseen Wikipediaan. Firefoxin lisäke.