Пример базового расширения

Давай сделаем простейшее Chrome расширение, которое:

1. 📌 Вставляет кнопку на любую страницу (через content.js).
2. 📌 При нажатии на кнопку отправляет сообщение в background.js.
3. 📌 background.js считает количество нажатий на кнопку и сохраняет их в локальное хранилище (chrome.storage).
4. 📌 Выводит обновлённый счётчик в консоль.

📂 Структура проекта:

/my-chrome-extension
|-- manifest.json
|-- background.js
|-- content.js
|-- icon.png (если хочешь добавить иконку, не обязательно)

📄 manifest.json:

{
  "manifest_version": 3,
  "name": "Click Counter Extension",
  "version": "1.0",
  "description": "Считает количество нажатий на кнопку.",
  "permissions": ["storage", "activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

📄 background.js (Service Worker):

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

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
    if (message.type === "increment") {
        const result = await chrome.storage.local.get(['counter']);
        const count = (result.counter || 0) + 1;

        await chrome.storage.local.set({ counter: count });
        console.log(`Обновлённый счётчик: ${count}`);

        sendResponse({ counter: count });
    }
    return true;  // Сообщает Chrome, что ответ будет асинхронным.
});

📄 content.js (Скрипт для страниц):

(function() {
    // Создаём кнопку
    const button = document.createElement('button');
    button.innerText = "Нажми на меня";
    button.style.position = "fixed";
    button.style.bottom = "20px";
    button.style.right = "20px";
    button.style.zIndex = "1000";
    button.style.padding = "10px";
    button.style.fontSize = "14px";

    document.body.appendChild(button);

    // При нажатии отправляем сообщение в background.js
    button.addEventListener('click', () => {
        chrome.runtime.sendMessage({ type: "increment" }, (response) => {
            alert(`Обновлённый счётчик: ${response.counter}`);
        });
    });
})();

🔍 Что здесь происходит:

1. manifest.json:
   • Указано, что используется background.js как Service Worker.
   • content.js автоматически подключается ко всем URL через content_scripts.
2. background.js (Service Worker):
   • Ждёт сообщений типа "increment".
   • Считывает текущий счётчик (counter) из chrome.storage.local, увеличивает на 1 и сохраняет обратно.
   • Отправляет ответ с обновлённым счётчиком.
3. content.js:
   • Встраивается в каждую открытую страницу.
   • Создаёт кнопку, которая при нажатии отправляет сообщение в background.js.
   • Получает ответ и выводит его пользователю через alert().

💡 Как протестировать:

1. 📁 Скопируй проект в отдельную папку.
2. Открой Chrome и перейди на chrome://extensions/.
3. Включи Developer mode (Режим разработчика).
4. Нажми на кнопку Load unpacked (Загрузить распакованное) и выбери папку с твоим проектом.
5. Открой любой сайт и увидишь кнопку в правом нижнем углу.
6. Нажимай на неё и следи за сообщениями в консоли (background.js логируется в chrome://extensions/ -> Service Workers -> Inspect).

Дальнейшие усложнения на основе данного расширения

Часть 1: Делаем хоткей
Часть 2: Добавляем счётчик (badge) и попап
Часть 3: Делаем уведомления через Chrome и настраиваем внешний вид