Коротко про створення розширень для chrome

Мені завжди хотілося розповідати людям про цікаві можливості (технологіях), які зараз можуть бути доступні кожному, але чомусь не доступні кожному. Так, вийшло тавтологія, але вона в повній мірі відображає моє внутрішнє обурення на цю животрепетну для мене тему. Як би там не було, мова зараз буде не про те, як то кажуть. А поговоримо ми сьогодні про створення розширень для браузера Google Chrome (далі Хром).

Якщо ви коли-небудь розглядали ідею створення розширення для Chrome, Firefox, Maxthon і інших браузерів, то, напевно, вже встигли помітити, що мінімум зусиль потрібно докласти якраз таки для Хрому. Переконатися в цьому можна, поглянувши на документацію у відповідних браузерів.

Постановка задачі

Написання розширення починається з його опису і постановки завдань, яке воно буде вирішувати. Так як я сам собі господар і дедлайни зривати мені можна стільки раз, скільки хочеться, то ТЗ мені писати не потрібно - досить усвідомити, що:

З першого погляду все просто і нам під силу. Однак, в рамках статті ми реалізуємо лише перші два пункти.

каркас розширення

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

Насамперед потрібно заповнити три обов'язкових поля:

Якщо з назвою все зрозуміло, а з версією маніфесту все ще простіше, то детальніше необхідно зупинитися з версією розширення.

Отже, всі ми звикли, що версія чогось складається з трьох чисел, розділених точками - Мажорное.Мінорное.Патч (Мається на увазі число). З npm, bower та іншими принадами розмова коротка: або так, або ніяк. А ось Google пропонує наступні варіанти:

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

Просто так від Хрома нічого не отримати - потрібні дозволи. Що ж, іншим їх:

Перераховувати всі дозволи, які можна отримати сенсу я не бачу, тому переходимо за цим посиланням і дивуємося, як добре оформлена документація.

Крім іншого, потрібно вказати, що наш додаток хоче мати іконку праворуч вгорі:

Якщо додаток має сторінку налаштувань, то її теж слід вказати:

І, наостанок, скажу, що можна вказати фонову сторінку:

Фонова сторінка - це невидима сторінка, яка потрібна для того, щоб об'єднувати всі вкладки. Посилання на ресурси можна вказувати як у файлі маніфесту, так і на самій сторінці background.html.

Розширенню часто потрібен загальний для всіх вкладок скрипт, який забезпечує їх взаємодію, зберігає стан. Зрештою, об'єднує в одному місці весь використовуваний код, замість того щоб завантажувати його для кожної вкладки індивідуально.

Фонова сторінка - це невидима сторінка, яка як раз і містить такий скрипт. Їх буває два типи: persistent (постійні) і event (керовані подіями). Persistent, як можна здогадатися, завантажена постійно, а event-сторінка завантажується тільки при необхідності, коли виникає пов'язане з нею подія.

Обов'язково прочитайте статті Олександра в його блозі.

У нашому випадку, файл маніфесту буде виглядати наступним чином:

З того, що раніше нерозглядалася

• __MSG_key__ - це варіація Chrome на тему інтернаціоналізації додатків (i18n). Можна застосовувати як в файлі маніфесту, так і в інших файлах (навіть CSS).
• web_accessible_resources - масив шляхів ресурсів, які будуть згодом використовуватися в контексті веб-сторінок. Без вказівки в ньому шляху - нічого не вийде використовувати на сторінках сайтів, якщо така поведінка передбачається.

ресурси розширення

Величезний плюс в карму Chrome - ми вже зараз можемо підключити розширення, звичайно, якщо створені всі ресурси, зазначені в manifest.json.

У файлі commentblocker_on.css. як не важко здогадатися, все навпаки. Зверніть увагу, що прямо в CSS я використовую рядок з мовному ключем content: "__MSG_mode_enable__". Саме час створити такий файл, де ці ключі будуть зберігатися.

У корені нашого розширення створюємо директорію _locales і вкладені в неї директорії en і ru. Далі в файлі messages.json описуємо наші ключі.

Крім поля message є й інші поля, про які можна дізнатися з документації.

Тепер створюємо файли background.html. для початку так:

Тут все так, як в звичайному HTML - нічого незвичайного. До речі, файл background.html можна не створювати, так як він генерується автоматично, на основі полів в manifest.json.

запускаємо розширення

• Налагодження та управління Google Chrome (Гамбургер)
• додаткові інструменти
• розширення
• Поставити галочку навпроти «режим розробника»
• Завантажити розпаковане розширення
• Вибрати папку з розширенням

Розширення загрузилось і здалося в меню. Так, так, це ось це ось «В».

Ось так, не написавши жодного рядка коду, у нас вже вийшло розширення, яке виконує основну покладену на нього завдання.

пожвавлюємо розширення

Пам'ятайте, що я говорив про background.html. Так, так, про те, що його можна не створювати. Давайте злегка змінимо manifest.json:

Просто так запхати JS на сторінку не можна. І така ж проблема є не тільки зі скриптами. Тому нам потрібно скористатися спеціальною ін'єкцією executeScript.

Спочатку потрібно додати обробник події кліка на іконку розширення:

Думаю, що слів про те, що цей шматок коду перевіряє наявність підключення нашого CSS на сторінці і робить висновки про необхідність його підключення або відключення, буде достатньо.

Між іншим, є не так багато подій. які покривають різний спектр потреб. Наприклад, є такі події:

Варто зауважити, що подія onUpdated викликається двічі:

• Оновлення сторінки;
• Повне завантаження сторінки;

На StackOverflow радять перевіряти статус сторінки:

Як не можна до речі, варто згадати мою повну версію розширення VK Comment Blocker, яка доступна в Chrome Web Store. Крім цього, так само доступний повний вихідний код на GitHub.

Як можна помітити, розробляти розширення для Chrome дуже просто. Можна мати досить мізерними знаннями в цій області, але в той же час зробити щось своє. Зрозуміло, що це лише піщинка в океані того, що можна зробити зараз в браузері і, можливо, зробите ви, якщо почнете копати глибше, ніж розказано в цій статті.

А як же без додаткового матеріалу? Думали, що я ось так просто вас відпущу?

Відповідь дуже проста:

Мої статті не повинні давати тобі повні знання від і до, інакше який сенс в тому, що ти прочитав? Ти не захочеш дізнатися більше, якщо я дам тобі відповіді на всі твої питання в цій статті. А якщо я тебе обману або дам погана порада, який ти приймеш як належне? Жартую.

Ділимося на оплату хостингу або кави.
Чим частіше п'ю каву, тим частіше пишу статті.