Хоткей для базового расширения
Сделать хоткей — это отличная идея! Давай разберём, как можно связать нажатие горячей клавиши с действием в расширении.
📌 Идея:
Мы добавим обработчик горячих клавиш в background.js, который при срабатывании будет отправлять сообщение в content.js, чтобы выполнить действие кнопки.
📄 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": "Нажать на кнопку через хоткей"
}
}
}
🔍 Новый блок: commands
"trigger_click"— Название команды."suggested_key"— Горячая клавиша, которую мы используем:"default"— Для Windows / Linux."mac"— Для macOS.
"description"— Описание команды, которое можно увидеть на странице настроек расширений.
📄 background.js (Обновлённый):
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.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);
// Слушаем сообщения от background.js
chrome.runtime.onMessage.addListener((message) => {
if (message.type === "trigger_click") {
clickButton();
}
});
})();
🔍 Что изменилось:
- 📌 В
manifest.jsonдобавлен блокcommands:- Теперь Chrome понимает, что ты хочешь использовать хоткей
Ctrl+Shift+Y(илиCommand+Shift+Yна Mac).
- Теперь Chrome понимает, что ты хочешь использовать хоткей
- 📌 В
background.js:- Добавлен обработчик события
chrome.commands.onCommand, который ловит нажатия на горячие клавиши и отправляет сообщение вcontent.js.
- Добавлен обработчик события
- 📌 В
content.js:- Теперь скрипт слушает сообщения с типом
"trigger_click"и вызывает функциюclickButton().
- Теперь скрипт слушает сообщения с типом
📌 Как протестировать:
- 📁 Загрузить расширение на странице
chrome://extensions/. - 🔑 Нажать Ctrl+Shift+Y (или Command+Shift+Y на Mac) на любой странице.
- 📌 Если всё правильно настроено, кнопка “Нажми на меня” сработает без клика, а через хоткей!