для выбора цвета фона, где пользователь может выбрать цвет из палитры или ввести его в формате HEX.

Код плагина:

// Создаем глобальный объект для хранения настроек
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();

После запуска плагина пользователь видит на странице окошко с двумя полями ввода: для ссылки на картинку или видео и для выбора цвета фона. Кнопка Apply применяет выбранный background, а кнопка Disable выключает плагин. Меню для выбора цвета фона работает сразу при изменении цвета.

Напиши плагин для Firefox С помощью плагина можно менять background Плагин можно закрепить на панели инструментов Окошко плагина должно быть красивое В плагине должны быть функции выбора backgroundа

原文地址: https://www.cveoy.top/t/topic/bWMf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录