Firefox Плагин: Изменить Фон Всех Сайтов

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

Для реализации данного плагина нужно использовать JavaScript и CSS. Вот пример кода:

JavaScript:

// Создаем функцию, которая будет вызываться при нажатии на иконку плагина 
function openPanel() {
  // Создаем элемент div для панельки 
  var panel = document.createElement('div');
  // Добавляем элементу класс 'panel' 
  panel.classList.add('panel');
  // Создаем элемент input для ввода ссылки на фотографию 
  var input = document.createElement('input');
  // Добавляем элементу атрибут type со значением 'text'
  input.setAttribute('type', 'text');
  // Добавляем элементу атрибут placeholder со значением 'Введите ссылку на фотографию'
  input.setAttribute('placeholder', 'Введите ссылку на фотографию');
  // Создаем элемент button для кнопки 'Применить' 
  var button = document.createElement('button');
  // Добавляем элементу текст 'Применить' 
  button.textContent = 'Применить';
  // Добавляем обработчик события 'click' на кнопку 'Применить'
  button.addEventListener('click', function() {
    // Получаем значение из поля ввода 
    var url = input.value;
    // Устанавливаем background всех элементов body на странице и во всех вкладках 
    document.querySelectorAll('body').forEach(function(body) {
      body.style.background = 'url('' + url + '') fixed';
    });
    // Удаляем панельку 
    panel.remove();
  });
  // Добавляем элементы input и button в панельку 
  panel.appendChild(input);
  panel.appendChild(button);
  // Добавляем панельку в элемент body 
  document.body.appendChild(panel);
}

// Создаем элемент img для иконки плагина 
var img = document.createElement('img');
// Добавляем элементу атрибут src со значением 'иконка.png' 
img.setAttribute('src', 'иконка.png');
// Добавляем обработчик события 'click' на иконку плагина 
img.addEventListener('click', openPanel);
// Добавляем элемент img в элемент toolbar в Firefox 
document.getElementById('nav-bar').appendChild(img);

CSS:

/* Стили для панельки */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Стили для input */
.panel input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

/* Стили для button */
.panel button {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Стили для iконки */
img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

Заметка:

• Замените 'иконка.png' на фактическое имя файла вашей иконки.
• Этот код является базовым примером. Вам может потребоваться добавить дополнительную логику для проверки корректности введенной ссылки на изображение.