Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips

Робота з розширеннями Google Chrome

by
Read Time:12 minsLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Ніде правди діти, Google Chrome мій улюблений браузер. Мені подобається його надійність і швидкість, він не падає (дуже часто) і добре виглядає. Є у нього і інші достоїнства. Факт, що розширення для нього можна побудувати тільки на HTML, CSS і JavaScript. Я завжди підтримую продукти, які відкриті для спільноти і Chrome є одним з них. Якщо вам потрібно щось, чого ще немає, ви можете розробити це самостійно.

В кінці цієї статті ви знайдете чинне розширення Chrome, яке використовує більшість методів, описаних нижче. Ви можете завантажити остаточний приклад по кнопці завантаження у верхній частині цієї сторінки.


Навіщо писати своє власне розширення

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


Розробка і тестування ваших розширень

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

Переконайтеся, що ви вибрали Developer mode і натисніть кнопку Load unpacked extension ... І виберіть папку з жорсткого диска, яка містить файли розширень.

extensionspanelextensionspanelextensionspanel

Архітектура

Ось діаграма архітектури розширення Chrome:

architecturearchitecturearchitecture

Тепер давайте розглянемо кожен елемент архітектури.

Декларація (Manifest)

Точкою входу розширення є файл manifest.json. Він повинен містити дійсний об'єкт JSON. Наприклад:

Його властивостями будуть name, version і manifest_version. Version може бути від одного до чотирьох цілих чисел, розділених точками. Вона використовується системою автоматичного оновлення Google. Так він дізнається, коли оновлювати ваше розширення. Значення manifest_version має бути цілим числом 2.

У маніфесті можуть міститися інші властивості, в залежності від того, яке розширення вам потрібно, але я опишу тільки ті, які вважаю більш цікавими.

Background Pages (фонові сторінки)

У кожного розширення є невидима довідкова сторінка, яка запускається браузером. Існує два типи: постійні фонові сторінки та сторінки подій. Перші активні постійно. Другі тільки в разі потреби. Google заохочує розробників використовувати сторінки подій, оскільки це економить пам'ять і покращує загальну продуктивність браузера. Проте, треба знати, що це місце, де ви повинні помістити основний алгоритм і ініціалізацію. Зазвичай background page/script грає роль моста між іншими частинами розширення.

Ось як ви повинні описати це в manifest:

Як ви могли здогадатися, якщо persistent властивість є false, ви використовуєте event pages. В іншому випадку ви працюєте з постійною фонової сторінкою.

Content Script (скрипт контенту)

Якщо потрібен доступ до DOM поточної сторінки, вам потрібно використовувати content script. Код запускається в контексті поточної веб-сторінки, що означає, що він буде виконаний при кожному оновленні. Для додавання скрипта використовуйте наступний синтаксис.

Майте на увазі, що значення matches визначає, для яких сторінок буде використаний ваш скрипт. Детальніше про це matches patterns here.

User Interface (інтерфейс користувача)

Є кілька шляхів побудови UI вашого розширення. Ось чотири найвідоміших.

Browser Action

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

browseractionbrowseractionbrowseraction

Дані файлу manifest повинні містити наступне:

default_title містить підказку, яка відображається, коли користувач вказує на значок. default_popup - це фактично файл HTML, який завантажується всередині спливаючого вікна. Існує також значок, який ви можете розмістити над своєю іконою. Ви можете зробити це всередині background script. Наприклад:

Це код для створення зображення вище.

Page Action

Властивість page_action схоже на browser action, але значок відображається всередині адресного рядка:

pageactionpageactionpageaction

Цікаво, що ваш значок спочатку приховано, тому ви повинні вирішити, коли його показувати. Наприклад, на зображенні значок RSS буде відображатися тільки в тому випадку, якщо поточна сторінка містить посилання на RSS-канал Якщо вам потрібно постійно бачити значок, використовуйте browser_action безпосередньо.

Щоб додати page action, пропишіть наступний код в manifest:

На відміну від browser action, page action значка не має.

DeveloperTools

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

Не потрібно поміщати HTML-код всередині сторінки, крім посилання у файлі JavaScript, який буде створювати вкладку:

Потім додайте наступний код всередині файлу devtools.js:

Тепер цей код додасть нову вкладку з ім'ям TheNameOfYourExtension, і як тільки ви натиснете на неї, браузер завантажить index.html всередині DeveloperTools.

Omnibox

omnibox - це ключове слово, яке відображається всередині адресного рядка Chrome. Наприклад, при додаванні в manifest наступного властивості:

А потім додайте наступний код в свій background script:

Ви повинні мати можливість ввести yeah в адресний рядок. Потім ви побачите наступне:

omniboxomniboxomnibox

Натискання на вкладку призведе до появи екрану:

omnibox2omnibox2omnibox2

Звичайно, використовуючи API chrome.omnibox, ви можете зловити вхід користувача і відреагувати на нього.

APIs

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

Ви повинні знати, що не всі API доступні в кожній частині вашого розширення. Наприклад, ваш content script не отримає доступ до chrome.devtools.panels або скрипт на вкладці DeveloperTools не прочитаєте DOM сторінки. Тому не дивуйтеся, якщо щось не працює.

Messaging (обмін повідомленнями)

Як я вже згадував, у вас не буде доступу до всіх API, які ви хочете використовувати. В такому випадку ви повинні використовувати передачу повідомлень. Існує два типи повідомлень - одноразові запити і довгоживучі сполуки.

One-Time Requests (одноразові запити)

Цей тип зв'язку на один раз. Тобто, ви відправляєте повідомлення і чекаєте відповіді. Наприклад, ви можете помістити наступний код в свій background script:

Потім використовуйте код нижче в вашому content script:

Так ви можете отримати інформацію про DOM поточної сторінки і використовувати її у своєму фоновому скрипті, який зазвичай не має доступу до цих даних.

Long-Lived Connections (довгоживучі сполуки)

Це тип повідомлень, якщо вам потрібен постійний канал зв'язку. Усередині content script пропишіть наступний код:

А в background script використовуйте це:

Override Pages (перевизначити сторінки)

Перевизначення сторінок хороший спосіб настройки браузера. Ви також можете замінити в Chrome деякі сторінки за замовчуванням. Наприклад, створити свою власну сторінку історії. Для цього додайте наступний фрагмент коду:

Можливими значеннями для <page to override> будуть bookmarks, history і newtab. Здорово, якщо у вас є свіжа сторінка new tab.


Приклад розширення

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

Файл manifest

Починаю з файлу manifest:

Обов'язково потрібно впорядкувати файли в папках. Зверніть увагу на властивість version. Ви повинні оновлювати його кожен раз при завантаженні розширення в веб-магазин.

Background Script

Перші кілька рядків відображають активність користувача в omnibox. Після цього я встановлюю одноразовий запит, який буде приймати повідомлення по значку browser action.

Наступний фрагмент являє собою довгострокову зв'язок з вкладкою devtools (для цього не обов'язково використовувати long-lived connection, я зробив це тільки для освітніх цілей). Використовуючи прослушку, я можу отримати введення користувача і відправити на content script, який має доступ до елементів DOM. Ключовим моментом тут був вибір вкладки, якої я хотів керувати, а потім відправити їй повідомлення. Нарешті, я помістив бейдж на значок розширення.

Browser Action

Займемося нашим popup.html файлом:

Потім створимо файл popup.js:

Вікно містить кнопку і як тільки користувач натискає на неї, йде повідомлення в background script.

DeveloperTools

Для DeveloperTools ми робимо майже те ж саме, що і у спливаючому вікні, єдина відмінність в тому, що використовується довгострокове з'єднання.

Content Script

Скрипт вмісту прослуховує повідомлення, вибирає все div на поточній сторінці і змінює колір фону. Зверніть увагу на об'єкт, до якого я прикріплював listener. В content script це chrome.extension.onMessage.

Налаштування сторінки New Tab

Останнє, що робить це розширення, настройка сторінки new tab. Ми можемо зробити це просто, вказавши властивість newtab в файлі newtab/newtab.html:

Майте на увазі, це не буде реплікою new tab за замовчуванням. Ідея цієї функції полягає в додаванні зовсім інший функціональності. Ось, що сказано в Google:

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


Debugging (налагодження)

При написанні розширення для Google Chrome ви, ймовірно, зіткнетеся з деякими проблемами. Добре, що ви можете використовувати консоль для виведення змінних, щоб допомогти в її налагодженні. Додавайте console.log в ваші background або content scripts. Однак це не буде працювати в скриптах, які запускаються в контексті інструментів розробника, використовуйте метод alert, який працює скрізь.


Висновок

На мій погляд, Chrome - один з кращих браузерів. Розробники в Google полегшують нам створення розширень, надаючи можливість робити їх в HTML, CSS і JavaScript.

Так, не без складнощів, але, як правило, ми можемо створювати цінні плагіни. Майте на увазі, що ця стаття не охоплює все, що пов'язано з розробкою розширень Chrome. Існують і інші корисні функції, такі як context menus, options pages і notifications. За більш детальною інформацією звертайтеся в documentation.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.