|
Пишем приложения и расширения для Chrome
|
|
06.02.2013, 21:34
|
|
#1
|
Регистрация: 04.01.2012
Сообщений: 600
|
Пишем приложения и расширения для Chrome
|
На недавней конференции Searchlove, Мэт Клэйтон из Mixcloud дал мне очень полезный совет. Он отметил, что раз его компания конкурирует со Spotify и другими фирмами, у которых есть десктопные приложения, им нужно прилагать дополнительные усилия, чтобы оставаться на виду у пользователей. Одним из способов решения этой проблемы для них стали приложения браузера Chrome (вы можете скачать приложение Mixcloud здесь):
Поместив свой бренд на каждую новую вкладку Chrome, они напоминают пользователям о себе каждый раз, когда те открывают новую страницу. Они рекламируют приложение на своем сайте каждый раз, когда вы просматриваете его через Chrome. Мэт рассказал, что это дало большой положительный эффект.
Круто, подумал я. Очень умно и, наверное, сложно.
Не совсем.
Мэт вскользь упомянул, что всё приложение состоит из «примерно 11 строчек кода».
«Такое я сделать могу», подумал я
Этими словами Мэту выиграл приз за первый совет с конференции Searchlove, который я воплотил в жизнь, когда вернулся в офис. Я написал приложение DistilledU, чтобы мой бренд оказался рядом с Mixcloud:
[Примечание: вы можете заметить, что логотип на картинке выглядит немного не так, как на нашем сайте. Считайте это первым взглядом на ребрендинг, который мы сейчас проводим. Пишите свои мнения!]
В чём смысл? Разве это не обычная закладка?
По сути, да. Но эта закладка даст вашему бренду преимущество в глазах новых пользователей. У большинства людей в Chrome установлено не так много приложений. Если вы предлагаете продукт, которым люди часто пользуются, то владельцы Chrome чаще всего положительно реагируют на предложение установить приложение и получить быстрый доступ к %название бренда%.
Посмотрите на обзоры приложения Mixcloud. Заметьте, что все они скорее являются обзорами на сам сервис Mixcloud, а не «закладку» в Chrome.
Ниже я ещё вернусь к теме приложений и расширений, а пока давайте учиться.
Как повторить это для вашего бренда
Я люблю учиться, поэтому я не стал просить у Мэта его код. Сейчас я покажу, как вы можете написать такое же приложение для своего бренда за 10 минут, в независимости от имеющихся навыков. Вам понадобиться 5$ на кредитной карте, аккаунт Google, логотип, чашка кофе и таймер. Готовы? Поехали!
В качестве примера я буду делать приложение для SEOmoz
Вот как Рэнд мог бы написать приложение SEOmoz PRO для Сhrome:
Шаг 1:
Возьмите мой базовый код с github.
Шаг 2:
Разархивируйте его.
Шаг 3:
Поместите логотип SEOmoz в распакованную папку (distilled-small.png можно удалить) и запомните его название:
(Вам понадобиться квадратный логотип размера 128x128).
Шаг 4:
Откройте файл manifest.json текстовым редактором и измените текст только в тех местах, которые выделены угловыми скобками, например, <Название вашего приложения будет здесь>. Итак, файл превратиться из такого:
в такой:
[Профессионалный совет: вы можете использовать Google Analytics, чтобы отслеживать количество людей, пользующихся приложением. Для этого добавьте к ссылке ?utm_medium=chrome&utm_source=app]
Шаг 5:
Проведите быстрое тестирование:
• Откройте панель расширений
• Включит режим разработчика, поставив флажок вверху страницы:
• Нажмите на кнопку «Загрузить несжатое расширение»
• Выберите папку с вашим распакованным кодом
Если все прошло по плану, вы должны увидеть что-то вроде этого:
А когда вы откроете новую вкладку, ваше приложение уже будет там отображаться:
Шаг 6:
Заархивируйте папку:
Шаг 7:
Опубликуйте приложение!
• Зайдите в Панель инструментов разработчика (для этого нужен аккаунт Google)
• Загрузите туда ваш архив
• Заполните требуемые поля
• [Опционально: если хотите опубликовать приложение вне домена Google Аpps, придется заплатить 5$]
• Нажмите «Опубликовать»:
Я не могу опубликовать приложение SEOmoz, поскольку их домен не привязан к моему аккаунту (отправлю архив Рэнду и сэкономлю ему 10 минут работы). Вот моё приложение DistilledU, если захотите на него посмотреть.
Было слишком легко?
Если вас интересуют более сложные приложения и расширения, обратитесь к документации, на составление которой Google потратил немало сил:
• Ресурсы разработчиков Chrome
• Руководсто по Chrome Web Store
• Руководство по запакованным приложениям (приложение, которое мы только что написали, является веб-приложением и получает доступ к некоторым дополнительным API Chrome для функционирования. Существую так же запакованные приложения, которые устанавливаются непосредственно на компьютеры пользователей)
• Руководство по расширениям
Пожалуй, я закончу статью небольшой историей о том, чем я занялся после приложения DistilledU. Предупреждаю, я не разработчик, но буду показывать вам свой код. Не доверяйте мне и используйте этот код только в качестве отправного пункта для собственных наработок.
Пишем уведомления для сайта
После написания приложения, я задумался о всплывающих уведомлениях в браузере. Подумав ещё чуть-чуть, я решил пойти дальше и написать расширение, которое будет уведомлять пользователей об обновлениях сайта (вы можете скачать его с Chrome Store):
Здесь чуть больше строк кода, чем в предыдущем приложении, и всё немного сложнее. Вам понадобится знание HTML / JS для того, чтобы меня понимать. Я не собираюсь вдаваться в подробности:
Давайте напишем расширение для браузера
Расширения для Chrome бывают двух типов
• Расширения страниц, которые применяются к отдельной страниц и видны в панели навигации
• Расширения браузера, которые находятся рядом с панелью навигации (расширение SEOmoz из их числа)
Я хочу, чтобы мои уведомления отображались постоянно. поэтому мы пишем расширение браузера. Все это приводит нас к файлу manifest.json, который выглядит так:
Всплывающее окно написано на чистом HTML и JavaScript
Ограничения безопасности при разработке расширения ведут к некоторым весьма странным вещам, но начинается всё с простого HTML и JS.
Начнем с background.js - процесса, который постоянно работает в фоновом режиме, получая обновления, чтобы мы могли (А) предупреждать пользователя о появлении новых уведомлений и (Б) нам не пришлось ждать, пока информация загрузится, когда мы кликнем на иконку. Содержимое background.js выглядит так (нажмите, чтобы развернуть на весь экран):
Когда вы нажимаете на иконку, появляется popup.html в виде небольшого всплывающего окна. Содержимое popup.html выглядит так:
Самые внимательные из вас уже заметили, что там нет никакого контента. Дело в том, что он добавляется с помощью jQuery в popup.js (нажмите, чтобы развернуть на весь экран):
Я обнаружил, что разработка всплывающих уведомлений требует гораздо больше отладки, чем написание простого приложения. Вот два совета тем, кто собирается повторить это дома:
1. Вы можете получить доступ к консоли фоновой страницы через страницу расширений:
2. Можно отлаживать всплывающее окно через пункт «Исследовать элемент»:
Это позволяет вам получить доступ ко всем обычным инструментам отладки вроде консоли JavaScript и даёт возможность принудительно обновлять .js файлы (оказалось, что агрессивное кэширование может стать проблемой).
Надеюсь, вы почерпнули из моей статьи что-то полезное. По крайней мере, теперь вы можете самостоятельно написать приложение-закладку для своего сайта. Я бы с удовольствием послушал мнение людей, которые зашли в разработке приложений и расширений немного дальше. И, конечно, не забудьте испробовать результаты моей работы:
• Уведомления Distilled и
• Веб-приложение DistilledU (вам понадобится бесплатный аккаунт DistilledU)
Источник
|
|
|
06.02.2013, 22:55
|
|
#2
|
Регистрация: 27.12.2011
Сообщений: 1,059
|
Полезная штука. Плюсую.
|
|
|
Здесь присутствуют: 1 (пользователей: 0, гостей: 1)
|
|
|