Плагин Firefox для изменения фона: картинка, видео, цвет

Плагин Firefox для изменения фона: картинка, видео, цвет

Этот плагин для Firefox позволяет вам легко изменять фоновый цвет, добавлять изображения или видео в качестве фона. Он имеет удобный интерфейс с выбором цвета из палитры или вводом HEX кода, а также кнопками для применения и отключения изменений.

Функционал:

• Изменение фона:
  • Изображение: Укажите ссылку на картинку, чтобы использовать ее в качестве фона.
  • Видео: Укажите ссылку на видео, чтобы использовать его в качестве фона.
  • Цвет: Выберите цвет из палитры или введите его в формате HEX.
• Кнопки:
  • Apply: Применяет выбранный фон.
  • Disable: Отключает плагин.

Код плагина:

// Создаем глобальный объект для хранения настроек
var settings = {
  background: null, // ссылка на картинку или видео
  color: null, // цвет фона
  enabled: true // включен ли плагин
};

// Функция для применения настроек
function applySettings() {
  if (settings.enabled) {
    if (settings.background) {
      document.body.style.background = 'url(' + settings.background + ') no-repeat center center fixed';
      document.body.style.backgroundSize = 'cover';
    } else if (settings.color) {
      document.body.style.background = settings.color;
    }
  } else {
    document.body.style.background = '';
  }
}

// Создаем UI для плагина
var pluginUI = document.createElement('div');
pluginUI.innerHTML = `
  <style>
    #plugin-container {
      position: fixed;
      bottom: 0;
      right: 0;
      background: #f1f1f1;
      border: 1px solid #ccc;
      padding: 10px;
    }
    #plugin-container * {
      margin: 5px;
    }
  </style>
  <div id='plugin-container'>
    <div>
      <label for='background-input'>Background:</label>
      <input type='text' id='background-input' placeholder='Enter image or video URL'>
      <button id='background-apply'>Apply</button>
      <button id='background-disable'>Disable</button>
    </div>
    <div>
      <label for='color-input'>Color:</label>
      <input type='color' id='color-input'>
      <button id='color-apply'>Apply</button>
    </div>
  </div>
`;
document.body.appendChild(pluginUI);

// Получаем ссылки на элементы UI
var backgroundInput = document.getElementById('background-input');
var backgroundApplyButton = document.getElementById('background-apply');
var backgroundDisableButton = document.getElementById('background-disable');
var colorInput = document.getElementById('color-input');
var colorApplyButton = document.getElementById('color-apply');

// Обработчик клика по кнопке Apply для установки background`а
backgroundApplyButton.addEventListener('click', function() {
  settings.background = backgroundInput.value;
  applySettings();
});

// Обработчик клика по кнопке Disable для выключения плагина
backgroundDisableButton.addEventListener('click', function() {
  settings.enabled = false;
  applySettings();
});

// Обработчик изменения цвета фона
colorInput.addEventListener('change', function() {
  settings.color = colorInput.value;
  applySettings();
});

// Обработчик клика по кнопке Apply для установки цвета фона
colorApplyButton.addEventListener('click', function() {
  settings.color = colorInput.value;
  applySettings();
});

// Применяем настройки при загрузке страницы
applySettings();

Использование:

1. Запустите плагин.
2. В поле ввода для background вставьте ссылку на картинку или видео.
3. Выберите цвет из палитры или введите его в формате HEX.
4. Нажмите кнопку Apply, чтобы применить изменения.
5. Нажмите кнопку Disable, чтобы отключить плагин.

Дополнительная информация:

• Плагин будет отображаться на панели инструментов Firefox.
• Вы можете изменить код плагина, чтобы добавить другие функции, например, возможность сохранения настроек.

Надеюсь, этот плагин будет полезен вам!