Applies custom styles to a selected div on YouTube.
// ==UserScript==
// @name YouTube Floating Comment Styler
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Applies custom styles to a selected div on YouTube.
// @author reaverxai
// @match https://www.youtube.com/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
let selecting = false;
let selectedDiv = null;
let originalStyles = {};
// Create the selector button
const selectorButton = document.createElement('button');
selectorButton.textContent = 'Select Div';
selectorButton.style.position = 'fixed';
selectorButton.style.bottom = '10px';
selectorButton.style.right = '10px';
selectorButton.style.zIndex = '9999999999999999';
selectorButton.style.padding = '10px';
selectorButton.style.backgroundColor = '#f44336';
selectorButton.style.color = 'white';
selectorButton.style.border = 'none';
selectorButton.style.borderRadius = '5px';
selectorButton.style.cursor = 'pointer';
document.body.appendChild(selectorButton);
// Function to apply the styles
const applyStyles = (element) => {
const styles = {
position: 'fixed',
background: 'white',
zIndex: '1999999999999999',
top: '1px',
right: '1px',
width: '39%',
height: '100%'
};
for (const property in styles) {
originalStyles[property] = element.style[property];
element.style[property] = styles[property];
}
};
// Function to remove the styles
const removeStyles = (element) => {
for (const property in originalStyles) {
element.style[property] = originalStyles[property];
}
originalStyles = {};
};
// Event listener for the selector button
selectorButton.addEventListener('click', () => {
if (selectedDiv) {
removeStyles(selectedDiv);
selectedDiv = null;
selectorButton.textContent = 'Select Div';
selectorButton.style.backgroundColor = '#f44336';
return;
}
selecting = true;
selectorButton.textContent = 'Click on a div to apply styles';
document.body.style.cursor = 'crosshair';
});
// Event listener for the document to select an element
document.addEventListener('click', (e) => {
if (selecting) {
e.preventDefault();
e.stopPropagation();
const target = e.target;
if (target && target.tagName.toLowerCase() === 'div') {
selectedDiv = target;
applyStyles(selectedDiv);
selecting = false;
selectorButton.textContent = 'Remove Styles';
selectorButton.style.backgroundColor = '#4CAF50';
document.body.style.cursor = 'default';
} else if (target && target.tagName.toLowerCase() !== 'button') {
alert('Please click on a div element.');
}
}
}, true); // Use capturing to intercept the click early
})();