Только ленивый не написал подобный урок. Тысячи их. Но вот ВНЕЗАПНО на форуме опять встал вопрос: «как?». Рассказываю.
Во первых идем в Яндекс по адресу 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
Милый мой друг,спасибо за исходник.
Я так рад что существуют такие люди как ты,я очень тебе признателен.
Теперь это мой курсовой проект.
Будешь в Новосибирске с меня пиво.