Manual blur anywhere. Client-side.
// ==UserScript==
// @name Universal Manual Blur
// @namespace https://greasyfork.org/en/users/1451802
// @version 1.0
// @icon https://www.svgrepo.com/show/416283/blur-drop-water.svg
// @author NormalRandomPeople (https://github.com/NormalRandomPeople)
// @description Manual blur anywhere. Client-side.
// @match *://*/*
// @grant GM_addStyle
// @run-at document-idle
// @compatible chrome
// @compatible firefox
// @compatible opera
// @compatible edge
// @compatible brave
// @license MIT
// ==/UserScript==
(function () {
'use strict';
const DEFAULT_SLIDER_VALUE = 40;
const REGION_BG_MIN_ALPHA = 0.02;
const UI_ZINDEX = 2147483647;
const HANDLE_SIZE = 12;
const css = `
.umb-toolbar {
position: fixed;
right: 12px;
bottom: 12px;
z-index: ${UI_ZINDEX};
background: rgba(16,16,16,0.88);
color: #fff;
border-radius: 10px;
padding: 8px;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
display:flex;
gap:8px;
align-items:center;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
backdrop-filter: blur(6px);
transition: box-shadow .18s ease, transform .12s linear, background .18s ease;
}
.umb-toolbar .umb-toggle-edit {
transition: box-shadow .18s ease, transform .12s linear;
}
.umb-toolbar.umb-editing .umb-toggle-edit {
box-shadow: 0 4px 18px rgba(255,60,60,0.28), inset 0 0 6px rgba(255,60,60,0.06);
transform: translateY(-1px);
border-radius: 6px;
}
.umb-toolbar button, .umb-toolbar select {
background:#222; color:#fff; border: none; padding:6px 8px; border-radius:6px; cursor:pointer;
}
.umb-toolbar input[type=range] { width:140px; }
.umb-help { font-size:12px; color:#ddd; margin-left:8px; }
.umb-toolbar.umb-collapsed {
width:44px;
height:44px;
padding:6px;
gap:0;
justify-content:center;
}
.umb-toolbar.umb-collapsed > *:not(.umb-toggle-collapse) { display:none; }
.umb-toggle-collapse { font-weight:700; padding:6px 8px; }
.umb-overlay {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: ${UI_ZINDEX - 1};
}
.umb-region {
position: absolute;
box-sizing: border-box;
background: rgba(255,255,255,${REGION_BG_MIN_ALPHA});
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 2px dashed rgba(255,255,255,0.6);
pointer-events: none;
overflow: visible;
}
.umb-region.ellipse { border-radius: 50%; }
.umb-region.editing { border-style: solid; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.umb-handle {
position: absolute;
width: ${HANDLE_SIZE}px;
height: ${HANDLE_SIZE}px;
background: #fff;
border-radius: 3px;
border: 1px solid #333;
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
transform: translate(-50%,-50%);
cursor: nwse-resize;
z-index: ${UI_ZINDEX + 1};
}
.umb-handle.hidden { display: none; }
.umb-bubble {
position: fixed;
z-index: ${UI_ZINDEX + 2};
background: rgba(0,0,0,0.88);
color: #fff;
padding:8px 10px;
border-radius:8px;
font-size:13px;
pointer-events: auto;
max-width: 320px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.umb-bubble small { display:block; color:#bbb; margin-top:6px; font-size:12px; }
`;
try { GM_addStyle(css); } catch (e) {
const s = document.createElement('style'); s.textContent = css; document.head.appendChild(s);
}
function mapSliderToBlurAndAlpha(sliderValue) {
const v = Math.max(0, Math.min(100, Number(sliderValue) || 0));
const blurPx = Math.round(Math.pow(v / 100, 1.1) * 90);
const alpha = Math.min(0.65, Math.max(REGION_BG_MIN_ALPHA, 0.02 + blurPx / 180));
return { blurPx, alpha };
}
const toolbar = document.createElement('div');
toolbar.className = 'umb-toolbar';
toolbar.innerHTML = `
<button class="umb-toggle-collapse" id="umb-collapse-btn">⏵</button>
<button class="umb-toggle-edit" id="umb-toggle-edit">Enter edit</button>
<button id="umb-new-rect">New rectangle</button>
<button id="umb-new-ellipse">New ellipse</button>
<label class="umb-tag">Blur: <input id="umb-global-blur" type="range" min="0" max="100" value="${DEFAULT_SLIDER_VALUE}" /></label>
<button id="umb-clear-all">Clear all</button>
<button id="umb-help-btn">Help</button>
`;
document.body.appendChild(toolbar);
const btnEdit = toolbar.querySelector('#umb-toggle-edit');
const btnNewRect = toolbar.querySelector('#umb-new-rect');
const btnNewEllipse = toolbar.querySelector('#umb-new-ellipse');
const inputGlobalBlur = toolbar.querySelector('#umb-global-blur');
const btnClear = toolbar.querySelector('#umb-clear-all');
const btnHelp = toolbar.querySelector('#umb-help-btn');
const btnCollapse = toolbar.querySelector('#umb-collapse-btn');
const overlay = document.createElement('div');
overlay.className = 'umb-overlay';
overlay.style.top = '0px';
overlay.style.left = '0px';
document.body.appendChild(overlay);
function updateOverlaySize() {
overlay.style.width = Math.max(document.documentElement.scrollWidth, window.innerWidth) + 'px';
overlay.style.height = Math.max(document.documentElement.scrollHeight, window.innerHeight) + 'px';
}
window.addEventListener('resize', updateOverlaySize);
window.addEventListener('scroll', updateOverlaySize);
const mo = new MutationObserver(updateOverlaySize);
mo.observe(document.documentElement, { childList: true, subtree: true, attributes: true });
updateOverlaySize();
let regions = [];
let editing = false;
let selectedRegion = null;
let isPointerDown = false;
let drawMode = null;
let drawStart = null;
let perRegionBubble = null;
let helpBubble = null;
function createRegion({ left = 100, top = 100, width = 240, height = 120, sliderValue = DEFAULT_SLIDER_VALUE, shape = 'rect' } = {}) {
const el = document.createElement('div');
el.className = 'umb-region' + (shape === 'ellipse' ? ' ellipse' : '');
el.style.left = left + 'px';
el.style.top = top + 'px';
el.style.width = width + 'px';
el.style.height = height + 'px';
el.style.pointerEvents = editing ? 'auto' : 'none';
el.style.zIndex = UI_ZINDEX - 0;
overlay.appendChild(el);
const region = { el, left, top, width, height, sliderValue, shape, handles: null };
applyMappedStyleToRegion(region);
el.addEventListener('pointerdown', regionPointerDown);
el.addEventListener('dblclick', () => {
region.shape = region.shape === 'rect' ? 'ellipse' : 'rect';
el.classList.toggle('ellipse', region.shape === 'ellipse');
applyMappedStyleToRegion(region);
});
regions.push(region);
return region;
}
function applyMappedStyleToRegion(region) {
const { blurPx, alpha } = mapSliderToBlurAndAlpha(region.sliderValue);
region.el.style.left = region.left + 'px';
region.el.style.top = region.top + 'px';
region.el.style.width = Math.max(2, region.width) + 'px';
region.el.style.height = Math.max(2, region.height) + 'px';
region.el.style.background = `rgba(255,255,255,${alpha})`;
if (blurPx === 0) {
region.el.style.backdropFilter = 'none';
region.el.style.webkitBackdropFilter = 'none';
} else {
region.el.style.backdropFilter = `blur(${blurPx}px)`;
region.el.style.webkitBackdropFilter = `blur(${blurPx}px)`;
}
region.el.classList.toggle('ellipse', region.shape === 'ellipse');
}
function setGlobalBlurToRegions(sliderValue) {
regions.forEach(r => { r.sliderValue = sliderValue; applyMappedStyleToRegion(r); });
}
function selectRegion(region) {
if (selectedRegion && selectedRegion !== region) deselectRegion(selectedRegion);
selectedRegion = region;
if (!region) return;
region.el.classList.add('editing');
addHandles(region);
showPerRegionBubble(region);
}
function deselectRegion(region) {
if (!region) return;
region.el.classList.remove('editing');
removeHandles(region);
hidePerRegionBubble();
if (selectedRegion === region) selectedRegion = null;
}
function addHandles(region) {
removeHandles(region);
const pos = ['nw','n','ne','e','se','s','sw','w'];
region.handles = {};
pos.forEach(p => {
const h = document.createElement('div');
h.className = 'umb-handle';
h.dataset.pos = p;
h.style.pointerEvents = editing ? 'auto' : 'none';
overlay.appendChild(h);
region.handles[p] = h;
h.addEventListener('pointerdown', handlePointerDown);
});
positionHandles(region);
}
function removeHandles(region) {
if (!region || !region.handles) return;
for (const k in region.handles) {
const h = region.handles[k];
if (h && h.parentNode) h.parentNode.removeChild(h);
}
region.handles = null;
}
function positionHandles(region) {
if (!region.handles) return;
const x = region.left, y = region.top, w = region.width, h = region.height;
const centers = { nw: [x, y], n: [x + w/2, y], ne: [x + w, y], e: [x + w, y + h/2], se: [x + w, y + h], s: [x + w/2, y + h], sw: [x, y + h], w: [x, y + h/2] };
for (const p in centers) {
const [cx, cy] = centers[p];
const el = region.handles[p];
el.style.left = (cx - window.scrollX) + 'px';
el.style.top = (cy - window.scrollY) + 'px';
el.style.display = editing ? '' : 'none';
el.style.pointerEvents = editing ? 'auto' : 'none';
el.style.position = 'fixed';
}
}
let activeAction = null;
overlay.addEventListener('pointerdown', (ev) => {
if (!editing) return;
if (ev.target !== overlay) return;
if (!drawMode) return;
isPointerDown = true;
const docX = ev.pageX, docY = ev.pageY;
drawStart = { x: docX, y: docY };
const region = createRegion({ left: docX, top: docY, width: 2, height: 2, sliderValue: Number(inputGlobalBlur.value), shape: drawMode === 'ellipse' ? 'ellipse' : 'rect' });
activeAction = { type: 'draw', region, startX: docX, startY: docY };
selectRegion(region);
ev.preventDefault();
});
function regionPointerDown(ev) {
if (!editing) return;
ev.stopPropagation();
isPointerDown = true;
const el = ev.currentTarget;
const region = regions.find(r => r.el === el);
if (!region) return;
selectRegion(region);
const docX = ev.pageX, docY = ev.pageY;
activeAction = { type: 'move', region, startX: docX, startY: docY, origLeft: region.left, origTop: region.top };
el.setPointerCapture(ev.pointerId);
ev.preventDefault();
}
function handlePointerDown(ev) {
if (!editing) return;
ev.stopPropagation();
isPointerDown = true;
const handle = ev.currentTarget;
const region = regions.find(r => r.handles && Object.values(r.handles).includes(handle));
if (!region) return;
selectRegion(region);
activeAction = { type: 'resize', region, handlePos: handle.dataset.pos, startX: ev.pageX, startY: ev.pageY, orig: { left: region.left, top: region.top, width: region.width, height: region.height } };
handle.setPointerCapture(ev.pointerId);
ev.preventDefault();
}
window.addEventListener('pointermove', (ev) => {
if (!editing || !isPointerDown || !activeAction) return;
const a = activeAction;
const dx = ev.pageX - a.startX, dy = ev.pageY - a.startY;
if (a.type === 'draw') {
const left = Math.min(a.startX, ev.pageX);
const top = Math.min(a.startY, ev.pageY);
const w = Math.max(2, Math.abs(ev.pageX - a.startX));
const h = Math.max(2, Math.abs(ev.pageY - a.startY));
a.region.left = left; a.region.top = top; a.region.width = w; a.region.height = h;
applyMappedStyleToRegion(a.region);
positionHandles(a.region);
} else if (a.type === 'move') {
a.region.left = a.origLeft + dx; a.region.top = a.origTop + dy;
applyMappedStyleToRegion(a.region);
positionHandles(a.region);
} else if (a.type === 'resize') {
const orig = a.orig;
let { left, top, width, height } = orig;
const minSize = 6; const hp = a.handlePos;
if (hp.includes('n')) { const newTop = top + dy; const newHeight = height - dy; if (newHeight > minSize) { top = newTop; height = newHeight; } }
if (hp.includes('s')) { const newHeight = height + dy; if (newHeight > minSize) { height = newHeight; } }
if (hp.includes('w')) { const newLeft = left + dx; const newWidth = width - dx; if (newWidth > minSize) { left = newLeft; width = newWidth; } }
if (hp.includes('e')) { const newWidth = width + dx; if (newWidth > minSize) { width = newWidth; } }
a.region.left = left; a.region.top = top; a.region.width = width; a.region.height = height;
applyMappedStyleToRegion(a.region);
positionHandles(a.region);
}
ev.preventDefault();
});
window.addEventListener('pointerup', (ev) => {
if (!editing) return;
if (!isPointerDown) return;
isPointerDown = false;
if (activeAction && activeAction.type === 'draw') {
const r = activeAction.region;
if (r.width < 6 || r.height < 6) removeRegion(r);
else { applyMappedStyleToRegion(r); positionHandles(r); positionPerRegionBubble(r); }
} else if (activeAction && activeAction.type === 'move') {
if (activeAction.region) positionPerRegionBubble(activeAction.region);
} else if (activeAction && activeAction.type === 'resize') {
if (activeAction.region) positionPerRegionBubble(activeAction.region);
}
if (activeAction && activeAction.region && activeAction.region.el) {
try { activeAction.region.el.releasePointerCapture(ev.pointerId); } catch (e) {}
}
activeAction = null;
});
function removeRegion(region) {
if (!region) return;
if (region.el && region.el.parentNode) region.el.parentNode.removeChild(region.el);
removeHandles(region);
if (selectedRegion === region) selectedRegion = null;
regions = regions.filter(r => r !== region);
hidePerRegionBubble();
}
window.addEventListener('keydown', (ev) => {
if (ev.key === 'Escape') {
if (editing) toggleEdit(false);
}
if ((ev.key === 'Delete' || ev.key === 'Backspace') && selectedRegion) {
removeRegion(selectedRegion);
}
if ((ev.key === '+' || ev.key === '=') && selectedRegion) {
selectedRegion.sliderValue = Math.min(100, (selectedRegion.sliderValue || DEFAULT_SLIDER_VALUE) + 5);
applyMappedStyleToRegion(selectedRegion);
updatePerRegionBubbleSlider(selectedRegion);
}
if ((ev.key === '-' || ev.key === '_') && selectedRegion) {
selectedRegion.sliderValue = Math.max(0, (selectedRegion.sliderValue || DEFAULT_SLIDER_VALUE) - 5);
applyMappedStyleToRegion(selectedRegion);
updatePerRegionBubbleSlider(selectedRegion);
}
});
function toggleEdit(state = !editing) {
editing = state;
overlay.style.pointerEvents = editing ? 'auto' : 'none';
regions.forEach(r => {
r.el.style.pointerEvents = editing ? 'auto' : 'none';
if (r.handles) {
for (const k in r.handles) {
r.handles[k].style.display = editing ? '' : 'none';
r.handles[k].style.pointerEvents = editing ? 'auto' : 'none';
}
}
});
btnEdit.textContent = editing ? 'Exit edit' : 'Enter edit';
if (editing) {
toolbar.classList.add('umb-editing');
btnCollapse.title = 'Collapse toolbar (you are in edit mode)';
} else {
toolbar.classList.remove('umb-editing');
btnCollapse.title = 'Collapse toolbar';
}
if (!editing && selectedRegion) deselectRegion(selectedRegion);
if (helpBubble) positionHelpBubble();
}
btnEdit.addEventListener('click', () => toggleEdit(!editing));
btnNewRect.addEventListener('click', () => {
const left = window.scrollX + (window.innerWidth - 320) / 2;
const top = window.scrollY + (window.innerHeight - 160) / 2;
const r = createRegion({ left, top, width: 320, height: 160, sliderValue: Number(inputGlobalBlur.value), shape: 'rect' });
applyMappedStyleToRegion(r); positionHandles(r); selectRegion(r);
if (!editing) toggleEdit(true);
});
btnNewEllipse.addEventListener('click', () => {
const left = window.scrollX + (window.innerWidth - 240) / 2;
const top = window.scrollY + (window.innerHeight - 240) / 2;
const r = createRegion({ left, top, width: 240, height: 240, sliderValue: Number(inputGlobalBlur.value), shape: 'ellipse' });
applyMappedStyleToRegion(r); positionHandles(r); selectRegion(r);
if (!editing) toggleEdit(true);
});
inputGlobalBlur.addEventListener('input', () => {
const v = Number(inputGlobalBlur.value);
setGlobalBlurToRegions(v);
});
btnClear.addEventListener('click', () => {
if (!confirm('Clear all blur regions?')) return;
for (const r of [...regions]) removeRegion(r);
});
function showPerRegionBubble(region) {
hidePerRegionBubble();
perRegionBubble = document.createElement('div');
perRegionBubble.className = 'umb-bubble';
perRegionBubble.innerHTML = `
<div><strong>Region</strong></div>
<div style="margin-top:8px;">Blur: <input id="umb-region-blur" type="range" min="0" max="100" value="${region.sliderValue}" /></div>
<small>Double-click shape to toggle rect/ellipse • Drag to move • Handles to resize</small>
`;
document.body.appendChild(perRegionBubble);
const slider = perRegionBubble.querySelector('#umb-region-blur');
slider.addEventListener('input', () => {
region.sliderValue = Number(slider.value);
applyMappedStyleToRegion(region);
});
function positionBubble() {
if (!perRegionBubble || !region) return;
const vx = region.left - window.scrollX;
const vy = region.top - window.scrollY;
const bubbleW = perRegionBubble.offsetWidth || 220;
const bubbleH = perRegionBubble.offsetHeight || 80;
let left = vx + region.width + 12;
let top = vy;
if (left + bubbleW > window.innerWidth - 12) { left = vx - bubbleW - 12; }
if (left < 12) left = 12;
if (top + bubbleH > window.innerHeight - 12) top = Math.max(12, window.innerHeight - bubbleH - 12);
perRegionBubble.style.left = left + 'px';
perRegionBubble.style.top = top + 'px';
}
positionBubble();
window.addEventListener('scroll', positionBubble);
window.addEventListener('resize', positionBubble);
perRegionBubble._positionHandler = positionBubble;
}
function updatePerRegionBubbleSlider(region) {
if (!perRegionBubble) return;
const slider = perRegionBubble.querySelector('#umb-region-blur');
if (slider) slider.value = region.sliderValue;
}
function hidePerRegionBubble() {
if (!perRegionBubble) return;
window.removeEventListener('scroll', perRegionBubble._positionHandler);
window.removeEventListener('resize', perRegionBubble._positionHandler);
perRegionBubble.remove();
perRegionBubble = null;
}
function positionPerRegionBubble(region) {
if (!perRegionBubble || !region) return;
const vx = region.left - window.scrollX;
const vy = region.top - window.scrollY;
const bubbleW = perRegionBubble.offsetWidth || 220;
const bubbleH = perRegionBubble.offsetHeight || 80;
let left = vx + region.width + 12;
let top = vy;
if (left + bubbleW > window.innerWidth - 12) { left = vx - bubbleW - 12; }
if (left < 12) left = 12;
if (top + bubbleH > window.innerHeight - 12) top = Math.max(12, window.innerHeight - bubbleH - 12);
perRegionBubble.style.left = left + 'px';
perRegionBubble.style.top = top + 'px';
}
btnCollapse.addEventListener('click', () => {
const collapsed = toolbar.classList.toggle('umb-collapsed');
btnCollapse.textContent = collapsed ? '⏴' : '⏵';
if (collapsed && helpBubble) hideHelpBubble();
if (!collapsed && helpBubble) positionHelpBubble();
});
btnHelp.addEventListener('click', () => {
if (helpBubble) { hideHelpBubble(); return; }
helpBubble = document.createElement('div');
helpBubble.className = 'umb-bubble';
helpBubble.innerHTML = `
<strong>Universal Manual Blur - Help</strong>
<div style="margin-top:6px; color:#ddd; font-size:13px;">
• Enter edit to create and edit blur regions (New rectangle / New ellipse).<br/>
• Drag on empty page (in edit + after New) to draw a region.<br/>
• Drag region to move; use handles to resize; double-click to toggle rect/ellipse.<br/>
• Use the global slider or per-region slider (visible when a region is selected).<br/>
• Exit edit to interact with the page; regions remain but are non-interactive.<br/>
• Right-click the toolbar to copy a JSON snapshot of regions.<br/>
• Ctrl+Shift+e to paste/import a snapshot<br/>
</div>
`;
document.body.appendChild(helpBubble);
positionHelpBubble();
window.addEventListener('scroll', positionHelpBubble);
window.addEventListener('resize', positionHelpBubble);
});
function positionHelpBubble() {
if (!helpBubble) return;
const rect = toolbar.getBoundingClientRect();
const bw = helpBubble.offsetWidth || 320;
let left = Math.max(8, rect.left + rect.width/2 - bw/2);
let top = rect.top - helpBubble.offsetHeight - 10;
if (toolbar.classList.contains('umb-collapsed') || top < 8) {
top = rect.bottom + 10;
}
helpBubble.style.left = left + 'px';
helpBubble.style.top = top + 'px';
}
function hideHelpBubble() {
if (!helpBubble) return;
window.removeEventListener('scroll', positionHelpBubble);
window.removeEventListener('resize', positionHelpBubble);
helpBubble.remove();
helpBubble = null;
}
function updateAllHandles() {
regions.forEach(r => positionHandles(r));
if (perRegionBubble && selectedRegion) perRegionBubble._positionHandler && perRegionBubble._positionHandler();
}
window.addEventListener('scroll', updateAllHandles);
window.addEventListener('resize', updateAllHandles);
toolbar.addEventListener('contextmenu', (ev) => {
ev.preventDefault();
const exportData = regions.map(r => ({ left: r.left, top: r.top, width: r.width, height: r.height, sliderValue: r.sliderValue, shape: r.shape }));
prompt('Copy JSON snapshot (paste with Ctrl+Shift+e):', JSON.stringify(exportData));
});
window.addEventListener('keydown', (ev) => {
if (ev.ctrlKey && ev.shiftKey && ev.key.toLowerCase() === 'e') {
const raw = prompt('Paste JSON snapshot to import blur regions:');
if (!raw) return;
try {
const arr = JSON.parse(raw);
if (!Array.isArray(arr)) throw new Error('Not an array');
for (const r of [...regions]) removeRegion(r);
for (const it of arr) {
const rr = createRegion({ left: it.left, top: it.top, width: it.width, height: it.height, sliderValue: it.sliderValue || DEFAULT_SLIDER_VALUE, shape: it.shape || 'rect' });
applyMappedStyleToRegion(rr); positionHandles(rr);
}
alert('Imported ' + arr.length + ' regions.');
} catch (e) {
alert('Import failed: ' + e.message);
}
}
});
function supportsBackdropFilter() {
const test = document.createElement('div');
test.style.webkitBackdropFilter = 'blur(2px)';
test.style.backdropFilter = 'blur(2px)';
return (test.style.webkitBackdropFilter.length > 0) || (test.style.backdropFilter.length > 0);
}
if (!supportsBackdropFilter()) {
const warn = document.createElement('div');
warn.style.position = 'fixed';
warn.style.left = '12px';
warn.style.bottom = '12px';
warn.style.zIndex = UI_ZINDEX;
warn.style.background = 'rgba(200,60,60,0.95)';
warn.style.color = '#fff';
warn.style.padding = '8px 10px';
warn.style.borderRadius = '8px';
warn.style.fontFamily = 'system-ui, Arial';
warn.style.fontSize = '13px';
warn.textContent = 'Notice: your browser may not support backdrop-filter; blur may not appear. Use Chromium, Edge or Firefox for best results.';
document.body.appendChild(warn);
setTimeout(() => { try { warn.remove(); } catch (e) {} }, 12000);
}
window.addEventListener('beforeunload', () => {
try { overlay.remove(); toolbar.remove(); } catch (e) {}
});
})();