Custom background with picture frame icon popup
当前为
// ==UserScript==
// @name Torn Custom Background
// @namespace https://torn.com/
// @version 1.22
// @description Custom background with picture frame icon popup
// @author Skin-Tin
// @match https://www.torn.com/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
// Load saved background
let savedUrl = localStorage.getItem('tornWebBgUrl') || '';
const frameIcon = document.createElement('div');
let popup;
// Apply background
function setBackground(url) {
const body = document.querySelector('body');
if (body) {
if (url) {
body.style.backgroundImage = `url(${url})`;
body.style.backgroundSize = 'cover';
body.style.backgroundAttachment = 'fixed';
body.style.backgroundPosition = 'center center';
body.style.backgroundRepeat = 'no-repeat';
} else {
body.style.backgroundImage = '';
}
}
}
// Create floating frame icon
function createFrameIcon() {
frameIcon.innerHTML = '🖼️';
frameIcon.style.position = 'fixed';
frameIcon.style.bottom = '20px';
frameIcon.style.right = '20px';
frameIcon.style.zIndex = '9999';
frameIcon.style.fontSize = '24px';
frameIcon.style.cursor = 'pointer';
frameIcon.style.opacity = '0.7';
frameIcon.style.transition = 'opacity 0.3s';
frameIcon.style.backgroundColor = 'rgba(0,0,0,0.5)';
frameIcon.style.borderRadius = '50%';
frameIcon.style.width = '40px';
frameIcon.style.height = '40px';
frameIcon.style.display = 'flex';
frameIcon.style.alignItems = 'center';
frameIcon.style.justifyContent = 'center';
frameIcon.style.boxShadow = '0 2px 10px rgba(0,0,0,0.5)';
frameIcon.addEventListener('mouseenter', () => {
frameIcon.style.opacity = '1';
});
frameIcon.addEventListener('mouseleave', () => {
if (!popup || popup.style.display === 'none') {
frameIcon.style.opacity = '0.7';
}
});
frameIcon.addEventListener('click', () => {
if (!popup) createPopup();
popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
frameIcon.style.opacity = popup.style.display === 'block' ? '1' : '0.7';
});
document.body.appendChild(frameIcon);
}
// Create settings popup
function createPopup() {
popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.bottom = '70px';
popup.style.right = '20px';
popup.style.zIndex = '9998';
popup.style.width = '300px';
popup.style.backgroundColor = 'rgba(30, 30, 35, 0.95)';
popup.style.border = '1px solid #444';
popup.style.borderRadius = '8px';
popup.style.padding = '15px';
popup.style.boxShadow = '0 5px 15px rgba(0,0,0,0.5)';
popup.style.display = 'none';
popup.style.backdropFilter = 'blur(5px)';
// Title
const title = document.createElement('h3');
title.textContent = 'Custom Background';
title.style.marginTop = '0';
title.style.color = '#ddd';
title.style.fontSize = '18px';
title.style.borderBottom = '1px solid #444';
title.style.paddingBottom = '10px';
popup.appendChild(title);
// Input container
const inputContainer = document.createElement('div');
inputContainer.style.margin = '15px 0';
// URL input
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'Paste image URL here';
input.value = savedUrl;
input.style.width = '100%';
input.style.padding = '10px';
input.style.marginBottom = '10px';
input.style.backgroundColor = '#1a1a1a';
input.style.border = '1px solid #444';
input.style.color = '#fff';
input.style.borderRadius = '4px';
inputContainer.appendChild(input);
// Button container
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex';
buttonContainer.style.gap = '10px';
// Apply button
const applyButton = document.createElement('button');
applyButton.textContent = 'Apply';
applyButton.style.flex = '1';
applyButton.style.padding = '8px';
applyButton.style.backgroundColor = '#2c89d9';
applyButton.style.color = 'white';
applyButton.style.border = 'none';
applyButton.style.borderRadius = '4px';
applyButton.style.cursor = 'pointer';
applyButton.style.fontWeight = 'bold';
// Clear button
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.style.flex = '1';
clearButton.style.padding = '8px';
clearButton.style.backgroundColor = '#555';
clearButton.style.color = 'white';
clearButton.style.border = 'none';
clearButton.style.borderRadius = '4px';
clearButton.style.cursor = 'pointer';
buttonContainer.appendChild(applyButton);
buttonContainer.appendChild(clearButton);
inputContainer.appendChild(buttonContainer);
popup.appendChild(inputContainer);
// Preview
const previewTitle = document.createElement('div');
previewTitle.textContent = 'Preview:';
previewTitle.style.color = '#aaa';
previewTitle.style.marginTop = '10px';
previewTitle.style.marginBottom = '5px';
popup.appendChild(previewTitle);
const previewImg = document.createElement('img');
previewImg.style.maxWidth = '100%';
previewImg.style.maxHeight = '150px';
previewImg.style.border = '1px solid #333';
previewImg.style.borderRadius = '4px';
previewImg.style.display = savedUrl ? 'block' : 'none';
previewImg.src = savedUrl || '';
popup.appendChild(previewImg);
// Close button
const closeButton = document.createElement('div');
closeButton.textContent = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '10px';
closeButton.style.right = '15px';
closeButton.style.color = '#aaa';
closeButton.style.fontSize = '24px';
closeButton.style.cursor = 'pointer';
closeButton.style.lineHeight = '1';
closeButton.addEventListener('click', () => {
popup.style.display = 'none';
frameIcon.style.opacity = '0.7';
});
popup.appendChild(closeButton);
// Event listeners
input.addEventListener('input', () => {
const val = input.value.trim();
if (val) {
previewImg.src = val;
previewImg.style.display = 'block';
} else {
previewImg.style.display = 'none';
}
});
applyButton.addEventListener('click', () => {
const url = input.value.trim();
savedUrl = url;
if (url) {
setBackground(url);
localStorage.setItem('tornWebBgUrl', url);
applyButton.textContent = '✓ Applied!';
setTimeout(() => {
applyButton.textContent = 'Apply';
popup.style.display = 'none';
frameIcon.style.opacity = '0.7';
}, 1500);
}
});
clearButton.addEventListener('click', () => {
input.value = '';
savedUrl = '';
setBackground('');
localStorage.removeItem('tornWebBgUrl');
previewImg.style.display = 'none';
clearButton.textContent = '✓ Cleared!';
setTimeout(() => {
clearButton.textContent = 'Clear';
popup.style.display = 'none';
frameIcon.style.opacity = '0.7';
}, 1500);
});
document.body.appendChild(popup);
}
// Initialize
function init() {
setBackground(savedUrl);
createFrameIcon();
}
// Start when page loads
if (document.readyState === 'complete') {
init();
} else {
window.addEventListener('load', init);
}
})();