html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Пишем расширение для Google Chrome (и публикуем его) из песочницы tutorial



Леди и джентльмены! Сегодня мы попробуем написать и опубликовать расширение для Google Chrome. Оно будет переводить текст, введенный пользователем, с английского языка на русский и наоборот.


Царь издал манифест...


(Советую создать директорию для того, чтобы файлы не растерялись.)
Итак, с чего начинается расширение? Да, с манифеста (вы ведь это сказали?). Манифест — это файл отформатированный в JSON формате, в котором указаны все ресурсы приложения или расширения, различные разрешения (так ведь permissions переводится? Пойду проверю на своем переводчике...), название, описание, etc. Сейчас вы увидите манифест нашего приложения, а потом мы его разберем. Назовите этот файл manifest.json

01{
02    "manifest_version": 2,
03
04    "name": "Простой перевод",
05    "version": "1.0",
06
07    "icons": {
08        "16": "16x16.png",
09        "32": "32x32.png",
10        "48": "48x48.png",
11        "128": "128x128.png"
12    },
13
131        "permissions": [
132             "http://translate.yandex.net/*"
133        ],
134
14    "browser_action": {
15        "default_title": "Открыть переводчик",
16        "default_icon": "48x48.png",
17        "default_popup": "popup.html"
18    }
19 }

Итак:
2. Указываем версию манифеста (на данный момент 2 — последняя версия, 1 — уже не поддерживается)
4. Отображаемое имя приложения
5. Версия приложения (не включает в себя букв, только цифры и точки. Вы вольны выбирать любой формат. 1 и 1.1, и 1.0.0.1 — все правильно)
7-12. Описываем иконки используемые в приложении. Все разумеется должны быть в указанной директории. «16» означает, что иконка имеет размер 16х16. Я взял иконки с сайта iconsearch.ru, но вы можете взять любые другие.
UPD: 131-133 — просим разрешения на доступ к адресу перевода. Этого не было в статье изначально, так как работало и без этого. Вероятнее всего — это баг, значит нужно приучать себя использовать permissions, ведь где-то это может сработать (как в этом случае), а где-то нет.
14. В данной строке мы указываем, что наше приложение является расширением и оно имеет иконку рядом с адресной строкой.
15. Текст всплывающей подсказки при наведении на иконку.
16. Стандартная иконка. Она должна иметь размер 49х49, но, так как он очень специфичен, сложно найти иконку такого размера, я использую иконку 48х48 а Chrome сам изменит её размер. Здорово, правда?
17. Здесь мы указываем, какой html документ будет всплывать при нажатии на кнопку.

Итак, с манифестом покончили, пора и html написать

Давайте разметим территорию...


Наш документ будет очень прост. Одна область для ввода текста, кнопка отправки и блок для вывода текста. К сожалению, изучение html выходит за рамки нашего обзора, но, я думаю, что многие мои читатели уже знакомы с ним. Если вы не из их числа, то просто скопируйте это содержание китайской грамоты себе в проект. Назовите этот файл popup.html
<!DOCTYPE html>
<html>
<head>
    <script src="jquery.js"></script>
    <script src="popup.js"></script>
    <title></title>
</head>
<body>
    <textarea id="input"></textarea><br>
    <input id="btn_submit" type="submit"><br>
    <div id="result"></div>
</body>
</html>



А что насчет интерактивности?


Теперь перейдем к тому, без чего наше расширение не имело бы смысла — перейдем к JavaScript! Я буду использовать библиотеку jQuery, несмотря на то, что в этом проекте можно было обойтись и без неё. Скачайте jquery.js с сайта jquery.com и положите его в директорию нашего проекта (не забудьте переименовать его в jquery.js!).
Итак, собственно сам код файла popup.js — сердца нашего расширения.
01 $(document).ready(function(){
02    $('#btn_submit').click(function(e){
03        e.preventDefault();
04
05        var input = $('#input').val();
06
07        var url = "http://translate.yandex.net/api/v1/tr.json/translate";
08
09        var parent = /[а-яёЁ]/i;
10
11        var language = (parent.test(input))? 'ru-en':'en-ru';
12
13        $.getJSON(url, {lang: language, text: input}, function(res){
14            $('#result').text("");
15            for (var i in res.text) {
16                $('#result').text($('#result').text() + res.text[i] + " ");
17            }
18        });
19    });
20 });


Я не буду останавливаться на всем, так как изучение JavaScript опять же не является нашей целью сейчас. Остановлюсь только на основном.
7. В переменную записываем адрес, к которому мы можем обратиться для перевода. Его можно подсмотреть в документации к API Яндекса
9-11. Используя все наши знания в RegExp-ах, определяем наличие русских букв в строке. Если таковые присутствуют, то считаем текст русским.
13. Формируем JSON для отправки. В него входит собственно сам текст и входной язык.
14. Сбрасываем текст в блоке вывода. Вдруг там что-нибудь уже написано?
15-17. Для вывода нам потребуется цикл, поскольку нам вернется МАССИВ строк текста. Эти данные также можно подсмотреть в API.

С кодом тоже закончили. Теперь можно проверить расширение на локальной машине. Открываем Chrome, Меню -> Инструменты -> Расширения. В самом верху ставим галочку у надписи Режим Разработчика, жмем Загрузить распакованное расширение и указываем путь к нашей директории. Voila! Можете пользоваться! Но, как донести это произведение искусства до широких масс?..

Требуется распространитель


Специально для нас Google и придумала Chrome Web Store, а также панель разработчика. Все для того, чтобы мы чувствовали себя комфортно. Правда, за сервис придется заплатить 5$. Искусство требует жертв…
Итак, панель инструментов разработчика располагается по этому адресу. Заходим в аккаунт Google, и жмем большую кнопку Добавить новый продукт.


Запаковываем нашу директорию (именно ее саму, а не содержимое) в zip файл. Отправляем его на сервер.
Перед нами появляется страница необычайной красоты. Заполняем поля, все рекомендации появляются справа. Дам совет только по поводу рекламных изображений. Сделайте, по возможности, самое маленькое изображение, ведь чем изображений больше, тем выше в поиске и на странице Web Store будет отображаться расширение.



Итак, всем спасибо. Занавес!

Полученые знания


Сегодня мы познакомились с азами разработки расширений для Chrome. Вот ссылки, которые помогут вам в этом нелегком деле:

Справка по Chrome Extensions
Справка по Web Store
Справка Translate Api
Учебник JavaScript
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • habrahabr.ru
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции