Yandex Translate API: Пишем расширение для браузера

Добрый день! В один момент я занялся целью написать свое расширение для браузера.

Бывает, находясь на странице, нам нужно узнать перевод незнакомого нам слова или предложения, но копировать выделенное с последующей вставкой на новой вкладке в поле для перевода дело довольно утомительное. Ведь намного лучше моментально получить перевод выделенного фрагмента.



После выделения, посредине страницы появляется блок с переводом и через секунду плавно исчезает.



Решить вопрос помогут пользовательские скрипты и расширения для браузера.
add-ones для браузеров

Mozilla Firefox — Greasemonkey
Opera — Violentmonkey

Пишем расширение

Комментарии

// ==UserScript==
// @name        Robinzon by MiDen
// @include     *
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @version     1.0
// @author      Денис Мисанюк
// @license     freeware
// @icon        https://ps.vk.me/c609626/u131776794/docs/46e0630bdf11/robinzon.png
// ==/UserScript==

В комментариях прописываем разную служебную информацию (авторcтво, версию, название, тип лицензии, ссылку на изображение).
Также здесь подключаем библиотеку jQuery.

Эти данные использует плагин для отображения информации по нашему расширению.

Создаем и стилизуем наш блок

$('body').append("<div id='robinzon'><div style='display:table;height:100%;'><div style='display:table-cell;vertical-align:middle;width:150px;'></div></div></div>");
$("#robinzon").css({"width": "150px",
"height": "150px",
"background": "none repeat scroll 0% 0% rgba(0, 0, 0, 0.5)",
"position": "fixed",
"display":"none",
"top": "45%",
"left": "45%",
"z-index": "999",
"text-align": "center",
"color": "white",
"font-family": "Segoe Ui",
"font-size": "25px",
"font-weight": "100",
"padding":"10px",
"border-radius": "85px"});

Добавляем обработчик

$("html").click(function(){
        text = document.getSelection();
	console.log(text);
        if (text!='') {
            $.ajax({
                type: "POST",
                url: 'https://translate.yandex.net/api/v1.5/tr.json/detect?key=trnsl.1.1.20140730T105810Z.a8bb36f8d87c6f11.b4912cbf0f1e4dbe9c51f28c272521b0af68ba42&text=' + text,
                success: function (response) {
                    lang = response.lang;
                    console.log(lang);
                }
            });
            if (lang == 'en') {
                lang = 'ru';
            }
            else {
                lang = 'en';
            }
            var link = 'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20140730T105810Z.a8bb36f8d87c6f11.b4912cbf0f1e4dbe9c51f28c272521b0af68ba42&text=' + text + '&lang=' + lang;
            text = '';
            $.ajax({type: 'GET',
                url: link,
                success: function (response) {
                    $("#robinzon div div").text(response.text[0]);
                    $("#robinzon").show();
                    setTimeout('$("#robinzon").fadeOut("slow")', 1000);
                }
            });
        }
    });

Спасибо за внимание!

P.S. Для перевода текста я выбрал Яндекс Translate API.
Исходный код.