Начало работы, структура
Чтобы начать разработку расширения для Chrome на JavaScript, нужно пройти несколько шагов:
✅ 1. Настроить структуру проекта
Создайте папку для вашего расширения, например, my-chrome-extension/. Внутри создайте следующие файлы:
/my-chrome-extension
|-- manifest.json
|-- background.js (если нужно фоновое выполнение)
|-- content.js (если нужно взаимодействие с веб-страницами)
|-- popup.html (если нужно всплывающее окно)
|-- styles.css (если нужно оформление)
|-- icon.png (иконка расширения)
О структуре
Эту структуру не диктует Chrome напрямую, но она является рекомендуемым подходом для удобства разработки и организации файлов.
📌 Почему так организуют структуру проекта?
- manifest.json — Обязателен. Chrome требует его для идентификации расширения и определения того, как оно работает.
- background.js — Необязателен, но нужен, если требуется фоновый скрипт для отслеживания событий (например, установки расширения, изменения вкладок и т. д.).
- content.js — Необязателен, но нужен, если требуется взаимодействие с содержимым веб-страниц (например, изменение DOM, сбор данных).
- popup.html / styles.css / popup.js — Необязательны, но нужны, если ты хочешь добавить всплывающее окно (popup), открывающееся при нажатии на иконку расширения.
- icon.png — Рекомендуется, чтобы у расширения была иконка.
📌 Что Chrome диктует?
Только файл manifest.json обязателен. Всё остальное добавляется в зависимости от того, какие функции ты хочешь реализовать.
✅ 2. Создать файл манифеста (manifest.json)
Это основной файл, который описывает ваше расширение. Пример:
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "1.0",
"description": "Это моё первое Chrome расширение!",
"permissions": ["activeTab", "scripting", "storage"],
"host_permissions": ["<all_urls>"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
✅ 3. Добавить логику
background.js(если нужен фоновый скрипт):
chrome.runtime.onInstalled.addListener(() => {
console.log("Расширение установлено.");
});
content.js(если нужно взаимодействие с веб-страницами):
console.log("Контентный скрипт подключен.");
popup.html(если нужно всплывающее окно):
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button id="clickMe">Нажми меня</button>
<script src="popup.js"></script>
</body>
</html>
popup.js(обработчик для всплывающего окна):
document.getElementById("clickMe").addEventListener("click", () => {
alert("Кнопка нажата!");
});
✅ 4. Установить расширение в Chrome для тестирования
- Откройте
chrome://extensions/в браузере. - Включите режим разработчика (справа вверху).
- Нажмите кнопку
Загрузить распакованноеи выберите папку с вашим расширением.
✅ 5. Тестирование и отладка
- Проверяйте логи в консоли (
chrome://extensions/→Service Workerили DevTools дляcontent.js). - Обновляйте код и нажимайте кнопку
Обновитьна странице расширений.
✅ 6. Публикация (если нужно)
Когда расширение готово, можно публиковать его в Chrome Web Store.