Плагин для изменения фона: выбор по ссылке на картинку, видео и сброс на стандартный фон
{
"manifest_version": 2,
"name": "Background Changer",
"version": "1.0",
"description": "A plugin that allows you to choose a background for all open sites.",
"icons": {
"48": "icons/icon48.png",
"96": "icons/icon96.png"
},
"browser_action": {
"default_icon": {
"48": "icons/icon48.png",
"96": "icons/icon96.png"
},
"default_title": "Background Changer",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
Здесь мы указываем название, описание и версию плагина, а также иконки, которые будут отображаться в браузере. Также мы определяем, что плагин будет иметь кнопку на панели инструментов и будет требовать доступ к активной вкладке.
Далее создадим файл popup.html, который будет содержать окошко плагина:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Background Changer</title>
<style>
body {
width: 300px;
height: 200px;
padding: 10px;
font-size: 14px;
font-family: Arial, sans-serif;
background-color: #fff;
color: #000;
}
h1 {
font-size: 18px;
margin: 0 0 10px;
}
label {
display: block;
margin: 10px 0 0;
}
input[type="radio"] {
margin-right: 5px;
}
.button {
display: inline-block;
margin: 10px 0 0;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: #0074D9;
color: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.button:hover {
background-color: #2ECC40;
color: #fff;
}
</style>
</head>
<body>
<h1>Background Changer</h1>
<form id="options-form">
<label><input type="radio" name="background" value="white" checked> White</label>
<label><input type="radio" name="background" value="gray"> Gray</label>
<label><input type="radio" name="background" value="blue"> Blue</label>
<label><input type="radio" name="background" value="image"> Image</label>
<input type="text" id="image-url" placeholder="Image URL">
<label><input type="radio" name="background" value="video"> Video</label>
<input type="text" id="video-url" placeholder="Video URL">
<button type="submit" class="button">Apply</button>
<button type="button" id="reset-button" class="button">Reset</button>
</form>
<br>
<button id="toggle-button" class="button">Disable</button>
<script src="popup.js"></script>
</body>
</html>
Здесь мы создаем форму с радиокнопками для выбора цвета фона и кнопку "Применить". Также мы добавляем кнопку "Отключить", которая будет служить для включения и выключения плагина. Для стилей мы используем CSS.
Наконец, создадим файл popup.js, в котором будет содержаться логика работы плагина:
let backgrounds = {
white: "#fff",
gray: "#ddd",
blue: "#0074D9"
};
function applyBackground(color, url) {
if (color === "image") {
let code = "document.body.style.backgroundImage = 'url(" + url + ")';";
browser.tabs.executeScript({code: code});
} else if (color === "video") {
let code = "let video = document.createElement('video');" +
"video.src = '" + url + "';" +
"video.loop = true;" +
"video.muted = true;" +
"video.style.position = 'fixed';" +
"video.style.top = 0;" +
"video.style.left = 0;" +
"video.style.width = '100%';" +
"video.style.height = '100%';" +
"document.body.appendChild(video);";
browser.tabs.executeScript({code: code});
} else {
let code = "document.body.style.backgroundColor = '" + backgrounds[color] + "';";
browser.tabs.executeScript({code: code});
}
}
function loadImage(url) {
let img = new Image();
img.onload = () => {
applyBackground("image", url);
};
img.src = url;
}
function loadVideo(url) {
applyBackground("video", url);
}
function resetBackground() {
let code = "document.body.style.backgroundImage = '';" +
"document.body.style.backgroundColor = '';" +
"let video = document.querySelector('video');" +
"if (video) video.parentNode.removeChild(video);";
browser.tabs.executeScript({code: code});
}
function togglePlugin() {
browser.storage.local.get("enabled").then((result) => {
let enabled = result.enabled === undefined ? true : !result.enabled;
browser.storage.local.set({enabled: enabled});
document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
document.getElementById("options-form").style.display = enabled ? "block" : "none";
});
}
document.addEventListener("DOMContentLoaded", () => {
let form = document.getElementById("options-form");
form.addEventListener("submit", (e) => {
e.preventDefault();
let color = form.querySelector("input[name='background']:checked").value;
if (color === "image") {
let url = form.querySelector("#image-url").value;
loadImage(url);
} else if (color === "video") {
let url = form.querySelector("#video-url").value;
loadVideo(url);
} else {
applyBackground(color);
}
});
let resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", () => {
resetBackground();
});
let toggleButton = document.getElementById("toggle-button");
toggleButton.addEventListener("click", () => {
togglePlugin();
});
browser.storage.local.get("enabled").then((result) => {
let enabled = result.enabled === undefined ? true : result.enabled;
browser.storage.local.set({enabled: enabled});
document.getElementById("toggle-button").textContent = enabled ? "Disable" : "Enable";
document.getElementById("options-form").style.display = enabled ? "block" : "none";
});
});
Здесь мы определяем новые функции setBackground, loadImage, loadVideo, resetBackground и изменяем функцию togglePlugin. Функция setBackground принимает цвет и ссылку на изображение или видео и устанавливает соответствующий фон для активной вкладки. Функции loadImage и loadVideo загружают изображение и видео по ссылке и вызывают функцию setBackground. Функция resetBackground сбрасывает фон на стандартный браузерный фон. Функция togglePlugin также скрывает форму настроек, когда плагин выключен.
Теперь у нас есть плагин, который позволяет выбирать фон для всех открытых вкладок, а также загружать изображения и видео по ссылке. Мы также добавили функцию для сброса фона на стандартный браузерный фон.
原文地址: https://www.cveoy.top/t/topic/njuc 著作权归作者所有。请勿转载和采集!