Firefox плагин: Изменение фона всех сайтов с помощью фотографии

// Начинаем написание кода для плагина

// Создаем переменные для хранения ссылки и background var link; var background;

// Функция, которая будет вызываться при нажатии на иконку плагина function openPanel() { // Создаем панельку и добавляем ее на страницу var panel = document.createElement('div'); panel.style.position = 'fixed'; panel.style.top = '50%'; panel.style.left = '50%'; panel.style.transform = 'translate(-50%, -50%)'; panel.style.width = '300px'; panel.style.padding = '20px'; panel.style.backgroundColor = '#fff'; panel.style.border = '1px solid #ccc'; panel.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)'; document.body.appendChild(panel);

// Добавляем текст и поле ввода ссылки на фото var title = document.createElement('h2'); title.style.marginTop = '0'; title.style.marginBottom = '20px'; title.innerText = 'Введите ссылку на фото:'; panel.appendChild(title);

var input = document.createElement('input'); input.style.width = '100%'; input.style.padding = '10px'; input.style.border = '1px solid #ccc'; input.style.marginBottom = '20px'; panel.appendChild(input);

// Добавляем кнопку для сохранения ссылки и закрытия панельки var button = document.createElement('button'); button.style.display = 'block'; button.style.width = '100%'; button.style.padding = '10px'; button.style.backgroundColor = '#4CAF50'; button.style.border = 'none'; button.style.color = '#fff'; button.style.cursor = 'pointer'; button.innerText = 'Сохранить'; button.addEventListener('click', function() { link = input.value; panel.remove(); }); panel.appendChild(button); }

// Функция, которая будет изменять background function changeBackground() { // Создаем стиль для background var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = 'body { background-image: url('' + link + ''); background-attachment: fixed; }'; document.getElementsByTagName('head')[0].appendChild(style); }

// Добавляем иконку плагина на панель инструментов Firefox browser.browserAction.onClicked.addListener(openPanel);

// При получении ссылки на фото вызываем функцию для изменения background browser.runtime.onMessage.addListener(function(request, sender, sendResponse) { link = request.link; changeBackground(); });

// Отправляем ссылку на фото во вкладку browser.tabs.executeScript({ code: 'browser.runtime.sendMessage({ link: '' + link + '' });' });