Пишемо програми та розширення для chrome

На недавній конференції Searchlove, Мет Клейтон з Mixcloud дав мені дуже корисну пораду. Він зазначив, що раз його компанія конкурує зі Spotify і іншими фірмами, у яких є десктопні програми, їм потрібно докладати додаткових зусиль, щоб залишатися на очах у користувачів. Одним із способів вирішення цієї проблеми для них стали додатки браузера Chrome (ви можете завантажити додаток Mixcloud тут):

Круто, подумав я. Дуже розумно і, напевно, складно.

Мет побіжно згадав, що все додаток складається з «приблизно 11 рядків коду».

«Таке я зробити можу», подумав я

Цими словами Мету виграв приз за перший рада з конференції Searchlove, який я втілив в життя, коли повернувся в офіс. Я написав додаток DistilledU. щоб мій бренд опинився поруч з Mixcloud:

[Примітка: ви можете помітити, що логотип на зображенні виглядає трохи не так, як на нашому сайті. Вважайте це першим поглядом на ребрендинг, який ми зараз проводимо. Пишіть свої думки!]

В чому сенс? Хіба це не звичайна закладка?

По суті, так. Але ця закладка дасть вашому бренду перевага в очах нових користувачів. У більшості людей в Chrome встановлено не так багато додатків. Якщо ви пропонуєте продукт, яким люди часто користуються, то власники Chrome найчастіше позитивно реагують на пропозицію встановити додаток і отримати швидкий доступ до% назву бренду%.

Подивіться на огляди додатки Mixcloud. Зауважте, що всі вони швидше є оглядами на сам сервіс Mixcloud, а не «закладку» в Chrome.

Нижче я ще повернуся до теми додатків і розширень, а поки давайте вчитися.

Як повторити це для вашого бренду

Як приклад я буду робити додаток для SEOmoz

Ось як Ренд міг би написати додаток SEOmoz PRO для Сhrome:

Помістіть логотип SEOmoz в розпаковану папку (distilled-small.png можна видалити) і запам'ятайте його назву:

(Вам знадобитися квадратний логотип розміру 128x128).

[Профессіоналний рада. ви можете використовувати Google Analytics, щоб відстежувати кількість людей, що користуються додатком. Для цього додайте до заслання? Utm_medium = chromeutm_source = app]

Проведіть швидке тестування:

• Зніміть кришку розширень
• Включить режим розробника, поставивши прапорець у верхній частині сторінки:

• Натисніть на кнопку «Завантажити нестиснене розширення»
• Виберіть папку з вашим розпакованим кодом

Якщо все пройшло за планом, ви повинні побачити щось на зразок цього:

А коли ви відкриєте нову вкладку, ваше додаток вже буде там відображатися:

Було дуже легко?

Якщо вас цікавлять більш складні програми та розширення, зверніться до документації, на складання якої Google витратив чимало сил:

• Ресурси розробників Chrome
• руководста по Chrome Web Store
• Керівництво по запакованим додатків (додаток, яке ми тільки що написали, є веб-додатком і отримує доступ до деяких додаткових API Chrome для функціонування. Існують так само запаковані додатки, які встановлюються безпосередньо на комп'ютери користувачів)
• Керівництво по розширень

Мабуть, я закінчу статтю невеликою історією про те, чим я зайнявся після додатки DistilledU. Попереджаю, я не розробник, але буду показувати вам свій код. Не довіряйте мені і використовуйте цей код тільки в якості відправного пункту для власних напрацювань.

Після написання програми, я задумався про спливаючих повідомленнях в браузері. Подумавши ще трохи, я вирішив піти далі і написати розширення, яке буде повідомляти користувачів про оновлення сайту (ви можете завантажити його з Chrome Store):

Тут трохи більше рядків коду, ніж в попередньому додатку, і все трохи складніше. Вам знадобиться знання HTML / JS для того, щоб мене розуміти. Я не збираюся вдаватися в подробиці:

Давайте напишемо розширення для браузера

Розширення для Chrome бувають двох типів

• Розширення сторінок. які застосовуються до окремої сторінок і видно в панелі навігації
• Розширення браузера, які знаходяться поруч з панеллю навігації (розширення SEOmoz з їх числа)

Я хочу, щоб мої повідомлення відображалися постійно. тому ми пишемо розширення браузера. Все це приводить нас до файлу manifest.json, який виглядає так:

Обмеження безпеки при розробці розширення ведуть до деяких вельми дивним речам, але починається все з простого HTML і JS.

Почнемо з background.js - процесу, який постійно працює в фоновому режимі, отримуючи оновлення, щоб ми могли (А) попереджати користувача про появу нових повідомлень і (Б) нам не довелося чекати, поки інформація завантажиться, коли ми кликнемо на іконку. Вміст background.js виглядає так (натисніть, щоб розгорнути на весь екран):

Коли ви натискаєте на іконку, з'являється popup.html у вигляді невеликого спливаючого вікна. Вміст popup.html виглядає так:

Найбільш уважні з вас вже помітили, що там немає ніякого контенту. Справа в тому, що він додається за допомогою jQuery в popup.js (натисніть, щоб розгорнути на весь екран):

Я виявив, що розробка спливаючих повідомлень вимагає набагато більше налагодження, ніж написання простого додатка. Ось дві поради тим, хто збирається повторити це вдома:

1. Ви можете отримати доступ до консолі фонової сторінки через сторінку розширень:

2. Можна налагоджувати спливаюче вікно через пункт «Дослідити елемент»:

Сподіваюся, ви почерпнули з моєї статті щось корисне. По крайней мере, тепер ви можете самостійно написати додаток-закладку для свого сайту. Я б із задоволенням послухав думку людей, які зайшли в розробці додатків і розширень трохи далі. І, звичайно, не забудьте спробувати результати моєї роботи: