4 minute read

Сделаем:

  1. Оповещения через уведомления Chrome.
  2. Настройки для изменения хоткеев и внешнего вида.

📂 Структура проекта (Обновлённая):

/my-chrome-extension
|-- manifest.json
|-- background.js
|-- content.js
|-- popup.html
|-- popup.js
|-- options.html   (Новый файл)
|-- options.js     (Новый файл)
|-- styles.css     (Необязательно, но можно для оформления)
/icons/
|-- icon.png

📄 manifest.json (Обновлённый):

{
  "manifest_version": 3,
  "name": "Click Counter Extension",
  "version": "1.0",
  "description": "Считает количество нажатий на кнопку.",
  "permissions": ["storage", "activeTab", "scripting", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "commands": {
    "trigger_click": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Нажать на кнопку через хоткей"
    }
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "options_page": "options.html"
}

📄 background.js (Обновлённый):

async function updateBadge() {
    const result = await chrome.storage.local.get(['counter']);
    const count = result.counter || 0;
    chrome.action.setBadgeText({ text: count.toString() });
    chrome.action.setBadgeBackgroundColor({ color: "#4CAF50" });
}

async function showNotification(counter) {
    chrome.notifications.create({
        type: 'basic',
        iconUrl: 'icons/icon.png',
        title: 'Click Counter',
        message: `Счётчик увеличен! Текущее значение: ${counter}`
    });
}

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

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

        await chrome.storage.local.set({ counter: count });
        updateBadge();

        if (result.notificationsEnabled !== false) {
            showNotification(count);
        }

        console.log(`Обновлённый счётчик: ${count}`);
        sendResponse({ counter: count });
    }
    return true;
});

📄 options.html (Новый файл):

<!DOCTYPE html>
<html>
<head>
    <title>Настройки</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 10px; }
        label { display: block; margin-bottom: 10px; }
    </style>
</head>
<body>
    <h2>Настройки расширения</h2>
    <label>
        <input type="checkbox" id="notificationsToggle"> Включить уведомления
    </label>
    <button id="saveBtn">Сохранить настройки</button>

    <script src="options.js"></script>
</body>
</html>

📄 options.js (Новый файл):

document.addEventListener('DOMContentLoaded', async () => {
    const notificationsToggle = document.getElementById('notificationsToggle');
    const saveBtn = document.getElementById('saveBtn');

    // Загрузка текущих настроек
    const result = await chrome.storage.local.get(['notificationsEnabled']);
    notificationsToggle.checked = result.notificationsEnabled !== false;  // По умолчанию - true

    // Сохранение настроек
    saveBtn.addEventListener('click', async () => {
        const isEnabled = notificationsToggle.checked;
        await chrome.storage.local.set({ notificationsEnabled: isEnabled });
        alert('Настройки сохранены!');
    });
});

🔍 Что добавлено:

  1. Уведомления через Chrome API:
    • chrome.notifications.create() используется в background.js.
    • Пользователь видит уведомление, когда увеличивается счётчик.
  2. Страница настроек (options.html):
    • Позволяет включать/отключать уведомления.
    • Сохраняет настройки в chrome.storage.local.
  3. Переключение уведомлений:
    • Настройки читаются в background.js, чтобы определять, нужно ли показывать уведомления.

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

  1. 📁 Загрузить расширение на странице chrome://extensions/.
  2. 📄 Зайти в chrome://extensions/ → Найти расширение → Нажать на “Подробнее” → Нажать на “Параметры”.
  3. ✅ Включить/отключить уведомления, сохранить.
  4. 📌 Нажимать на кнопку или использовать хоткей (Ctrl+Shift+Y) и проверять, показываются ли уведомления.

Настройки изменения горячих клавиш и внешнего вида

Давай добавим возможность изменения горячих клавиш и внешнего вида расширения через настройки.

📂 Новая структура проекта:

/my-chrome-extension
|-- manifest.json
|-- background.js
|-- content.js
|-- popup.html
|-- popup.js
|-- options.html
|-- options.js
|-- styles.css (для оформления)
/icons/
|-- icon.png

📄 manifest.json (Обновлённый):

{
  "manifest_version": 3,
  "name": "Click Counter Extension",
  "version": "1.0",
  "description": "Считает количество нажатий на кнопку.",
  "permissions": ["storage", "activeTab", "scripting", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "commands": {
    "trigger_click": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Нажать на кнопку через хоткей"
    }
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icons/icon.png"
  },
  "options_page": "options.html"
}

📄 background.js (Обновлённый):

Добавим обработчик для изменения горячих клавиш:

async function updateBadge() {
    const result = await chrome.storage.local.get(['counter']);
    const count = result.counter || 0;
    chrome.action.setBadgeText({ text: count.toString() });
    chrome.action.setBadgeBackgroundColor({ color: "#4CAF50" });
}

async function showNotification(counter) {
    chrome.notifications.create({
        type: 'basic',
        iconUrl: 'icons/icon.png',
        title: 'Click Counter',
        message: `Счётчик увеличен! Текущее значение: ${counter}`
    });
}

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

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

        await chrome.storage.local.set({ counter: count });
        updateBadge();

        if (result.notificationsEnabled !== false) {
            showNotification(count);
        }

        console.log(`Обновлённый счётчик: ${count}`);
        sendResponse({ counter: count });
    }
    return true;
});

// Обработчик горячих клавиш
chrome.commands.onCommand.addListener(async (command) => {
    const result = await chrome.storage.local.get(['hotkey']);
    const hotkey = result.hotkey || 'Ctrl+Shift+Y';  // По умолчанию Ctrl+Shift+Y

    if (command === "trigger_click") {
        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
            if (tabs[0]) {
                chrome.tabs.sendMessage(tabs[0].id, { type: "trigger_click" });
            }
        });
    }
});

📄 options.html (Обновлённый):

<!DOCTYPE html>
<html>
<head>
    <title>Настройки</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 10px; }
        label { display: block; margin-bottom: 10px; }
        input[type="text"] { width: 100px; padding: 5px; }
        button { margin-top: 10px; padding: 5px 10px; }
    </style>
</head>
<body>
    <h2>Настройки расширения</h2>

    <label>
        <input type="checkbox" id="notificationsToggle"> Включить уведомления
    </label>

    <label>
        <input type="text" id="hotkeyInput" placeholder="Ctrl+Shift+Y"> Горячая клавиша
    </label>

    <button id="saveBtn">Сохранить настройки</button>

    <script src="options.js"></script>
</body>
</html>

📄 options.js (Обновлённый):

document.addEventListener('DOMContentLoaded', async () => {
    const notificationsToggle = document.getElementById('notificationsToggle');
    const hotkeyInput = document.getElementById('hotkeyInput');
    const saveBtn = document.getElementById('saveBtn');

    // Загрузка текущих настроек
    const result = await chrome.storage.local.get(['notificationsEnabled', 'hotkey']);
    notificationsToggle.checked = result.notificationsEnabled !== false;  // По умолчанию - true
    hotkeyInput.value = result.hotkey || 'Ctrl+Shift+Y';  // По умолчанию - Ctrl+Shift+Y

    // Сохранение настроек
    saveBtn.addEventListener('click', async () => {
        const isEnabled = notificationsToggle.checked;
        const hotkey = hotkeyInput.value;

        await chrome.storage.local.set({ notificationsEnabled: isEnabled, hotkey: hotkey });
        alert('Настройки сохранены!');
    });
});

📄 styles.css (Необязательный, но для оформления):

body {
    font-family: Arial, sans-serif;
    padding: 10px;
    width: 250px;
}

button {
    margin-top: 10px;
    padding: 5px 10px;
    cursor: pointer;
}

input[type="text"] {
    width: 100px;
    padding: 5px;
}

📌 Что добавлено:

  1. Изменение горячей клавиши:
    • В настройках можно ввести свою горячую клавишу (например, Ctrl+Shift+Z), которая будет сохраняться в chrome.storage.local.
    • Это значение используется в background.js для настройки команды.
  2. Изменение внешнего вида:
    • В HTML можно вводить горячую клавишу для изменения стандартного сочетания.
    • Сохраняем её в хранилище и обновляем в расширении.
  3. Динамическое изменение горячих клавиш:
    • В chrome.commands.onCommand.addListener обрабатываем изменение клавиши, если оно было настроено через интерфейс.

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

  1. 📁 Загрузить расширение на странице chrome://extensions/.
  2. Зайти в Настройки расширения:
    • Перейти на страницу chrome://extensions/ → Нажать на “Подробнее” → Нажать “Параметры”.
    • Ввести новую горячую клавишу в поле и сохранить настройки.
  3. Использовать горячую клавишу, чтобы проверить, работает ли она.
  4. Проверить уведомления, нажав на кнопку или используя горячую клавишу.

You may also enjoy

manifest.json

Давай разберём построчно все настройки в примере manifest.json: