Пишем расширение для Chrome: Яндекс-переводчик

pyro338

Только ленивый не написал подобный урок. Тысячи их. Но вот ВНЕЗАПНО на форуме опять встал вопрос: «как?». Рассказываю.

Во первых идем в Яндекс по адресу 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

Добавить комментарий