Изменение фонового изображения на всех сайтах

Нельзя изменять background на всех сайтах, используя только HTML, CSS и JavaScript из одной страницы. Для этого необходимо создавать расширение для браузера.

Чтобы создать браузерное расширение, вам потребуется:

Манифест: файл manifest.json, определяющий метаданные расширения, такие как имя, версия, разрешения и т.д.
HTML: файл popup.html, содержащий пользовательский интерфейс расширения (например, поле ввода URL изображения).
CSS: файл style.css, стилизирующий внешний вид popup.html.
JavaScript: файл script.js, содержащий логику работы расширения, которая будет взаимодействовать с браузером и изменять фоновое изображение сайтов.

Пример кода для manifest.json:

{
  "manifest_version": 2,
  "name": "Change Background",
  "version": "1.0",
  "description": "Change the background image of any website with a custom URL.",

  "icons": {
    "48": "icon.png",
    "96": "icon.png"
  },

  "browser_action": {
    "default_title": "Change Background",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab"
  ]
}

Пример кода для popup.html:

<!DOCTYPE html>
<html>
<head>
	<title>Change Background</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<h1>Change Background</h1>
		<input type="text" id="url" placeholder="Enter image URL">
		<button id="apply">Apply</button>
	</div>

	<script src="script.js"></script>
</body>
</html>

Пример кода для script.js:

function changeBackground(url) {
	chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
		chrome.tabs.sendMessage(tabs[0].id, {url: url});
	});
}

document.getElementById("apply").addEventListener("click", function() {
	var url = document.getElementById("url").value;
	changeBackground(url);
});

// В `content.js` (код будет вставляться в каждую открытую вкладку)
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	document.body.style.backgroundImage = "url('"+ request.url + "')";
});

Создание расширения:

Создайте папку для расширения (например, change-background)
Добавьте в папку файлы manifest.json, popup.html, style.css и script.js.
Загрузите расширение в Chrome:
- Откройте chrome://extensions/
- Включите "Режим разработчика"
- Нажмите "Загрузить не упакованное расширение"
- Выберите папку с расширением.

После установки расширение будет отображаться в правом верхнем углу браузера. Нажмите на него, введите URL изображения и нажмите кнопку "Apply". Фоновое изображение всех открытых вкладок будет изменено.

Дополнительные замечания:

Вместо chrome.tabs.sendMessage можно использовать другие методы для взаимодействия с контентом вкладок, например, chrome.tabs.executeScript.
Вы можете добавить дополнительные функции, такие как выбор цвета фона или загрузка изображения с компьютера.
При использовании расширения для изменения фонового изображения важно учитывать, что это может повлиять на юзабилити сайтов и вызывать проблемы с отображением контента. Используйте расширение с осторожностью.