Як реалізувати розширення Chrome

Ми всі любимо серфінг в Інтернеті. І всі ми любимо, щоб речі були на дотику кінчиками наших пальців. Чому б не створити щось, що задовольняє ці дві абсолютні істини?

У цій статті я розтлумачу будівельні блоки розширення Chrome. Згодом вам просто доведеться думати про хорошу ідею як про привід її зробити.

Чому саме Chrome?

Chrome - найпопулярніший веб-браузер. Деякі оцінки сягають 59% . Отже, якщо ви хочете охопити якомога більше людей, розробка розширення Chrome - найкращий спосіб зробити це.

⚠️ Щоб мати змогу опублікувати розширення для Chrome, потрібно мати обліковий запис розробника, який передбачає одноразову плату за реєстрацію в розмірі 5 доларів США.

Кожне розширення Chrome має містити такі компоненти: файл маніфесту , popup.html та popup.js та фоновий скрипт. Давайте подивимось на них.

З чого складається розширення Chrome?

Файл маніфесту

Що таке файл маніфесту? Це текстовий файл у форматі JSON (JavaScript Object Notation), який містить певну інформацію про розширення, яке ви розроблятимете.

Google використовує цей файл, щоб отримати детальну інформацію про ваше розширення, коли ви його опублікуєте. Є обов’язкові , рекомендовані та необов’язкові поля.

вимагається

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "default_locale": "en" }
  • manifest_version- Версія формату файлу маніфесту. Станом на Chrome 18 версія 1 застаріла
  • name- Може містити до 45 символів. Використовується для відображення імені вашого розширення в таких місцях: діалогове вікно встановлення, інтерфейс управління розширеннями, веб-магазин Chrome
  • version- Версія вашого розширення Chrome. Може містити до чотирьох цифр, розділених крапками (наприклад, 1.0.0.0)
  • default_locale- Ця папка знаходиться всередині _localsпапки та містить рядкові літерали за замовчуванням. _localsПапка використовується для інтернаціоналізації ( з урахуванням вашого розширення для підтримки декількох мов). Якщо _localsпапка існує, це обов’язкове поле , інакше воно не повинно бути присутнім

Якщо ви хочете підтримувати кілька мов, читайте більше тут.

Рекомендовано

 "description": "A plain text description", "author": "Your Name Here", "short_name": "shortName", "icons": { "128":"icon128.png", "48":"icon48.png", "16":"icon16.png" },
  • description - Ви можете використовувати до 132 символів для опису розширення
  • short_name - Обмежений до 12 символів, він використовується в тих випадках, коли недостатньо місця для відображення повного імені розширення (Запуск програми та сторінка нової вкладки)
  • icons- Піктограми, що представляють розширення. Завжди включайте піктограму 128X128, оскільки вона використовується Веб-магазином Chrome та під час встановлення вашого розширення

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

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

Спливаюче вікно та фон

Спливаюче посилання стосується головної сторінки, яку бачать користувачі при використанні вашого розширення. Він складається з двох файлів: Popup.html та файлу JavaScript, Popup.js .

Popup.html - це файл макета, як виглядатиме ваше розширення. Залежно від того, що буде робити ваше розширення, розмітка цього файлу буде змінюватися.

Фоновий сценарій - це єдиний, який може взаємодіяти з подіями, що відбуваються, і використовувати API Chrome. Щоб використовувати фонові скрипти, вам потрібно додати до вашого файла manifest.json наступне:

{ "manifest_version": 2, "name": "My Chrome Extension", "version": "1.0", "background":{ "scripts": ["yourScript.js"], "persistent": false } }

Ключ scriptsмає значення масиву імен сценаріїв.

persistent- це ключ із логічним значенням, який позначає використання вашого розширення з chrome.webRequest API для блокування або модифікації мережевих запитів. API Chrome.webRequest не працює з непостійними фоновими сторінками.

Як відкриється ваше розширення

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

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

2. Ви можете відкрити невелике вікно на поточній вкладці користувача, щоб користувач залишався на тій самій вкладці

Кожен вибір має свої наслідки, і вам вирішувати, який для вас найкращий варіант.

Нижче наведено код, необхідний для отримання кожного з варіантів. Вони обидва використовуватимуть один і той же файл popup.html, описаний нижче:

  Chrome Extension Example   

Hello From Extension

Поєднавши все це разом

Замінити нову вкладку

//In manifest.json { "name": "ChromeExampleNewTab", "version": "1.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "popup.html" }, "browser_action": {}, "permissions":[ "tabs" ], "background":{ "scripts": ["background.js"], "persistent": false } } //In background.js chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) { // Tab opened. }); });

Відкрити на поточній вкладці

//In manifest.js { "name": "ChromeExample", "version": "1.0", "manifest_version": 2, "browser_action": { "default_popup": "popup.html" } }

Зверніть увагу, як ми перевизначили browser_actionключ в обох прикладах.

Ми повинні це зробити, оскільки ми не хочемо, щоб браузер регулярно відкривав нову вкладку.

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

There is a whole lot more to Chrome extensions (messaging, context menus and storage to name a few). I have hopefully given you some insight into Chrome extensions. Maybe just enough to intrigue you to make one of your own!

And while you are at it, check one I have made here.