🟡 Расширение для браузера за 10 минут

Всегда хотели создать собственное расширение для браузера, но думали, что это сложно? На самом деле, вы можете сделать простое, но полезное расширение всего за 10 минут!


➖ История проблемы

В конце 2020 года я разработал скрипт с падающим снегом для сайтов. Но возникла проблема: скрипт нужно было запускать через консоль браузера, что становилось невозможным на сайтах с жёсткой политикой безопасности. Решение? Создать собственное расширение!


➖ Создаём манифест

Манифест — это главный документ расширения, который определяет его параметры:
- Название
- Права доступа
- Фоновые скрипты
- Иконку
- Действия при клике

Создадим файл manifest.json:

{
  "name": "Snow Fall",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab", "scripting"],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

➖ Добавление расширения в браузер

1. Откройте Chrome и перейдите в раздел chrome://extensions/
2. Включите "Режим разработчика"
3. Нажмите "Загрузить распакованное расширение" и выберите папку с вашими файлами

Настройка иконок и разрешений

Для работы расширения нам нужны разрешения:
- activeTab — доступ к активной вкладке
- scripting — возможность запускать скрипты

А для всплывающего меню создадим файл popup.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    button { width: 100px; height: 30px; }
  </style>
</head>
<body>
  <button id="start">Запустить снег</button>
  <script src="popup.js"></script>
</body>
</html>

➖ Запуск снежинок

Теперь создадим файл popup.js с кодом для запуска:

document.getElementById('start').addEventListener('click', async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: snowFall
  });
});

function snowFall() {
  // Здесь должен быть код со снежинками
  // Пример:
  const snow = document.createElement('div');
  snow.innerHTML = '❄️';
  snow.style.position = 'fixed';
  snow.style.top = '0';
  snow.style.left = Math.random() * 100 + '%';
  snow.style.animation = 'fall 10s linear';
  document.body.appendChild(snow);
  
  // Добавьте здесь полный код для снежинок
}

➖ Проверка работы

После создания всех файлов и добавления расширения в браузер, вы можете:
1. Зайти на любой сайт
2. Нажать на иконку расширения
3. Нажать кнопку "Запустить снег"

Вуаля! Снежинки появляются даже на сайтах с жёсткой политикой безопасности.


Оригинальная статья 👇

🔗 Ссылка

🌐 Новости

🖥 Платформа