BVB聊天室的背景
// ==UserScript==
// @name BVB的BHB聊天室背景
// @namespace http://tampermonkey.net/
// @version 1.01
// @description BVB聊天室的背景
// @author BHB
// @match *://boyshelpboys.com/*
// @grant GM_addStyle
// @license GPL
// ==/UserScript==
(function() {
'use strict';
const defaultBackgroundUrl = 'https://t1-img.233213.xyz/2024/12/04/67504b8c1cf15.png';
function createBackgroundSection() {
const section = document.createElement('section');
section.id = 'backgroundSection';
section.style.position = 'fixed';
section.style.top = '0';
section.style.left = '0';
section.style.width = '100%';
section.style.height = '100%';
section.style.zIndex = '-1';
section.style.backgroundSize = 'cover';
section.style.backgroundPosition = 'center';
section.style.opacity = '1';
section.style.backgroundRepeat = 'no-repeat';
document.body.appendChild(section);
}
function changeBackground(url) {
const section = document.getElementById('backgroundSection');
if (section) {
section.style.backgroundImage = `url('${url}')`;
} else {
console.error('Background section not found');
}
}
async function setChatBackgroundFromLocal() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async (event) => {
const file = event.target.files[0];
if (file) {
const url = await getBase64Url(file);
localStorage.setItem('customBackgroundUrl', url);
localStorage.setItem('customBackgroundEnabled', 'true');
applyBackground(url);
}
};
input.click();
}
function setChatBackgroundFromUrl() {
const url = prompt("请输入背景图片URL:", localStorage.getItem('customBackgroundUrl') || '');
if (url) {
localStorage.setItem('customBackgroundUrl', url);
localStorage.setItem('customBackgroundEnabled', 'true');
applyBackground(url);
}
}
function restoreDefaultBackground() {
localStorage.removeItem('customBackgroundUrl');
localStorage.removeItem('customBackgroundEnabled');
applyBackground(defaultBackgroundUrl);
}
async function getBase64Url(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
function applyBackground(url) {
changeBackground(url);
}
function init() {
createBackgroundSection();
const url = localStorage.getItem('customBackgroundEnabled') !== 'false'
? localStorage.getItem('customBackgroundUrl') || defaultBackgroundUrl
: defaultBackgroundUrl;
applyBackground(url);
}
function createDropdownMenu() {
const navbarCollapse = document.getElementById('navbar-collapse');
if (!navbarCollapse) {
console.error('Navbar collapse element not found');
return;
}
const dropdownItem = document.createElement('li');
dropdownItem.className = 'nav-item dropdown d-flex align-items-center';
const dropdownButton = document.createElement('a');
dropdownButton.className = 'nav-link dropdown-toggle';
dropdownButton.href = '#';
dropdownButton.id = 'backgroundDropdown';
dropdownButton.role = 'button';
dropdownButton.dataset.bsToggle = 'dropdown';
dropdownButton.setAttribute('aria-expanded', 'false');
dropdownButton.textContent = '设置背景';
const dropdownMenu = document.createElement('ul');
dropdownMenu.className = 'dropdown-menu';
dropdownMenu.setAttribute('aria-labelledby', 'backgroundDropdown');
const localOption = createDropdownMenuItem('从本地设置背景', setChatBackgroundFromLocal);
const urlOption = createDropdownMenuItem('从URL设置背景', setChatBackgroundFromUrl);
const defaultOption = createDropdownMenuItem('恢复默认背景', restoreDefaultBackground);
dropdownMenu.appendChild(localOption);
dropdownMenu.appendChild(urlOption);
dropdownMenu.appendChild(defaultOption);
dropdownItem.appendChild(dropdownButton);
dropdownItem.appendChild(dropdownMenu);
navbarCollapse.appendChild(dropdownItem);
}
function createDropdownMenuItem(text, onClick) {
const li = document.createElement('li');
const a = document.createElement('a');
a.className = 'dropdown-item';
a.href = '#';
a.textContent = text;
a.onclick = (e) => {
e.preventDefault();
onClick();
};
li.appendChild(a);
return li;
}
const originalCss = `
:root {
--card-background-opacity: 0.2;
--bs-body-bg: #2b2c40a8;
--sn-nav-link: #d3c21a;
--sn-navbar-brand: #58fd00;
}
`;
const dropdownCss = `
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: 0.5rem 0;
margin: 0.125rem 0 0;
font-size: 1rem;
color: var(--sn-nav-link);
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: 0.25rem;
}
.dropdown-menu.show {
display: block;
}
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
font-weight: 400;
color: var(--sn-nav-link);
text-align: inherit;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
color: var(--sn-nav-link);
text-decoration: none;
background-color: #f8f9fa;
}
.d-flex.align-items-center {
display: flex;
align-items: center;
}
.nav-link.dropdown-toggle {
color: var(--sn-nav-link);
}
.nav-link.dropdown-toggle:hover {
color: var(--sn-nav-link);
}
`;
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = originalCss;
document.body.appendChild(style);
GM_addStyle(dropdownCss);
init();
createDropdownMenu();
})();