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

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

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

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

  1. Милый мой друг,спасибо за исходник.
    Я так рад что существуют такие люди как ты,я очень тебе признателен.
    Теперь это мой курсовой проект.
    Будешь в Новосибирске с меня пиво.

  2. Уведомление: hydroxychloroquine coronavirus protocol
  3. Уведомление: oral hydroxychloroquine for lice
  4. Уведомление: hydroxychloroquine news update
  5. Уведомление: what is in hydroxychloroquine
  6. Уведомление: new hydroxychloroquine study
  7. I am really loving the theme/design of your blog.
    Do you ever run into any browser compatibility problems?
    A number of my blog readers have complained about my website not operating correctly in Explorer but looks great
    in Firefox. Do you have any tips to help fix this problem?

Добавить комментарий для Fiber Optic Patch Cord Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *