Click-to-block websites, pages, or prefixes — for digital well-being. Supports timed or permanent blocks.
// ==UserScript==
// @name Website and Page Blocker
// @namespace https://greasyfork.org/en/users/1483582-merryberries
// @version 2.0
// @license MIT
// @author MerryBerries
// @description Click-to-block websites, pages, or prefixes — for digital well-being. Supports timed or permanent blocks.
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function () {
'use strict';
const hostname = location.hostname;
const fullUrl = location.href;
const pathname = location.pathname;
const now = Date.now();
let siteBlockList = GM_getValue('siteBlockList', {});
let pageBlockList = GM_getValue('pageBlockList', {});
let pagePrefixBlockList = GM_getValue('pagePrefixBlockList', {});
// === Block check logic ===
function blockPage(message) {
document.documentElement.innerHTML = `
<div style="font-size: 2em; color: red; text-align: center; margin-top: 20%;">
${message}
</div>`;
document.title = "Blocked";
}
if (siteBlockList[hostname]) {
const until = siteBlockList[hostname];
if (until === -1 || now < until) {
blockPage(`🚫 The entire site (${hostname}) is blocked.`);
return;
} else {
delete siteBlockList[hostname];
GM_setValue('siteBlockList', siteBlockList);
}
}
const pageKey = pageBlockList[fullUrl] ? fullUrl : pageBlockList[pathname] ? pathname : null;
if (pageKey) {
const until = pageBlockList[pageKey];
if (until === -1 || now < until) {
blockPage(`🚫 This page is blocked.`);
return;
} else {
delete pageBlockList[pageKey];
GM_setValue('pageBlockList', pageBlockList);
}
}
for (const prefix in pagePrefixBlockList) {
const until = pagePrefixBlockList[prefix];
if ((until === -1 || now < until) && fullUrl.startsWith(prefix)) {
blockPage(`🚫 This group of pages is blocked.\n(Matched prefix: ${prefix})`);
return;
}
if (until !== -1 && now >= until) {
delete pagePrefixBlockList[prefix];
GM_setValue('pagePrefixBlockList', pagePrefixBlockList);
}
}
// === Draggable floating button ===
const mainBtn = document.createElement('button');
mainBtn.innerText = '⚙ Block options';
// Get saved position or use default
const savedPosition = GM_getValue('buttonPosition', { top: '10px', right: '10px' });
Object.assign(mainBtn.style, {
position: 'fixed',
top: savedPosition.top,
right: savedPosition.right,
left: savedPosition.left || 'auto',
bottom: savedPosition.bottom || 'auto',
zIndex: 9999,
background: '#f44',
color: '#fff',
border: 'none',
padding: '6px 12px',
borderRadius: '6px',
fontSize: '14px',
cursor: 'move',
userSelect: 'none',
opacity: '0.9',
transition: 'opacity 0.2s ease'
});
// Add hover effect
mainBtn.addEventListener('mouseenter', () => {
mainBtn.style.opacity = '1';
mainBtn.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)';
});
mainBtn.addEventListener('mouseleave', () => {
mainBtn.style.opacity = '0.9';
mainBtn.style.boxShadow = 'none';
});
document.body.appendChild(mainBtn);
// === Drag functionality ===
let isDragging = false;
let dragOffset = { x: 0, y: 0 };
let dragStartTime = 0;
mainBtn.addEventListener('mousedown', (e) => {
isDragging = true;
dragStartTime = Date.now();
const rect = mainBtn.getBoundingClientRect();
dragOffset.x = e.clientX - rect.left;
dragOffset.y = e.clientY - rect.top;
mainBtn.style.cursor = 'grabbing';
mainBtn.style.opacity = '0.7';
// Prevent text selection during drag
document.body.style.userSelect = 'none';
e.preventDefault();
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const newX = e.clientX - dragOffset.x;
const newY = e.clientY - dragOffset.y;
// Keep button within viewport bounds
const maxX = window.innerWidth - mainBtn.offsetWidth;
const maxY = window.innerHeight - mainBtn.offsetHeight;
const clampedX = Math.max(0, Math.min(newX, maxX));
const clampedY = Math.max(0, Math.min(newY, maxY));
// Reset positioning properties
mainBtn.style.left = clampedX + 'px';
mainBtn.style.top = clampedY + 'px';
mainBtn.style.right = 'auto';
mainBtn.style.bottom = 'auto';
e.preventDefault();
});
document.addEventListener('mouseup', (e) => {
if (!isDragging) return;
isDragging = false;
mainBtn.style.cursor = 'move';
mainBtn.style.opacity = '0.9';
document.body.style.userSelect = '';
// Save position
const rect = mainBtn.getBoundingClientRect();
const position = {
left: rect.left + 'px',
top: rect.top + 'px',
right: 'auto',
bottom: 'auto'
};
GM_setValue('buttonPosition', position);
// If the drag was very short (< 200ms), treat it as a click
const dragDuration = Date.now() - dragStartTime;
if (dragDuration < 200) {
// Small delay to ensure drag state is reset
setTimeout(() => {
showMainMenu();
}, 10);
}
e.preventDefault();
});
// === Check if item already exists ===
function checkExistingBlock(type, key) {
let existing = null;
let timeText = '';
if (type === 'site' && siteBlockList[key]) {
existing = siteBlockList[key];
} else if (type === 'page' && pageBlockList[key]) {
existing = pageBlockList[key];
} else if (type === 'prefix' && pagePrefixBlockList[key]) {
existing = pagePrefixBlockList[key];
}
if (existing !== null) {
if (existing === -1) {
timeText = 'permanently';
} else if (existing > now) {
timeText = `until ${new Date(existing).toLocaleString()}`;
} else {
// Expired block, can be overwritten
return null;
}
return timeText;
}
return null;
}
// === Popup style with X button ===
function createPopup(title, buttons, showBlockList = false) {
const overlay = document.createElement('div');
Object.assign(overlay.style, {
position: 'fixed',
top: 0,
left: 0,
width: '100vw',
height: '100vh',
backgroundColor: 'rgba(0,0,0,0.4)',
zIndex: 10000,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
});
const box = document.createElement('div');
Object.assign(box.style, {
background: '#fff',
padding: '20px',
borderRadius: '10px',
textAlign: 'center',
minWidth: '300px',
maxWidth: showBlockList ? '90%' : '90%',
maxHeight: showBlockList ? '85vh' : 'auto',
fontSize: '16px',
position: 'relative',
overflow: showBlockList ? 'hidden' : 'visible',
display: 'flex',
flexDirection: 'column'
});
// X button
const closeBtn = document.createElement('button');
closeBtn.innerText = '×';
Object.assign(closeBtn.style, {
position: 'absolute',
top: '5px',
right: '10px',
background: 'none',
border: 'none',
fontSize: '24px',
cursor: 'pointer',
color: '#999',
padding: '0',
width: '30px',
height: '30px'
});
closeBtn.onclick = () => document.body.removeChild(overlay);
box.appendChild(closeBtn);
const titleEl = document.createElement('div');
titleEl.innerText = title;
titleEl.style.marginBottom = '15px';
titleEl.style.fontSize = '18px';
titleEl.style.marginRight = '40px'; // Space for X button
box.appendChild(titleEl);
if (showBlockList) {
createBlockListContent(box, overlay);
}
buttons.forEach(({ label, color, onClick }) => {
const btn = document.createElement('button');
btn.innerText = label;
Object.assign(btn.style, {
margin: '6px',
padding: '8px 14px',
fontSize: '14px',
backgroundColor: color,
color: '#fff',
border: 'none',
borderRadius: '6px',
cursor: 'pointer'
});
btn.onclick = () => {
document.body.removeChild(overlay);
onClick();
};
box.appendChild(btn);
});
overlay.appendChild(box);
document.body.appendChild(overlay);
}
// === Block list display with multi-select ===
function createBlockListContent(container, overlay) {
let selectedItems = new Set();
// Control buttons
const controlsDiv = document.createElement('div');
Object.assign(controlsDiv.style, {
marginBottom: '15px',
display: 'flex',
gap: '10px',
justifyContent: 'center',
flexWrap: 'wrap'
});
const selectAllBtn = document.createElement('button');
selectAllBtn.innerText = '☑ Select All';
Object.assign(selectAllBtn.style, {
padding: '6px 12px',
fontSize: '12px',
backgroundColor: '#3498db',
color: '#fff',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
});
const deselectAllBtn = document.createElement('button');
deselectAllBtn.innerText = '☐ Deselect All';
Object.assign(deselectAllBtn.style, {
padding: '6px 12px',
fontSize: '12px',
backgroundColor: '#95a5a6',
color: '#fff',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
});
const deleteSelectedBtn = document.createElement('button');
deleteSelectedBtn.innerText = '🗑 Delete Selected';
Object.assign(deleteSelectedBtn.style, {
padding: '6px 12px',
fontSize: '12px',
backgroundColor: '#e74c3c',
color: '#fff',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
});
const selectedCountSpan = document.createElement('span');
selectedCountSpan.innerText = '0 selected';
Object.assign(selectedCountSpan.style, {
fontSize: '12px',
color: '#666',
alignSelf: 'center'
});
controlsDiv.appendChild(selectAllBtn);
controlsDiv.appendChild(deselectAllBtn);
controlsDiv.appendChild(deleteSelectedBtn);
controlsDiv.appendChild(selectedCountSpan);
container.appendChild(controlsDiv);
// Scrollable list container
const listContainer = document.createElement('div');
Object.assign(listContainer.style, {
textAlign: 'left',
flex: '1',
overflow: 'auto',
border: '1px solid #ddd',
padding: '10px',
borderRadius: '5px',
minHeight: '200px'
});
let hasBlocks = false;
let allCheckboxes = [];
function updateSelectedCount() {
selectedCountSpan.innerText = `${selectedItems.size} selected`;
deleteSelectedBtn.style.backgroundColor = selectedItems.size > 0 ? '#e74c3c' : '#bdc3c7';
}
// Site blocks
if (Object.keys(siteBlockList).length > 0) {
hasBlocks = true;
const siteHeader = document.createElement('h4');
siteHeader.innerText = '🟥 Blocked Sites:';
siteHeader.style.color = '#c0392b';
listContainer.appendChild(siteHeader);
Object.entries(siteBlockList).forEach(([site, until]) => {
const { item, checkbox } = createSelectableBlockItem(site, until, 'site', selectedItems, updateSelectedCount);
allCheckboxes.push(checkbox);
listContainer.appendChild(item);
});
}
// Page blocks
if (Object.keys(pageBlockList).length > 0) {
hasBlocks = true;
const pageHeader = document.createElement('h4');
pageHeader.innerText = '🟨 Blocked Pages:';
pageHeader.style.color = '#f39c12';
pageHeader.style.marginTop = '15px';
listContainer.appendChild(pageHeader);
Object.entries(pageBlockList).forEach(([page, until]) => {
const { item, checkbox } = createSelectableBlockItem(page, until, 'page', selectedItems, updateSelectedCount);
allCheckboxes.push(checkbox);
listContainer.appendChild(item);
});
}
// Prefix blocks
if (Object.keys(pagePrefixBlockList).length > 0) {
hasBlocks = true;
const prefixHeader = document.createElement('h4');
prefixHeader.innerText = '🟦 Blocked Prefixes:';
prefixHeader.style.color = '#2980b9';
prefixHeader.style.marginTop = '15px';
listContainer.appendChild(prefixHeader);
Object.entries(pagePrefixBlockList).forEach(([prefix, until]) => {
const { item, checkbox } = createSelectableBlockItem(prefix, until, 'prefix', selectedItems, updateSelectedCount);
allCheckboxes.push(checkbox);
listContainer.appendChild(item);
});
}
if (!hasBlocks) {
listContainer.innerHTML = '<p style="text-align: center; color: #999;">No active blocks</p>';
controlsDiv.style.display = 'none';
}
container.appendChild(listContainer);
// Control button events
selectAllBtn.onclick = () => {
allCheckboxes.forEach(checkbox => {
checkbox.checked = true;
const key = checkbox.dataset.key;
const type = checkbox.dataset.type;
selectedItems.add(`${type}:${key}`);
});
updateSelectedCount();
};
deselectAllBtn.onclick = () => {
allCheckboxes.forEach(checkbox => {
checkbox.checked = false;
});
selectedItems.clear();
updateSelectedCount();
};
deleteSelectedBtn.onclick = () => {
if (selectedItems.size === 0) {
alert('No items selected');
return;
}
if (confirm(`Delete ${selectedItems.size} selected item(s)?`)) {
// Refresh the data from storage before deletion
siteBlockList = GM_getValue('siteBlockList', {});
pageBlockList = GM_getValue('pageBlockList', {});
pagePrefixBlockList = GM_getValue('pagePrefixBlockList', {});
selectedItems.forEach(item => {
const colonIndex = item.indexOf(':');
const type = item.substring(0, colonIndex);
const key = item.substring(colonIndex + 1);
if (type === 'site') {
delete siteBlockList[key];
GM_setValue('siteBlockList', siteBlockList);
} else if (type === 'page') {
delete pageBlockList[key];
GM_setValue('pageBlockList', pageBlockList);
} else if (type === 'prefix') {
delete pagePrefixBlockList[key];
GM_setValue('pagePrefixBlockList', pagePrefixBlockList);
}
});
document.body.removeChild(overlay);
location.reload();
}
};
updateSelectedCount();
}
// === Individual selectable block item ===
function createSelectableBlockItem(url, until, type, selectedItems, updateCallback) {
const item = document.createElement('div');
Object.assign(item.style, {
marginBottom: '8px',
padding: '8px',
backgroundColor: '#f9f9f9',
borderRadius: '4px',
display: 'flex',
alignItems: 'center',
gap: '10px'
});
// Checkbox
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.dataset.key = url;
checkbox.dataset.type = type;
Object.assign(checkbox.style, {
transform: 'scale(1.2)',
cursor: 'pointer'
});
checkbox.onchange = () => {
const itemKey = `${type}:${url}`;
if (checkbox.checked) {
selectedItems.add(itemKey);
} else {
selectedItems.delete(itemKey);
}
updateCallback();
};
// Info section
const info = document.createElement('div');
info.style.flex = '1';
info.style.wordBreak = 'break-all';
const timeText = until === -1 ? 'Permanent' :
until > now ? `Until ${new Date(until).toLocaleString()}` : 'Expired';
info.innerHTML = `
<div style="font-weight: bold; font-size: 14px;">${url}</div>
<div style="font-size: 12px; color: #666;">${timeText}</div>
`;
// Individual delete button
const removeBtn = document.createElement('button');
removeBtn.innerText = '🗑';
Object.assign(removeBtn.style, {
background: '#e74c3c',
color: '#fff',
border: 'none',
padding: '4px 8px',
borderRadius: '4px',
cursor: 'pointer',
fontSize: '12px'
});
removeBtn.onclick = () => {
if (confirm(`Remove block for: ${url}?`)) {
if (type === 'site') {
delete siteBlockList[url];
GM_setValue('siteBlockList', siteBlockList);
} else if (type === 'page') {
delete pageBlockList[url];
GM_setValue('pageBlockList', pageBlockList);
} else if (type === 'prefix') {
delete pagePrefixBlockList[url];
GM_setValue('pagePrefixBlockList', pagePrefixBlockList);
}
location.reload();
}
};
item.appendChild(checkbox);
item.appendChild(info);
item.appendChild(removeBtn);
return { item, checkbox };
}
// === Duration choices ===
function chooseDuration(callback) {
createPopup('⏱ How long to block?', [
{ label: '10 min', color: '#666', onClick: () => callback(10) },
{ label: '30 min', color: '#444', onClick: () => callback(30) },
{ label: '1 hour', color: '#222', onClick: () => callback(60) },
{ label: 'Permanent', color: '#000', onClick: () => callback(-1) }
]);
}
// === Main menu function ===
function showMainMenu() {
createPopup('🧱 What do you want to block?', [
{
label: '📋 View Block List',
color: '#8e44ad',
onClick: () => {
createPopup('📋 Current Block List', [], true);
}
},
{
label: '🟥 Entire Site',
color: '#c0392b',
onClick: () => {
const existing = checkExistingBlock('site', hostname);
if (existing) {
if (!confirm(`This site (${hostname}) is already blocked ${existing}.\n\nDo you want to update the block time?`)) {
return;
}
}
chooseDuration((minutes) => {
const until = minutes === -1 ? -1 : now + minutes * 60 * 1000;
siteBlockList[hostname] = until;
GM_setValue('siteBlockList', siteBlockList);
alert(`Site blocked ${minutes === -1 ? 'permanently' : `for ${minutes} minutes`}.`);
location.reload();
});
}
},
{
label: '🟨 This Page',
color: '#f39c12',
onClick: () => {
const existing = checkExistingBlock('page', fullUrl);
if (existing) {
if (!confirm(`This page is already blocked ${existing}.\n\nDo you want to update the block time?`)) {
return;
}
}
chooseDuration((minutes) => {
const until = minutes === -1 ? -1 : now + minutes * 60 * 1000;
pageBlockList[fullUrl] = until;
GM_setValue('pageBlockList', pageBlockList);
alert(`Page blocked ${minutes === -1 ? 'permanently' : `for ${minutes} minutes`}.`);
location.reload();
});
}
},
{
label: '🟦 Prefix Match',
color: '#2980b9',
onClick: () => {
const suggestedPrefix = fullUrl.split(/[?#]/)[0];
const input = prompt(`Enter prefix to block`, suggestedPrefix);
if (!input) return;
const existing = checkExistingBlock('prefix', input);
if (existing) {
if (!confirm(`This prefix (${input}) is already blocked ${existing}.\n\nDo you want to update the block time?`)) {
return;
}
}
chooseDuration((minutes) => {
const until = minutes === -1 ? -1 : now + minutes * 60 * 1000;
pagePrefixBlockList[input] = until;
GM_setValue('pagePrefixBlockList', pagePrefixBlockList);
alert(`Prefix "${input}" blocked ${minutes === -1 ? 'permanently' : `for ${minutes} minutes`}.`);
location.reload();
});
}
}
]);
}
// === Main click logic (separated from drag) ===
// Click handling is now done in the mouseup event to distinguish from drag
})();