Firefox Плагин: Изменение фона всех сайтов

Представьте, что вы программист с 30-летним стажем. Напишите плагин для Firefox, который при нажатии на иконку плагина открывает панельку, в которой нужно ввести ссылку на фотографию из интернета в формате jpg или png, которая будет менять background всех сайтов и во всех вкладках. Изменённый background должен иметь свойство 'Fixed', чтобы она была зафиксирована на экране и при прокрутке страницы не смещалась.

Для реализации данного плагина необходимо выполнить следующие шаги:

Создать файл manifest.json, в котором указать информацию о плагине (название, версия, автор, описание и т.д.), а также определить иконку для плагина.

Пример содержимого файла manifest.json:

{
  "manifest_version": 2,
  "name": "Background Changer",
  "version": "1.0",
  "description": "Change the background of all websites",
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Background Changer",
    "default_popup": "popup.html"
  }
}

Создать файл popup.html, который будет содержать форму для ввода ссылки на фотографию и кнопку 'Применить'.

Пример содержимого файла popup.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Background Changer</title>
  <style>
    body {
      margin: 0;
      padding: 10px;
    }
    input[type="text"] {
      width: 100%;
      padding: 5px;
      margin-bottom: 10px;
    }
    input[type="submit"] {
      background-color: #008CBA;
      color: white;
      padding: 5px 10px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form>
    <label for="url">Enter image URL:</label><br>
    <input type="text" id="url" name="url"><br>
    <input type="submit" value="Apply">
  </form>
  <script src="popup.js"></script>
</body>
</html>

Создать файл popup.js, который будет содержать код для обработки события нажатия на кнопку 'Применить'.

Пример содержимого файла popup.js:

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  var url = document.getElementById('url').value;
  chrome.tabs.query({}, function(tabs) {
    for (var i = 0; i < tabs.length; i++) {
      chrome.tabs.executeScript(tabs[i].id, {
        code: "document.body.style.backgroundImage = 'url(' + url + ')'; document.body.style.backgroundAttachment = 'fixed';"
      });
    }
  });
});

Добавить разрешение на использование API браузера в файле manifest.json.

Пример содержимого файла manifest.json после добавления разрешения:

{
  "manifest_version": 2,
  "name": "Background Changer",
  "version": "1.0",
  "description": "Change the background of all websites",
  "icons": {
    "48": "icon.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Background Changer",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

Запустить плагин в браузере Firefox и проверить его работу.

После запуска плагина в браузере Firefox появится иконка плагина на панели инструментов. При нажатии на иконку откроется панелька с формой для ввода ссылки на фотографию. После ввода ссылки и нажатия на кнопку 'Применить' изменения будут применены ко всем открытым вкладкам, и фон будет изменен на указанную фотографию с фиксированным положением.

Firefox Плагин: Изменение фона всех сайтов