Firefox для изменения фона всех вкладок

Firefox расширение для изменения фона всех вкладок

Это руководство поможет вам создать расширение Firefox, которое позволяет изменять цвет фона всех открытых вкладок. Вы сможете выбирать из нескольких фоновых цветов, а также настроить размер и шрифт текста в меню плагина.

Создание файла manifest.json

Сначала создайте файл manifest.json с следующим содержимым:

{
  "manifest_version": 2,
  "name": "Background Changer",
  "version": "1.0",
  "description": "Плагин, который позволяет выбрать цвет фона для всех открытых сайтов.",
  "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

Создайте файл 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> Белый</label>
      <label><input type="radio" name="background" value="gray"> Серый</label>
      <label><input type="radio" name="background" value="blue"> Синий</label>
      <button type="submit" class="button">Применить</button>
    </form>
    <br>
    <button id="toggle-button" class="button">Отключить</button>
    <script src="popup.js"></script>
  </body>
</html>

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

Создание файла popup.js

Создайте файл 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 ? "Отключить" : "Включить";
  });
}

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 ? "Отключить" : "Включить";
  });
});

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

Упаковка и установка расширения

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

Дополнительные функции

Вы можете добавить дополнительные функции в расширение, например:

Настроить размер и шрифт текста в меню плагина
Добавить больше цветов в объект backgrounds
Сохранять выбранный цвет фона в локальном хранилище, чтобы он автоматически применялся при запуске браузера.
Добавить возможность выбора изображения в качестве фона
Добавить возможность включения/отключения расширения для отдельных сайтов

Это руководство поможет вам создать простое расширение Firefox, которое позволит вам изменять цвет фона всех открытых вкладок. Вы можете добавить свои собственные функции и настройки, чтобы сделать его более функциональным и удобным для использования.