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



Леди и джентльмены! Сегодня мы попробуем написать и опубликовать расширение для 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
Поделиться публикацией

Похожие публикации

Комментарии 58
    +13
    Прошу сильно тапками кидаться, чтобы я мог использовать ваши советы при написании новых статей. Спасибо вам за инвайт.
      +2
      Да статья отличная, + указал все справки и учебник. Однозначно плюсую!)
        +9
        Премного благодарен, давно мечтал попасть на Хабр, а тут еще и мою статью похвалили. Спасибо еще раз.
          0
          Скриншоты было бы неплохо обрезать до «нужных» кусков. Мне, например, не интересно какая у вас виндовс, какие программы на панели задач висят и какие вкладки открыты в браузере.
      0
      Я опубликовал свое приложение в Web Store и оно доступно по прямой ссылке. Но расширение не появляется в каталоге и не выводится в результатх поиска по ключевым словам. Кто нибудь сталкивался с подобной проблемой? И если да то как вы ее решили. Спасибо
        0
        У меня такая же проблема. Написал на форуме, где, как я понял, водятся сотрудники Google и жду ответа.
        0
        В результатах поиска вверху есть переключатель между приложениями, расширениями и темами. Возможно оно появляется не в той категории, что показывается по умолчанию?
        0
        Скорее всего, надо подождать обновление кеша. Я когда свое выкладывал — тоже не сразу появилось.
          0
          сколько этого ждать? расширение опубликовано 11/8/12 (прошло больше 3 месяцев)
            0
            Оу… Я думал речь о часах.
            Похоже, единственный выход — писать на форум. Там очень много подобных обращений.
        +6
        ИМХО — статья ни о чем. Уже много раз писались статьи по расширениям для Хрома начинающим. И про 5$ упоминалось. И ссылки на документацию постоянно те же.

        Вопрос к читающим статью: а нужны ли статьи на данную тему? Есть много размышлений и некоторое количество опыта которым думал поделится, но боюсь что в итоге все скатится к подобной статье для «начинающих».

        nikitauskas при публикации расширения выберите все страны или по крайней мере вашу страну — иначе результаты поиска расширения будут отфильтровывать ваш Extension. Кроме того расширение в поиске не сразу появляется (так было у меня).

        <на правах рекламы>
        Dictionary extension
        расширение для перевода и запоминания слов. Для тех у кого браузер не выключается практически весь день.
        Правда текущая реализация — little bit annoying, и в данный момент переписывается.
        </на правах рекламы>
          0
          выбраны все регионы, расширение опубликовано 11/8/12 (прошло больше 3 месяцев), у расширения 250 установок по прямым переходам.
            +1
            Ну хорошо, спасибо, что кинули тапком. Да, я видел статьи на эту же тему. Но посмотрите на вашу первую статью. Она тоже была не уникальна!
              0
              я бы поспорил на этот счет — на тот момент не было или я не нашел, другой вопрос что написана она была слишком сумбурно. За тапок извините.
                0
                Нет, я не хотел вас обидеть и, тем более, не обиделся на тапок. Я ведь сам попросил. Просто попробовал показать сходство наших статей. Давайте жить дружно! Хотя, приятно, что первая же статья обросла таким количеством комментариев.
                  0
                  А вот ещё пояснил бы кто из вас от чего отваливаются повешенные при старте браузера события, было бы вообще здорово.
              0
              > Вопрос к читающим статью: а нужны ли статьи на данную тему?

              Думаю, нужны. Кому-то возможно интересно было бы почитать про особенности кросс-доменных запросов в расширениях, например. Проблемы и решения (ещё бы сравнений с аддонами для FF в данном вопросе). Организация структуры больших расширений. И прочие несколько отдалённые от «Hello World!» и ненаходимые (или относительно труднонаходимые) в официальной документации темы.

              Все эти «создаём своё первое расширение» и правда ведь есть и в документации и 10и гайдах на хабре.
              0
              Подключать jQuery только для того чтобы отловить клик и распарсить Json?
                +1
                Да, это не рационально. Я написал об этом в статье. Видимо, Луна была в доме Венеры и мне пришлось подключить jQuery. Каюсь, не велите казнить. Больше этого не повторится.
                  +2
                  Вы подключаете JQuery при Луне в доме Венеры? Вы же так навлекёте так на себя страшное проклятье и не сможете больше писать на JavaScript, только на JQuery!
                    0
                    О, господи! Вряд ли у меня получится писать на jQuery без JS. Изыди, нечистая сила! =)
                +4
                Что, опять?
                • НЛО прилетело и опубликовало эту надпись здесь
                    +1
                    Без нумерации строк в коде бессмысленно указывать номер строки в пояснении ниже. Из-за этого неудобно читается: приходится каждый раз определять нужную строчку.
                      0
                      Да, извиняюсь. Честно говоря, даже не заметил этого. Просто в IDE нумерация автоматическая. Сейчас пойду пронумерую…
                        0
                        Вот, исправился. Спасибо за подсказку, сам бы не заметил.
                      +1
                      на хабре уже есть статьи как создать своё расширение для хрома и не такие примитивные. в общем польза от этой сомнительная…
                        +1
                        Очень понравился язык написания, читается легко и непринужденно, а это большой плюс.
                        Что касается информации, то тут конечно немного сжато, но для начинающих (собственно для меня) самое то. Теперь есть понятие куда копать и с чего начать, ну и собственно как это вообще делается :D
                        Спасибо, мне понравилось.
                          0
                          Очень рад, что принес кому-то пользу. Старался написать как раз для новичков (коим и сам являюсь, лишь изучил справку и написал несколько расширений). Спасибо за спасибо =)
                          0
                          Забыли сказать что файл манифеста должен называться «manifest.json»
                            0
                            Спасибо, исправлено. Такая досадная ошибка!
                            0
                            Подскажите, а есть какие-то способы монетизации подобных расширений? Такое практикуется вообще? Спасибо.
                            0
                            А мне понравилось, давно хотел написать расширение, но думал, что все намного сложнее, и поэтому даже не начинал копать, спасибо!
                              0
                              Рад, что вам понравилось.
                              0
                              Еще можно упомянуть про двухнедельный процесс валидации и подписывание бумажного соглашения в некоторых случаях.
                                0
                                Да, про вечно-висящий pending review я умолчал, чтобы не отпугивать начинающих. Сам жду.
                                0
                                Да, кому интересно, следующая статья будет про оповещения рабочего стола и страницу опций. Не уверен, насколько скоро она будет, поскольку учеба не позволяет посвятить написанию статей много времени. Постараюсь за недельку управиться. Она будет основана на официальной справке, но со своими примерами расширений. Спасибо тем, кто читал эту статью. Не ожидал таких результатов, хотя и не знаю местной нормы.
                                  0
                                  Неплохо было бы изначально с этой статьей приходить, а не с очередным гайдом, коих полно уже.
                                    0
                                    Буду исправляться
                                  +3
                                  Интересно кому про работу с вконтакте api из расширения?
                                    0
                                    Да, было бы очень интересно. С меня плюс будет в первую очередь.
                                      0
                                      +1
                                      >Я буду использовать библиотеку jQuery, несмотря на то, что в этом проекте можно было обойтись и без неё.

                                      С этого, похоже, уже начинается любая веб разработка.
                                        +1
                                        Для обучающей статьи — почему бы и нет.
                                        Если бы автор не подключал jquery, в каментах возникли бы вопросы «а можно ли подключать jquery?»
                                        0
                                        Эпично.
                                          0
                                          А разве не надо в манифесте прописать permissions для запросов к яндексу?
                                            +1
                                            Сейчас подумал… А ведь надо! Правда работает и без этого. Очень странно. Видимо баг.
                                              0
                                              Может быть тестируешь, находясь на странице яндекса?
                                                +1
                                                Нет, только что проверил. Все работает с этой страницы.
                                                  0
                                                  А если поменять урл на какой-нибудь, не связанный с переводами? Может в хроме есть заранее заданные домены, на которые можно обращаться… Хотя маловероятно, конечно
                                            +1
                                            Нет, так не работает.
                                              0
                                              Тогда, наверное, стоит дописать об этом в статью )
                                                +1
                                                Да, спасибо. Совсем забыл про разрешения. Странно, что работало и без них.

                                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                            Самое читаемое