Главная

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

2013-02-26 в 11:04, admin, рубрики: chrome, Extensions, Google, Google Chrome, javascript, Яндекс API, метки: chrome, Extensions, Google, Web-store

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

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

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

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

{
    "manifest_version": 2,

    "name": "Простой перевод",
    "version": "1.0",

    "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"
    }
}

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

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

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

Наш документ будет очень прост. Одна область для ввода текста, кнопка отправки и блок для вывода текста. К сожалению, изучение 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>

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

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

Теперь перейдем к тому, без чего наше расширение не имело бы смысла — перейдем к JavaScript! Я буду использовать библиотеку jQuery, несмотря на то, что в этом проекте можно было обойтись и без неё. Скачайте jquery.js с сайта jquery.com и положите его в директорию нашего проекта (не забудьте переименовать его в jquery.js!).
Итак, собственно сам код файла popup.js — сердца нашего расширения.

$(document).ready(function(){
    $('#btn_submit').click(function(e){
        e.preventDefault();

        var input = $('#input').val();

        var url = "http://translate.yandex.net/api/v1/tr.json/translate";

        var parent = /[а-яёЁ]/i;

        var language = (parent.test(input))? 'ru-en':'en-ru';

        $.getJSON(url, {lang: language, text: input}, function(res){
            $('#result').text("");
            for (var i in res.text) {
                $('#result').text($('#result').text() + res.text[i] + " ");
            }
        });
    });
});

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

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

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

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

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

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