Language Switcher for Wikipedia – my first Chrome browser plugin

I’ve always loved Wikipedia. And I love to use it in multiple languages and switch in between them.

Wikipedia offers this functionality, however, the UI is not quite what I want. I want it to be like this:

english

So I decided to spend a few hours (granted, it was less that 2) to write my very first browser plugin. It’s surprisingly easy, even if your JavaScript is really, really, really rusty.
(You can download my version here: https://github.com/b-ploetzeneder/wiki-language-switcher/blob/master/Downloads/Wiki_Language_Switcher.crx)
First, you need to understand how extensions work:

Browse through the following links:

http://developer.chrome.com/extensions/getstarted.html

http://developer.chrome.com/extensions/samples.html#script

 

To get started, I went on http://extensionizr.com, which created the basic files for an extension (manifest.json,..) for me. I started with the following instructions: http://alexw.me/2013/04/how-to-build-a-simple-chrome-extensio/ and just created the basic files.

 Now I changed the manifest.json to just start with the German Wikipedia:


{
"name": "Wiki_Language Switcher",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension injects buttons to switch between English and German language of Wikipedia",
"homepage_url": "https://birgitplays.wordpress.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"page_action": {
"default_icon": "icons/icon19.png",
"default_title": "page action demo",
"default_popup": "src/page_action/page_action.html"
},
"content_scripts": [
{
"matches": [
"http://de.wikipedia.org/wiki/*"
],
"css": [
"src/inject/inject.css"
]
},
{
"matches": [
"http://de.wikipedia.org/wiki/*"
],
"js": [
"src/inject/inject.js"
]
}
]
}

Wikipedia adds

 

 


or something like that onto your web page and you want to extract that link.

We can use JavaScript to query for this.
Open inject.js to query for the element.
(Browse this to learn how: http://javascript.info/tutorial/searching-elements-dom)

chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);

var english_link = document.getElementsByClassName(“interlanguage-link interwiki-en”);

console.log(english_link[0].innerHTML);

}
}, 10);
});

Go to chrome://extensions/
and change to Developer Mode.
Load your extension.

You should see something like this..
added_extension

Press Ctrl+Shift+J to load JavaScript Console, open German Wikipedia, und you’ll see something like this:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. load.php?debug=false&lang=de&modules=jquery%2Cmediawiki%2CSpinner%7Cjquery.triggerQueueCallback%2Cl…:48
English inject.js:10

Who cares about the warning? Actually I do, but right now, I want to get this thing running 🙂

Now, I want to add after “Diskussion” tab on the upper left with my link:

The Item I”m talking about is

li id="ca-talk">Talk

 

You need to find the element in DOM And replace it.
var discussion_link = document.getElementById("ca-talk");
console.log(discussion_link.innerHTML);
var newtab = document.createElement('li'); newtab.innerHTML=""+german_link[0].innerHTML+"";
discussion_link.parentNode.replaceChild(newtab, discussion_link);

Now create the same for English websites, that is, create a new js file:

chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
var german_link = document.getElementsByClassName("interlanguage-link interwiki-de");
console.log(german_link[0].innerHTML);
var discussion_link = document.getElementById("ca-talk");
console.log(discussion_link.innerHTML);
var newtab = document.createElement('li');
newtab.innerHTML=""+german_link[0].innerHTML+"";
discussion_link.parentNode.replaceChild(newtab, discussion_link);

}
}, 10);
});

And update manifest.json

{
"name": "Wiki_Language Switcher",
"version": "0.0.1",
"manifest_version": 2,
"description": "This extension injects buttons to switch between English and German language of Wikipedia",
"homepage_url": "https://birgitplays.wordpress.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"page": "src/bg/background.html",
"persistent": true
},
"page_action": {
"default_icon": "icons/icon19.png",
"default_title": "page action demo",
"default_popup": "src/page_action/page_action.html"
},
"content_scripts": [
{
"matches": [
"http://de.wikipedia.org/wiki/*"
],
"css": [
"src/inject/inject.css"
]
},
{
"matches": [
"http://de.wikipedia.org/wiki/*"
],
"js": [
"src/inject/inject.js"
]
},
{
"matches": [
"http://en.wikipedia.org/wiki/*"
],
"css": [
"src/inject/inject.css"
]
},
{
"matches": [
"http://en.wikipedia.org/wiki/*"
],
"js": [
"src/inject/inject_english.js"
]
}
]
}

Continue reading.. or check the final result at : https://github.com/b-ploetzeneder/wiki-language-switcher (or try the direct link to download it!)

Advertisements

One comment

  1. […] yesterday I created a simple chrome plugin for switching between German and English on […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: