Розробка розширення для Chrome: детальний огляд

Що таке розширення Chrome?

Розширення Chrome – це невеликі веб-додатки, які додають новий функціонал або змінюють поведінку браузера. Вони використовують HTML, CSS, JavaScript, JSON та API браузера.

1. Основна структура розширення

Стандартне розширення складається з таких файлів:

📌 manifest.json – конфігураційний файл, де вказуються мета-дані розширення.
📌 background.js – фонова логіка (необов’язково).
📌 content.js – скрипти, що взаємодіють із сторінками.
📌 popup.html – інтерфейс спливаючого вікна (необов’язково).
📌 icons/ – іконки для відображення в браузері.

2. Створення `manifest.json`

Файл manifest.json – це серце розширення, що визначає його поведінку.

{
  "manifest_version": 3,
  "name": "Моє розширення",
  "version": "1.0",
  "description": "Демо-розширення для Chrome",
  "permissions": ["storage", "activeTab"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content.js"]
    }
  ]
}

Основні параметри

🔹 manifest_version – версія манифеста (має бути 3 для сучасних розширень).
🔹 name, version, description – назва, версія та опис.
🔹 permissions – дозволи для роботи (наприклад, доступ до вкладок, сховища тощо).
🔹 action – спливаюче вікно та іконки.
🔹 background – фоновий скрипт для фонової логіки.
🔹 content_scripts – скрипти, що працюють зі сторінками.

3. Додавання спливаючого вікна

Створюємо файл popup.html:

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Popup</title>
    <script src="popup.js" defer></script>
</head>
<body>
    <h2>Привіт, Chrome!</h2>
    <button id="click-me">Натисни мене</button>
</body>
</html>

Файл popup.js:

document.getElementById("click-me").addEventListener("click", () => {
    alert("Вітаю! Це ваше розширення Chrome.");
});

4. Додавання фонового скрипта

Файл background.js:

chrome.runtime.onInstalled.addListener(() => {
    console.log("Розширення встановлено!");
});

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

5. Додавання скрипта вмісту

Файл content.js вставляє код на відкриті сторінки.

document.body.style.backgroundColor = "lightblue";
console.log("Контент-скрипт запущено!");

Цей код змінює колір фону сторінки, до якої він підключений.

6. Завантаження розширення в Chrome

Кроки для тестування

Відкрий Chrome і введи chrome://extensions/.
Увімкни “Режим розробника” (Developer Mode).
Натисни “Завантажити розпаковане” (Load unpacked).
Вибери папку з розширенням.
Розширення з’явиться у браузері!

7. Додавання іконок

У папці icons/ збережи іконки різних розмірів:
📌 icon16.png – для меню розширень.
📌 icon48.png – для сторінки налаштувань.
📌 icon128.png – для Chrome Web Store.

Приклад коду в manifest.json:

"icons": {
  "16": "icons/icon16.png",
  "48": "icons/icon48.png",
  "128": "icons/icon128.png"
}

8. Публікація в Chrome Web Store

Якщо хочеш опублікувати розширення:

Зареєструйся в Google Developer Console (разова плата $5).
Створи архів (.zip) розширення.
Завантаж розширення на Chrome Web Store Developer Dashboard.
Додай опис, скріншоти та політики конфіденційності.
Очікуй перевірку (зазвичай 1–7 днів).

Висновок

Розширення Chrome – це зручний спосіб розширення функціоналу браузера, який може взаємодіяти з веб-сайтами, автоматизувати завдання і навіть створювати власні UI.

🛠 Головне, що потрібно знати для створення розширення:

manifest.json – основний конфігураційний файл.
popup.html + popup.js – інтерфейс спливаючого вікна.
background.js – фонова логіка.
content.js – взаємодія зі сторінками.
chrome://extensions/ – тестування в Chrome.

Тепер ти знаєш, як створити своє перше розширення! 🚀