и интуитивно понятно. При выборе 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();
});
Напиши плагин для Firefox который можно закрепить и открывать в панели инструментов В окошке плагина можно выбрать несколько backgroundов также кнопка включения и выключения Меню плагина должно быть к

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

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