Напиши плагин для Firefox который можно закрепить и открывать в панели инструментов В окошке плагина можно выбрать несколько backgroundов также кнопка включения и выключения Меню плагина должно быть к
и интуитивно понятно. При выборе background`а, он должен мгновенно применяться на текущей странице.
Примерный код:
// создаем плагин
const myPlugin = {
// инициализация плагина
init() {
// добавляем кнопку в панель инструментов
this.addButton();
// добавляем обработчики событий
this.addEventListeners();
},
// добавляем кнопку в панель инструментов
addButton() {
// создаем элемент кнопки
const button = document.createElement('button');
button.id = 'my-plugin-button';
button.title = 'My Plugin';
button.innerHTML = 'My Plugin';
// добавляем кнопку в панель инструментов
const toolbar = document.getElementById('nav-bar');
toolbar.insertItem(button);
toolbar.setAttribute('currentset', toolbar.currentSet);
document.persist(toolbar.id, 'currentset');
// закрепляем кнопку
button.collapsed = false;
},
// добавляем обработчики событий
addEventListeners() {
// обработчик события нажатия на кнопку плагина
const button = document.getElementById('my-plugin-button');
button.addEventListener('click', () => {
this.showMenu();
});
// обработчик события выбора background`а
const select = document.getElementById('my-plugin-select');
select.addEventListener('change', () => {
const background = select.options[select.selectedIndex].value;
this.applyBackground(background);
});
// обработчик события включения/выключения плагина
const checkbox = document.getElementById('my-plugin-checkbox');
checkbox.addEventListener('change', () => {
const enabled = checkbox.checked;
this.setEnabled(enabled);
});
},
// показываем меню плагина
showMenu() {
// создаем элементы меню
const menu = document.createElement('div');
menu.id = 'my-plugin-menu';
menu.innerHTML = `
<label for="my-plugin-select">Background:</label>
<select id="my-plugin-select">
<option value="none">None</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<br>
<label for="my-plugin-checkbox">Enabled:</label>
<input type="checkbox" id="my-plugin-checkbox">
`;
// добавляем меню на страницу
const body = document.getElementsByTagName('body')[0];
body.appendChild(menu);
// устанавливаем значения элементов меню
const select = document.getElementById('my-plugin-select');
const checkbox = document.getElementById('my-plugin-checkbox');
select.value = this.getBackground();
checkbox.checked = this.isEnabled();
},
// применяем background на текущей странице
applyBackground(background) {
const body = document.getElementsByTagName('body')[0];
body.style.backgroundColor = background;
this.setBackground(background);
},
// устанавливаем значение background в локальном хранилище
setBackground(background) {
localStorage.setItem('my-plugin-background', background);
},
// получаем значение background из локального хранилища
getBackground() {
return localStorage.getItem('my-plugin-background') || 'none';
},
// включаем или выключаем плагин
setEnabled(enabled) {
localStorage.setItem('my-plugin-enabled', enabled ? 'true' : 'false');
},
// проверяем, включен ли плагин
isEnabled() {
return localStorage.getItem('my-plugin-enabled') === 'true';
},
};
// инициализируем плагин при загрузке страницы
window.addEventListener('load', () => {
myPlugin.init();
});
原文地址: https://www.cveoy.top/t/topic/bWKS 著作权归作者所有。请勿转载和采集!