Firefox плагин для изменения фона сайтов

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

Для начала, нужно создать файл manifest.json, который будет содержать информацию о плагине:

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

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

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Background Changer</title>
  <style>
    input[type="text"] {
      width: 100%;
      padding: 10px;
      margin-bottom: 20px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <form>
    <label for="image-url">Image URL:</label>
    <input type="text" id="image-url" name="image-url">
    <button type="button" id="change-button">Change Background</button>
  </form>
  <script src="popup.js"></script>
</body>
</html>

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

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

document.addEventListener("DOMContentLoaded", function() {
  var button = document.getElementById("change-button");
  button.addEventListener("click", function() {
    var url = document.getElementById("image-url").value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {url: url});
    });
  });
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action == "change-background") {
    var style = document.createElement("style");
    style.innerHTML = "body { background-image: url('" + request.url + "'); }";
    document.head.appendChild(style);
  }
});

Здесь мы добавляем обработчик события на кнопку "Change Background". При нажатии на кнопку мы получаем ссылку на фотографию из поля ввода и отправляем ее в content script, который будет менять фон на сайтах. Для этого мы используем функцию chrome.tabs.sendMessage. Также мы добавляем обработчик сообщений от content script, который будет вызываться при изменении фона. В этом обработчике мы создаем новый элемент style и добавляем его в head документа, чтобы изменить фон на всех сайтах.

Теперь наш плагин готов к использованию. Чтобы установить его, нужно зайти в меню расширений Firefox, выбрать "Add-ons & Themes", затем "Extensions", нажать на кнопку "Install Add-on From File" и выбрать наш файл manifest.json. После установки плагина появится иконка в правом верхнем углу браузера. При нажатии на нее откроется панель с формой для ввода ссылки на фотографию. После ввода ссылки и нажатия на кнопку "Change Background" фон всех сайтов должен измениться на выбранную фотографию.

Firefox плагин для изменения фона сайтов