Только ленивый не написал подобный урок. Тысячи их. Но вот ВНЕЗАПНО на форуме опять встал вопрос: «как?». Рассказываю.
Во первых идем в Яндекс по адресу https://translate.yandex.ru/developers/keys. Щелкаем «Создать новый ключ», а полученный ключ копируем в надежное место.
Этот ключик нам понадобится, чтобы обращаться к API Яндекса, как вы понимаете. Далее создаем файл с названием manifest.json
{ "manifest_version": 2, "name": "Шайтанама переводилошная", "version": "0.1", "icons": { "16": "16x16.png", "32": "32x32.png", "48": "48x48.png", "128": "128x128.png" }, "browser_action": { "default_title": "Открыть переводчик", "default_icon": "48x48.png", "default_popup": "popup.html" }, "permissions": [ "http://translate.yandex.net/*"] }
manifest_version — на момент написания этой статьи актуальна вторая версия.
name — имя вашего расширения.
version — версия расширения. можно использовать латинские цифры и точки в любых сочетаниях.
icons — иконка вашего расширения под разные разрешения.
browser_action:
default_title — всплывающая подсказка при наведения курсора на кнопку расширения.
default_icon — иконка расширения.
default_popup — страничка всплывающего окна нашего переводчика.
permissions — разрешения для нашего расширения. Будем работать с Яндексом, значит Яндекс.
Создаем файлик popup.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="jquery.min.js"></script> <script src="include.js"></script> <title>Шайтанама перевод</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="copy"> <a href='http://translate.yandex.ru/' style="font-size: 8px; margin-bottom: 5px;">Переведено с помощью Яндекс Переводчика</a> </div> <textarea id="input" class="form-control"></textarea><br> <input id="btn_submit" type="submit" class="form-control"><br> <div id="result" style="padding: 5px;"></div> </div> </body> </html>
Тут я думаю все понятно. Одно поле для ввода, одна кнопка и один div, в который мы будем выводить результат.
Важно! Никто никогда конечно не читает лицензионное соглашение, но там написано, что если вы не поставите ссылку на http://translate.yandex.ru/, то ключик у вас могу аннулировать. Не надо так.
Далее самое интересное. Пишем скрипт нашего перевода. Файл include.js:
var yatr = { key: 'trnsl.1.1.20150402T131655Z.e753695703b45806.bda2fd6beb5bd56a62f0034352aaebbdba3f0952',//Наш API ключик, который мы скопировали заранее api: 'https://translate.yandex.net/api/v1.5/tr.json/translate?',//Адрес API переводчика translate: function(text, callback){ var reg = /[а-яёЁ]/i;//Простая регулярка для определения кириллицы var language = (reg.test(text)) ? 'ru-en':'en-ru';//Если кириллица, то переводим с русского на английский. Если нет - то наоборот var url = this.api;//Начинаем формировать строку для нашего запроса url += 'key='+this.key;//Дописываем ключик url += '&text='+text;//Текст, который нам надо перевести url += '&lang='+language;//Направление перевода var ajax = new XMLHttpRequest();//Создаем Аякс запрос ajax.open('GET', url, true); ajax.onreadystatechange = function(){ if(ajax.readyState == 4){//Запрос завершился, ответ получен if(ajax.status == 200){//Все Ок text = ajax.responseText; text = JSON.parse(text); text = text.text[0];//Формируем выходную строку. В принципе это все можно было написать в одну строчку, но так. $('#result').text(text);//Выводим переведенную строку в див с id result callback(text); } } } ajax.send(null); }, } log = function(text){ console.log(text);//На всякий случай)) } $(document).ready(function(){ $('#btn_submit').click(function(){//Нажали на кнопку var text = $('#input').val();//Получили текст из инпута yatr.translate(text, log);//Перевели }); }); //Вы великолепны!
Рабочий пример можно скачать тут
Чтобы установить расширение в браузер, щелкаем Дополнительные инструменты -> Расширения -> Режим разработчика -> Загрузить распакованное расширение.
Некоторые моменты по работе с Яндекс API честно подсмотрел на канале SkanerSoft
Милый мой друг,спасибо за исходник.
Я так рад что существуют такие люди как ты,я очень тебе признателен.
Теперь это мой курсовой проект.
Будешь в Новосибирске с меня пиво.