Создайте плагин для Firefox с изменяемым фоном на панели инструментов

Создайте плагин для Firefox с изменяемым фоном, который можно закрепить на панели инструментов. Плагин позволяет выбрать из нескольких фоновых изображений и включить/отключить эффект с помощью интуитивного интерфейса. Для создания плагина вам понадобится знание JavaScript и использование API браузера Firefox.

1. Файл manifest.json

{
  "manifest_version": 2,
  "name": "My Background Changer",
  "version": "1.0",
  "description": "Измените фон текущей веб-страницы",
  "icons": {
    "48": "icons/icon-48.png",
    "96": "icons/icon-96.png"
  },
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_icon": {
      "48": "icons/icon-48.png"
    },
    "default_title": "My Background Changer",
    "default_popup": "popup.html"
  }
}

2. Файл popup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Background Changer</title>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <h1>My Background Changer</h1>
    <div>
      <label for="background-select">Выберите фон:</label>
      <select id="background-select">
        <option value="none">Нет</option>
        <option value="bg1">Фон 1</option>
        <option value="bg2">Фон 2</option>
        <option value="bg3">Фон 3</option>
      </select>
    </div>
    <div>
      <label for="toggle-button">Включить фон:</label>
      <input type="checkbox" id="toggle-button">
    </div>
    <script src="popup.js"></script>
  </body>
</html>

3. Файл popup.css

h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

select, input[type="checkbox"] {
  margin-bottom: 10px;
}

4. Файл popup.js

const backgroundSelect = document.getElementById('background-select');
const toggleButton = document.getElementById('toggle-button');

function applyBackground() {
  const selectedBackground = backgroundSelect.value;
  const body = document.querySelector('body');
  switch (selectedBackground) {
    case 'none':
      body.style.backgroundImage = 'none';
      break;
    case 'bg1':
      body.style.backgroundImage = 'url('backgrounds/bg1.jpg')';
      break;
    case 'bg2':
      body.style.backgroundImage = 'url('backgrounds/bg2.jpg')';
      break;
    case 'bg3':
      body.style.backgroundImage = 'url('backgrounds/bg3.jpg')';
      break;
  }
}

backgroundSelect.addEventListener('change', applyBackground);

toggleButton.addEventListener('change', function() {
  if (toggleButton.checked) {
    applyBackground();
  } else {
    document.querySelector('body').style.backgroundImage = 'none';
  }
});

5. Упаковка и установка

Упакуйте плагин в файл .xpi и установите его в браузер Firefox. Теперь вы можете выбрать один из заданных фоновых изображений и применить его к текущей странице.

Создайте плагин для Firefox с изменяемым фоном на панели инструментов