Напиши плагин для Firefox С помощью плагина можно менять background Плагин можно закрепить на панели инструментов Окошко плагина должно быть красивое В плагине должны быть функции выбора backgroundа
для выбора цвета фона, где пользователь может выбрать цвет из палитры или ввести его в формате 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 выключает плагин. Меню для выбора цвета фона работает сразу при изменении цвета.
原文地址: https://www.cveoy.top/t/topic/bWMf 著作权归作者所有。请勿转载和采集!