Отображение текущего счетчика (badge) и попапа
Сделаем так, чтобы:
- В значке расширения (badge) отображалось текущее значение счётчика.
- Была всплывающая страница (
popup.html) с кнопкой для отображения счётчика и сброса.
📂 Новая структура проекта:
/my-chrome-extension
|-- manifest.json
|-- background.js
|-- content.js
|-- popup.html
|-- popup.js
|-- styles.css (не обязательно, но можно добавить для оформления)
/icons/
|-- 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"]
}
],
"commands": {
"trigger_click": {
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y"
},
"description": "Нажать на кнопку через хоткей"
}
},
"action": {
"default_popup": "popup.html",
"default_icon": "icons/icon.png"
}
}
📄 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" });
}
chrome.runtime.onInstalled.addListener(() => {
console.log("Расширение установлено!");
updateBadge(); // Установить начальное значение badge
});
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 });
updateBadge(); // Обновить badge
console.log(`Обновлённый счётчик: ${count}`);
sendResponse({ counter: count });
}
return true;
});
chrome.commands.onCommand.addListener((command) => {
if (command === "trigger_click") {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
if (tabs[0]) {
chrome.tabs.sendMessage(tabs[0].id, { type: "trigger_click" });
}
});
}
});
📄 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);
function clickButton() {
chrome.runtime.sendMessage({ type: "increment" }, (response) => {
alert(`Обновлённый счётчик: ${response.counter}`);
});
}
button.addEventListener('click', clickButton);
chrome.runtime.onMessage.addListener((message) => {
if (message.type === "trigger_click") {
clickButton();
}
});
})();
📄 popup.html (Новое):
<!DOCTYPE html>
<html>
<head>
<title>Click Counter</title>
<style>
body { font-family: Arial, sans-serif; width: 200px; padding: 10px; }
button { margin-top: 10px; padding: 5px 10px; }
</style>
</head>
<body>
<div>
<h2>Счётчик кликов</h2>
<div>Текущее значение: <span id="counter">0</span></div>
<button id="resetBtn">Сбросить</button>
</div>
<script src="popup.js"></script>
</body>
</html>
📄 popup.js (Новое):
document.addEventListener('DOMContentLoaded', async () => {
const counterElement = document.getElementById('counter');
const resetBtn = document.getElementById('resetBtn');
// Загружаем текущее значение счётчика из хранилища
const result = await chrome.storage.local.get(['counter']);
counterElement.textContent = result.counter || 0;
// Обработчик для кнопки сброса
resetBtn.addEventListener('click', async () => {
await chrome.storage.local.set({ counter: 0 });
counterElement.textContent = 0;
// Обновить badge
chrome.action.setBadgeText({ text: '0' });
});
});
🔍 Что изменилось и добавилось:
- 📌 Показ счётчика на иконке расширения (badge):
- Используется
chrome.action.setBadgeText()иchrome.action.setBadgeBackgroundColor()вbackground.js.
- Используется
- 📌 Всплывающее окно (
popup.html) с кнопкой сброса:popup.jsсчитывает значение изchrome.storageи обновляет его.- Можно легко сбросить счётчик и обновить значок badge.
📌 Как протестировать:
- 📁 Загрузить расширение на странице
chrome://extensions/. - Нажимай на кнопку на странице или используй хоткей (
Ctrl+Shift+Y). - Нажми на иконку расширения — отобразится окно с текущим значением счётчика и кнопкой сброса.
- Сбрось значение и посмотри, как badge тоже обновляется.