100 lines of code: “t for translate” Chrome Extension

Some of my friends engage in the unfortunate behavior of posting stuff on Facebook in languages I don’t understand. But instead of de-friending them, I was looking for way to instantly translate stuff wherever I am on the web. Chrome being my browser of choice, I decided to built a Chorme extension: When you highlight any text on a web page an hit the ‘t’ key, it instantly translates the text for you – so I called it ’t for translate’.

It lives on less than 100 lines of code, and here is how I did it:

All I needed to do was to run a bit a Javascript/jQuery code it the background that listens to the ‘t’ key, gets the highlighted text, sends it to the Google translation API, and puts in result in a tooltip sort of pop up. To do just that ‘content scripts’ are your weapon of choice.  Content Scripts are plain old Javascript files that can run in the context of any open web page.

So whenever a page has loaded, I create an object called ‘selection’, and append a hidden div to the body:

$(document).ready(function(){
    selection = new Object()
    make_popup()
});
 
function make_popup(){
    $('body').append('<div id="popup"></div>')
    $('#popup').css({
        'font-size': '14px',
        'background-color': 'white',
        'border-color': 'black',
        'color': 'black',
        'border': '1px solid',
        'padding': '5px',
        'display': 'none',
        'z-index': '1000',  
        'position': 'absolute', 
        'top': '0px', 
        'left': '0px'
    })
};

Whenever text is highlighted, I want to know the selected text, and the position of the mouse, because that’s where I’ll put the translation pop up later. So I add a “mouse up” listener:

$('body').mouseup(function(e){
    selection.x = e.pageX + 20
    selection.y = e.pageY + 10
    selection.text = window.getSelection().toString()
});

I only want to kick off translation when I press the ‘t’ key, so I add a listener for that event too. When the ‘t’ key pressed but no text is selected, nothing should happen, and when I click anywhere on the page or press any other key, the pop up is hidden. Else, the highlighted text is sent to the translation function, and the response (translated text) put into the popup which is then shown:

$('body').keypress(function(event){
    if (event.keyCode == 116){
        if (selection.text != ''){
            chrome.extension.sendRequest({highlighted: selection.text }, function(response) {
                $('#popup').css({'top': selection.y, 'left':selection.x })
                var translation = response.translation
                $('#popup').text(translation)
                $('#popup').show()
            });
        }
    } else{
        $('#popup').hide()
    }
});
 
$('body').click(function(){
    $('#popup').hide()
});

Because I was unable to load the translation API into my content script, I’m sending the highlighted text to a function that lives in my background page, which looks like this:

<script src="http://www.google.com/jsapi"></script>
<script>
google.load('language', '1');
chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        google.language.detect(request.highlighted, function(result) {
            google.language.translate(request.highlighted, result.language, localStorage['language'], function(result){
                sendResponse({translation: result.translation})
        });
    });
});
</script>

It loads the the Google language API, listens to incoming requests from my content scripts, asks Google to detect the language and returns the translated text.

That’s much pretty it! But I figured though if this is to be useful for a non English speaker, I should allow users to specify which language they would like to translate to, and learn a bit about the chrome pop-up concept and local storage in the process. So I made a pop-up page which is shown when a user clicks on the extension’s icon:

$(document).ready(function(){
    var current_lang = localStorage['language'];
    $('#'+current_lang).css({'font-weight':'bold'})
$('.lang').click(function(){
    $('.lang').css({'font-weight':'normal'})
    $(this).css({'font-weight':'bold'})
    localStorage['language'] = this.id;   // Store data
});
});

<div id="wrap">
    <span>translate to:</span>
<div id="de" class="lang"><img src="images/de.png" alt="" />Deutsch</div>
<div id="en" class="lang"><img src="images/en.png" alt="" />English</div>
<div id="fr" class="lang"><img src="images/fr.png" alt="" />Français</div>
<div id="es" class="lang"><img src="images/es.png" alt="" />Español</div>
</div>

When one of the language selection divs is clicked, the language code is put into local storage so it’s available even after the browser is restarted.

There you have it! A fully functioning Chrome extension in less than 100 lines of code…! If anybody is interested in this, let me know in the comments and I’ll make extension publicly available…