Language Switcher for Wikipedia – my first Chrome browser plugin – Part 2

So, yesterday I created a simple chrome plugin for switching between German and English on Wikipedia. ( -> Direct link to download!)

Today is about cleaning this up, and adding options (which language you want) to the code.

To add options, you first need to add them to your manifest file:

{
"name": "Wiki_Language Switcher",
"version": "0.0.1",
"options_page": "src/options/options.html",
"manifest_version": 2,
"description": "allows you to quickly switch between two Wikipedia languages",
"homepage_url": "https://birgitplays.wordpress.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
}

Obviously, options.html has to exist. Anyways, it’s pretty easy to do this, so just follow the tuturial: http://developer.chrome.com/extensions/options.html

The HTML file is quite long (bazillion languages to pick from), so I’ll just link you to Github:
https://github.com/b-ploetzeneder/wiki-language-switcher/blob/master/Code/src/options/options.html

Since I wanted to use Chrome Storage API (http://developer.chrome.com/extensions/storage.html), I had to update manifest.json

"permissions": [ "storage" ],

In the end, it looked like this:

https://github.com/b-ploetzeneder/wiki-language-switcher/blob/5d19590b9c2d36f4d33ef684e8f2a49fbd838cae/Code/manifest.json

Accessing Google Storage API is pretty simple, but you need to realise that it is asynchronous. So the calls of those functions are non-blocking, so if you call them, and use the values immediately later, you’ll get hurt. You should create a Event structure or something like this, but I’m keeping it simple and stupid for now:

My new inject file looks like this:

// injects a language link instead of discussion link on Wikipedia
chrome.extension.sendMessage({}, function(response) {
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
clearInterval(readyStateCheckInterval);
var languagelink;
//try to get chrome storage data for language 1
chrome.storage.sync.get("l1", function(data) {
var key=data.l1;
//find the element that contains string describing data 1
try{
languagelink = document.getElementsByClassName(key);
console.log(languagelink[0].innerHTML); //this throws an error if the element does not exist.
//get the discussion element
var discussion_link = document.getElementById("ca-talk");
//replace it with newly generated tab
var newtab = document.createElement('li');
newtab.innerHTML=""+languagelink[0].innerHTML+"";
discussion_link.parentNode.replaceChild(newtab, discussion_link);
}
catch(err)
{
console.log("Didn't find Language 1, try again");
chrome.storage.sync.get("l2", function(data) {
var key2=data.l2;
languagelink = document.getElementsByClassName(key2);
console.log(languagelink[0].innerHTML); //this throws an error if the element does not exist.
//get the discussion element
var discussion_link = document.getElementById("ca-talk");
//replace it with newly generated tab
var newtab = document.createElement('li');
newtab.innerHTML=""+languagelink[0].innerHTML+"";
discussion_link.parentNode.replaceChild(newtab, discussion_link);
});
}
});
}
}, 10);
});

The trick is to initialize default values. I do this by

//This serves to create the default values
chrome.storage.sync.get("l1", function(data) {
var key=data.l1;
if(!key)
{
console.log("create default values, because nothing is available");
var text ="interlanguage-link interwiki-de"; //Default value is German if nothing is here
chrome.storage.sync.set({'l1': text}, function() { // save..
chrome.storage.sync.get("l1", function(data) {
console.log("Saved Language 1", data);
})
text ="interlanguage-link interwiki-en"; //Default value is English for second language
chrome.storage.sync.set({'l2': text}, function() { // save..
chrome.storage.sync.get("l2", function(data) {
console.log("Saved Language 2", data);
options_valid=true;
});});
});
}
});

As a final step, I wrapped up my application, created a crx-File and icons. Done.

Check it out at : https://github.com/b-ploetzeneder/wiki-language-switcher (or try the direct link to download it!)

Advertisements

One comment

  1. […] ← Building a color camera with an IR controlled RGB LED lamp and a monochromatic camera Language Switcher for Wikipedia – my first Chrome browser plugin – Part 2 → […]

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: