Напиши плагин для Firefox который можно закрепить и открывать в панели инструментов В окошке плагина можно выбрать несколько backgroundов для всех открытых сайтов также кнопка включения и выключения

, с возможностью выбора цветовой схемы и настройками размера и шрифта текста.

Для начала создадим файл manifest.json:

{
  "manifest_version": 2,
  "name": "Background Changer",
  "version": "1.0",
  "description": "A plugin that allows you to choose a background for all open sites.",
  "icons": {
    "48": "icons/icon48.png",
    "96": "icons/icon96.png"
  },
  "browser_action": {
    "default_icon": {
      "48": "icons/icon48.png",
      "96": "icons/icon96.png"
    },
    "default_title": "Background Changer",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ]
}

Здесь мы указываем название, описание и версию плагина, а также иконки, которые будут отображаться в браузере. Также мы определяем, что плагин будет иметь кнопку на панели инструментов и будет требовать доступ к активной вкладке.

Далее создадим файл popup.html, который будет содержать окошко плагина:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Background Changer</title>
    <style>
      body {
        width: 300px;
        height: 200px;
        padding: 10px;
        font-size: 14px;
        font-family: Arial, sans-serif;
        background-color: #fff;
        color: #000;
      }
      h1 {
        font-size: 18px;
        margin: 0 0 10px;
      }
      label {
        display: block;
        margin: 10px 0 0;
      }
      input[type="radio"] {
        margin-right: 5px;
      }
      .button {
        display: inline-block;
        margin: 10px 0 0;
        padding: 5px 10px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        background-color: #0074D9;
        color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        cursor: pointer;
      }
      .button:hover {
        background-color: #2ECC40;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h1>Background Changer</h1>
    <form id="options-form">
      <label><input type="radio" name="background" value="white" checked> White</label>
      <label><input type="radio" name="background" value="gray"> Gray</label>
      <label><input type="radio" name="background" value="blue"> Blue</label>
      <button type="submit" class="button">Apply</button>
    </form>
    <br>
    <button id="toggle-button" class="button">Disable</button>
    <script src="popup.js"></script>
  </body>
</html>

Здесь мы создаем форму с радиокнопками для выбора цвета фона и кнопку "Применить". Также мы добавляем кнопку "Отключить", которая будет служить для включения и выключения плагина. Для стилей мы используем CSS.

Наконец, создадим файл popup.js, в котором будет содержаться логика работы плагина:

let backgrounds = {
  white: "#fff",
  gray: "#ddd",
  blue: "#0074D9"
};

function applyBackground(color) {
  let code = "document.body.style.backgroundColor = '" + backgrounds[color] + "';";
  browser.tabs.executeScript({code: code});
}

function togglePlugin() {
  browser.storage.local.get("enabled").then((result) => {
    let enabled = result.enabled === undefined ? true : !result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
  });
}

document.addEventListener("DOMContentLoaded", () => {
  let form = document.getElementById("options-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();
    let color = form.querySelector("input[name='background']:checked").value;
    applyBackground(color);
  });

  let button = document.getElementById("toggle-button");
  button.addEventListener("click", () => {
    togglePlugin();
  });

  browser.storage.local.get("enabled").then((result) => {
    let enabled = result.enabled === undefined ? true : result.enabled;
    browser.storage.local.set({enabled: enabled});
    document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
  });
});

Здесь мы определяем объект backgrounds, который содержит цвета фона. Функция applyBackground принимает цвет и применяет его ко всем открытым вкладкам. Функция togglePlugin изменяет значение параметра enabled в локальном хранилище браузера и меняет текст на кнопке "Отключить"/"Включить". Наконец, при загрузке окошка мы определяем состояние плагина и устанавливаем соответствующий текст на кнопке.

Теперь мы можем запаковать все файлы в zip-архив и установить плагин в Firefox через меню "Add-ons". После установки мы увидим кнопку "Background Changer" на панели инструментов, которая будет открывать окошко плагина. Мы сможем выбрать цвет фона и включить/выключить плагин.

Напиши плагин для Firefox который можно закрепить и открывать в панели инструментов В окошке плагина можно выбрать несколько backgroundов для всех открытых сайтов также кнопка включения и выключения