Разработка расширения для браузера Google Chrome - переведенный текст возле курсора мыши.

Кратко о нашем расширении, чтобы перевести текст достаточно его выделить мышкой с зажатой кнопкой alt, текст будет переводиться через Yandex Translate Api

alt + выделяем текст отпускаем мышку и возле курсора мышки появляется переведенный текст, исходний язык перевода определяеться автоматически и переводиться текст на русский язык(По выбору можно сменить его)




Создаем папку скачиваем последнюю версию jquery с сайта(сохраним его в папку на одном уровне с manifest.json и сразу переименуем сохраненный js файл в jquery.js)




Cоздаем первый файл(в папке куда сохранили jquery) с названием manifest.json с таким содержанием

{
    "content_scripts" : [{
            "js" : ["jquery.js", "trans.js"],
            "matches" : ["http://*/*", "https://*/*"],
            "run_at" : "document_start"
        }
    ],
    "description" : "Переводчик",
    "icons" : {
        "128" : "icon_128.png"
    },
    "manifest_version" : 2,
    "name" : "TRANSLATE iT",
    "version" : "1.0"
}



Описание основных моментов manifest.json


"js" : ["jquery.js", "trans.js"]     ====================> какие javascript файлы будут загружаться на страницу
"name" : "TRANSLATE iT"              ====================> как будет называться наше расширение
"128" : "icon_128.png"               ====================> иконка для рассширения




Создаем второй файл с названием trans.js с таким содержанием

$(document).ready(function () {
        
    $('body').append("<p id='some'></p>");

    document.onmouseup = function (e) {

        var evtobj = window.event ? event : e;
        var mouseX;
        var mouseY;

        if (evtobj.altKey) {

            var sendData = document.getSelection();
            
                        $.getJSON('https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20140228T005714Z.79055e38d9e6ca00.1fdbc0748d31a463685835570aba61a1af640d8d&text=' + sendData + '&lang=ru', function (data) {
                
                                mouseX = e.pageX + 20;
                mouseY = e.pageY + 20;

                $("#some").text(data.text);

                $('#some').css({
                    'top' : mouseY,
                    'left' : mouseX,
                    'display' : 'block',
                    'position' : 'absolute',
                    'border' : '1px solid #333',
                    'background-color' : '#161616',
                    'border-radius' : '5px',
                    'padding' : '10px',
                    'color' : '#fff',
                    'font-size' : '12px Arial',
                    'width' : '300px'
                });
            });

            $(document).mousemove(function (event) {
                $('#some').css({
                    'top' : event.pageY + 20,
                    'left' : event.pageX + 20
                });
            });

            document.onmousedown = function () {
                $('#some').fadeOut(400);
            }

        }
    };
});

Наше рассширение готово

Чтобы установить его надо :

1)

Перейти в меню Extenstions


2) Активировать меню Developer mode для этого достаточно кликнуть на галочку developer mode


3) Нажать на кнопку Load unpacked extenstion... после чего выбрать нашу директория где мы создали наши js файлы


4) Вот и все, успешная установка.


Теперь переходим на какой нибудь сайт и выделяем текст с зажатой кнопкой alt и все )

Вот забирайте исходники напоследок TRANSLATER_fOR_CHROME.rar


Izohlar (2)

Авторизуйтесь, чтобы добавлять комментарии
Bizga xabar yuboring