Blurs inactive WhatsApp chats/messages, unblurs on hover, enables messaging without saving numbers, and toggles blur societfor unread messages.
// ==UserScript==
// @name WhatsApp Web Blur & Quick Message
// @namespace http://tampermonkey.net/
// @version 1.2.15
// @description Blurs inactive WhatsApp chats/messages, unblurs on hover, enables messaging without saving numbers, and toggles blur societfor unread messages.
// @author Noushad Bhuiyan
// @match https://web.whatsapp.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=whatsapp.com
// @grant GM_setValue
// @grant GM_getValue
// @license MIT
// ==/UserScript==
(() => {
// Load blur state for unread messages (default: true, blur enabled)
let blurUnread = GM_getValue('blurUnread', true);
// Data URLs for toggle icons
const toggleOffIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAArpJREFUWIXtl01IVFEUx3/nORpBKbpRyITSCJIUhAgiEMogKmwhCG6E0Ny4cBAU1I07cRb5hQulZbQQjISijQUSRAvRINyYtJIoU8ePFuOb++a0qHmOM85HjjOL6g8P3nvnP+/87j2He+/Avy5JZhgd1fy8PIpFKFKlUITT8byqbFkW39va5APA1JTmbG9zxXEo9nhYam2VlejfeOIkLc3NpVOVeqA8FEp9RMZQBzA2ppfX13kCVAHYNoyP6xTQ0t4uP+ICjIzoTVWmbZuC1NO6etvRIa8nJrQgEOBFKERZVLwR2AEehl9YkdHBQS01hmljKDAGjnC9BNjdpd0YyuJ4WoaG9PyhM6BKpzFHGnlYqwCOw6UEHlGlEvgcA+A43E8jOaq/4I1hLZFPZD/ulqC/X/ON4dwRpx5jwHG4BhAM8tQYNI5vsaKC+RgAoMQYJB0AY2jo69Oz/f0ybwxeYwhGxddUaW5sFMedjfBNT49eBd6nU4Lfmt3Y4M7kpAR7e7UqFKJZhBJVPorweGBANg6UI3zT1aW3gVfHAAAwK8IDn09WowPd3XoL8Pt8Mg8RTWgMJ1SPKT3UActerz5X5Z1lsQmUqXLXtrkO3AsbXQDbxpKkC/Mf6STQBDQ5zsGAyH7vuQCOc3BRyqREyIkBMCb5xpRRAMeBY+yBZADuYF2AYJAspQcR3P01sgR/sOn+jQDBIIEsAri5IpvQn60mVGUzBmBvD7+VpZXAsvDHAHg8fLNtlBQOqmlKA4H988CBZLW1ugKUZxhgeW5OLoYfok9EM6p0ZhhgJvIhGuBRKEQLpHUuTKQtj4fhyBcx9a6p0RsiPMsAxJYqDQsL8iYhAEB1tZ5RxQvUAxfi+VKQAp+AmZwchhcX5Uu0IemHKyv1FFACFAGFquQn8ouwA2wCfuDr0tL+v6D/Okw/AWuAfPZgEcTJAAAAAElFTkSuQmCC';
const toggleOnIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAA8lJREFUWIXFl09oHGUUwH9vNtWwRZKNRVBrDy2oSAvqJgqttSLYgif/EDyJeghJa1PFNJCWNqSFULZJqCEYU0GKHjy0gnrooV6MKB5iU6QqoYUUSSsFNdmoNWR33nzPw0ymk7BtliabPBiY771v5v3e9+d974NVFlmsw8mTVmPGfSLUmZER4Z5S/TyPX5qaZCypO3XKqlVpCALqRLjS3Cw/lwUwNGT1ztEiwi4z1pcZzOSePbJurjE4aK3AESCT6POT59HU0iLn5xRVyT+cPm2p69fpKxbZl4CbAX4H8tHzzy0Afph76e+3o6ocBhBhzIyrwBPA48C3AwO2o7U1hJgHcO0afcA7wKwI/cBX6TTnm5vFL3MU6O21x4KAg4Az4622NvkUoKfH1lZV8bEZrwEfAU+SiJJczupFGAEKzvFCR4d8X67TpORydlSEwyJ80t4ubyZtPT221ozfgHXOsbmjQ3715ozOsVsV8X3679Q5QBCwURV8n+8W2trb5T9VLqiCKhshMQWq7AQQ4cs7dQ7gHHkzMGNDKbsqG0RAhDyAB9DVZbWqrFdlZmKC0aUAqHJOFZzj7a4um7eDOjvtjSDgUVWmVBmBaA0cOGAPex6XgMvd3fLIUgDA5NAhvjFjBzAJfCDChBnbgdcJg97d3S1DcHMKMqpAuM2WKGJBYK86x+fAc0BnwqjAkVwudB4DFIvURu3ppQPAsWMyCfb8/v286Bw7RbgXGE+l+Oz4cbmU7FsF4PtURwtjdjkAQhHr7eUscPZ2vaoAnIvzgS0fQGlpbbU2Mw46xzODgzLmAaiSivZmUGkA3+dpVerM2AzRCKiu3AgEAUR5ghhgobKSUiwi0XqzGMD348gXrQ+WKqp4EYCLAVTDBlFmXBUAkZUBcC72cRPAjNloHVRXGkA19OF5FGKAQoF8NAKZW365fAB10etUDADko7NgJQAyEB7bEM35jRv8GSWiB7NZW1Mp542Ndpcq96tCocBfMcDwsEyrclWVdG0t9ZUCmJykXpW0KhPDwzIdAwAEAV8HARSLvFQpAFVeCYKwaJnTJWvCD1WxIGDftm22fbmdb91qz6qyVxXzfeJ6YF7ma2iwEyK8CxTMGAC+cI4fR0fLL8uTks3aGhGeSqV42Yy9wN3AiZERea8kQGOjpcbH6YOSF5Npworp70X81hDupgzwAJCO9Aa8v2kT7WfOSHzqlsz9W7ZYVoQWYBfwUDnR3kYmgHPA0MWLcmGhcdHDJ5u1mpmZ8HIqQsas9OU0/qHwrxl5M6bSaf4YHZXFRmx15X/BpK1mTxvAuwAAAABJRU5ErkJggg==';
const applyBlur = el => {
if (!el.hasAttribute('is-blurred') && !el.hasAttribute('aria-selected')) {
const isUnread = el.querySelector('[aria-label*="unread"]') || el.querySelector('[aria-label*="Unread"]');
if (!isUnread || (isUnread && blurUnread)) {
el.style.filter = 'blur(8px)';
el.style.transition = 'filter 0.3s ease-in-out';
el.setAttribute('is-blurred', 'true');
el.addEventListener('mouseenter', () => {el.style.filter = ''});
el.addEventListener('mouseleave', () => {el.style.filter = 'blur(8px)'})
}else{
el.addEventListener('mouseenter', () => {});
el.addEventListener('mouseleave', () => {});
}
}
};
const clearBlurFromActiveChat = () => document.querySelectorAll('[aria-label="Chat list"] [aria-selected="true"]').forEach(el => {
const listItem = el.closest('[role="listitem"]');
if (listItem?.hasAttribute('is-blurred')) {
listItem.style.filter = 'none';
listItem.style.transition = 'none';
listItem.removeAttribute('is-blurred');
listItem.removeEventListener('mouseenter', () => {});
listItem.removeEventListener('mouseleave', () => {});
}
});
const clearBlurFromUnread = () => document.querySelectorAll('[aria-label="Chat list"] [role="listitem"]').forEach(el => {
if (el.querySelector('[aria-label*="unread"]') || el.querySelector('[aria-label*="Unread"]')) {
if (el.hasAttribute('is-blurred')) {
el.style.filter = 'none';
el.style.transition = 'none';
el.removeAttribute('is-blurred');
el.removeEventListener('mouseenter', () => {});
el.removeEventListener('mouseleave', () => {});
}
}
});
const blurElements = () => {
document.querySelectorAll('[aria-label="Chat list"] [role="listitem"], [role="application"] [data-testid="conversation-panel-messages"]').forEach(applyBlur);
clearBlurFromActiveChat();
if (!blurUnread) clearBlurFromUnread();
};
const addButtons = () => {
const h1 = document.querySelector('h1');
if (h1 && !document.getElementById('quick-message-btn')) {
// Quick Message Button
const msgBtn = Object.assign(document.createElement('button'), {
id: 'quick-message-btn',
title: 'Send message to a number without saving',
style: 'margin-left:10px;cursor:pointer;background:none;border:none;vertical-align:middle'
});
msgBtn.innerHTML = '<img src="data:image/jpeg;base64,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" alt="Message Icon" style="width:20px;height:20px">';
msgBtn.onclick = showModal;
h1.parentElement.parentElement.insertBefore(msgBtn, h1.parentElement.nextSibling);
// Toggle Blur Button
const toggleBtn = Object.assign(document.createElement('button'), {
id: 'toggle-blur-btn',
title: blurUnread ? 'Disable blur for unread messages' : 'Enable blur for unread messages',
style: 'margin-left:10px;cursor:pointer;background:none;border:none;vertical-align:middle'
});
toggleBtn.innerHTML = `<img src="${blurUnread ? toggleOnIcon : toggleOffIcon}" alt="Toggle Blur Icon" style="width:20px;height:20px">`;
toggleBtn.onclick = () => {
blurUnread = !blurUnread;
GM_setValue('blurUnread', blurUnread);
toggleBtn.title = blurUnread ? 'Disable blur for unread messages' : 'Enable blur for unread messages';
toggleBtn.innerHTML = `<img src="${blurUnread ? toggleOnIcon : toggleOffIcon}" alt="Toggle Blur Icon" style="width:20px;height:20px">`;
if (!blurUnread) clearBlurFromUnread();
blurElements();
};
h1.parentElement.parentElement.insertBefore(toggleBtn, msgBtn.nextSibling);
}
};
const showModal = () => {
document.getElementById('quick-message-modal')?.remove();
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const modal = Object.assign(document.createElement('div'), {
id: 'quick-message-modal',
style: 'position:fixed;top:0;left:0;width:100%;height:100%;background:' + (isDark ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0.5)') + ';backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;z-index:1000'
});
const content = Object.assign(document.createElement('div'), {
style: 'background:' + (isDark ? '#1a1a1a' : '#fff') + ';color:' + (isDark ? '#fff' : '#000') + ';padding:20px;border-radius:8px;max-width:400px;width:100%;box-shadow:0 4px 8px rgba(0,0,0,0.2)'
});
content.onclick = e => e.stopPropagation();
const input = Object.assign(document.createElement('input'), {
type: 'text',
placeholder: 'Enter phone number',
style: 'width:-webkit-fill-available;padding:10px;margin:10px 0;border-radius:4px;background:rgb(51,51,51);color:rgb(255,255,255)',
autofocus: true
});
const note = Object.assign(document.createElement('div'), {
style: 'font-size:12px;color:' + (isDark ? '#bbb' : '#555') + ';margin-bottom:10px',
innerHTML: 'Please include the country code (e.g., +1234567890)'
});
const btnRow = Object.assign(document.createElement('div'), { style: 'display:flex;gap:10px' });
const checkBtn = Object.assign(document.createElement('button'), {
textContent: 'Check Number',
style: 'background:#25D366;color:#fff;padding:10px;border:none;border-radius:4px;cursor:pointer;flex:1'
});
checkBtn.onclick = () => {
const num = input.value.trim().replace(/[\s-+]/g, '');
if (num) {
window.location.href = `https://web.whatsapp.com/send/?phone=${num}`;
modal.remove();
}
};
const closeBtn = Object.assign(document.createElement('button'), {
textContent: 'Close',
style: 'background:' + (isDark ? '#444' : '#ccc') + ';color:' + (isDark ? '#fff' : '#000') + ';padding:10px;border:none;border-radius:4px;cursor:pointer;flex:1'
});
closeBtn.onclick = () => modal.remove();
modal.onclick = e => e.target === modal && modal.remove();
btnRow.append(checkBtn, closeBtn);
content.append(input, note, btnRow);
modal.appendChild(content);
document.body.appendChild(modal);
};
blurElements();
addButtons();
const observer = new MutationObserver(mutations => mutations.forEach(m => m.addedNodes.length && (blurElements(), addButtons())));
const target = document.querySelector('body');
target && observer.observe(target, { childList: true, subtree: true });
window.addEventListener('unload', () => observer.disconnect());
})();