109 lines
3.6 KiB
JavaScript
109 lines
3.6 KiB
JavaScript
|
// ==UserScript==
|
||
|
|
// @name Xilly - Custom Background
|
||
|
|
// @namespace http://experimenting.website/
|
||
|
|
// @version 0.1
|
||
|
|
// @description Change X background to image
|
||
|
|
// @author EXPERIMENTING
|
||
|
|
// @match https://x.com/*
|
||
|
|
// @grant GM_addStyle
|
||
|
|
// @grant GM_setValue
|
||
|
|
// @grant GM_getValue
|
||
|
|
// @grant GM_registerMenuCommand
|
||
|
|
// ==/UserScript==
|
||
|
|
|
||
|
|
(function() {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
function setBackground(imageUrl) {
|
||
|
|
const css = `
|
||
|
|
body {
|
||
|
|
background-image: url('${imageUrl}') !important;
|
||
|
|
background-size: cover !important;
|
||
|
|
background-repeat: no-repeat !important;
|
||
|
|
background-attachment: fixed !important;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
GM_addStyle(css);
|
||
|
|
}
|
||
|
|
|
||
|
|
const savedImageUrl = GM_getValue('backgroundImageUrl', '');
|
||
|
|
if (savedImageUrl) {
|
||
|
|
setBackground(savedImageUrl);
|
||
|
|
}
|
||
|
|
|
||
|
|
function showDialog() {
|
||
|
|
let existingDialog = document.getElementById('background-dialog');
|
||
|
|
if (existingDialog) {
|
||
|
|
existingDialog.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
const dialog = document.createElement('div');
|
||
|
|
dialog.id = 'background-dialog';
|
||
|
|
dialog.style.position = 'fixed';
|
||
|
|
dialog.style.top = '10px';
|
||
|
|
dialog.style.right = '10px';
|
||
|
|
dialog.style.zIndex = '10000';
|
||
|
|
dialog.style.backgroundColor = 'black';
|
||
|
|
dialog.style.padding = '10px';
|
||
|
|
dialog.style.border = '1px solid black';
|
||
|
|
dialog.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';
|
||
|
|
|
||
|
|
const fromLocalBtn = document.createElement('button');
|
||
|
|
fromLocalBtn.textContent = 'From Local';
|
||
|
|
fromLocalBtn.style.marginRight = '10px';
|
||
|
|
fromLocalBtn.addEventListener('click', fromLocal);
|
||
|
|
|
||
|
|
const fromUrlBtn = document.createElement('button');
|
||
|
|
fromUrlBtn.textContent = 'From URL';
|
||
|
|
fromUrlBtn.addEventListener('click', fromUrl);
|
||
|
|
|
||
|
|
const closeBtn = document.createElement('button');
|
||
|
|
closeBtn.textContent = 'X';
|
||
|
|
closeBtn.style.position = 'absolute';
|
||
|
|
closeBtn.style.top = '5px';
|
||
|
|
closeBtn.style.right = '5px';
|
||
|
|
closeBtn.style.background = 'none';
|
||
|
|
closeBtn.style.border = 'none';
|
||
|
|
closeBtn.style.fontSize = '16px';
|
||
|
|
closeBtn.style.cursor = 'pointer';
|
||
|
|
closeBtn.addEventListener('click', () => dialog.remove());
|
||
|
|
|
||
|
|
dialog.appendChild(closeBtn);
|
||
|
|
dialog.appendChild(fromLocalBtn);
|
||
|
|
dialog.appendChild(fromUrlBtn);
|
||
|
|
document.body.appendChild(dialog);
|
||
|
|
}
|
||
|
|
|
||
|
|
function fromLocal() {
|
||
|
|
const input = document.createElement('input');
|
||
|
|
input.type = 'file';
|
||
|
|
input.accept = 'image/*';
|
||
|
|
input.onchange = (event) => {
|
||
|
|
const file = event.target.files[0];
|
||
|
|
if (file) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = (e) => {
|
||
|
|
const imageUrl = e.target.result;
|
||
|
|
setBackground(imageUrl);
|
||
|
|
GM_setValue('backgroundImageUrl', imageUrl);
|
||
|
|
const dialog = document.getElementById('background-dialog');
|
||
|
|
if (dialog) dialog.remove();
|
||
|
|
};
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
input.click();
|
||
|
|
}
|
||
|
|
|
||
|
|
function fromUrl() {
|
||
|
|
const url = prompt('Enter image URL:');
|
||
|
|
if (url) {
|
||
|
|
setBackground(url);
|
||
|
|
GM_setValue('backgroundImageUrl', url);
|
||
|
|
const dialog = document.getElementById('background-dialog');
|
||
|
|
if (dialog) dialog.remove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
GM_registerMenuCommand('Set Background', showDialog);
|
||
|
|
})();
|