WhatsApp-Sidebar-hover

A tiny browser extension for WhatsApp Web that keeps your chat sidebar out of the way until you actually need it.

What this does

• Sidebar starts hidden on page load (clean look).
• Press Alt+P anywhere (or hover the left-edge strip) to peek — the sidebar slides out at WhatsApp's own natural width.
• Sidebar content is blurred while you glance — a shoulder-surf shield for screen shares.
• Hover over the sidebar to clear the blur and actually read; move the mouse out and it re-blurs, then collapses.
• Escape collapses it; Tab to focus the reveal strip then Enter/Space also toggles.
• The "Shield: ON/OFF" pill (top-right) is the extension's on/off switch: click it to disable the hiding + blur for normal WhatsApp use, and click it again before a meeting. Your choice is remembered between sessions. If the pill is missing, the extension failed to initialize (usually the chat-list selector needs updating).

In short: peek layout, privacy blur, less shoulder-surfing.

Why I made it

Say you are in a Google Meet with your colleagues, friends or a lecturer and you are sharing your screen. You need to quickly check WhatsApp but oops, now everyone can see your chats, names, profile pictures and message previews. Awkward, and a privacy breach even if nobody intended it. That is what this fixes.

Current behavior (important)

Sidebar content is blurred by default when revealed (privacy shield). Hovering the sidebar clears the blur so you can read; moving the mouse out re-blurs and the sidebar collapses. The whole shield can be toggled off via the badge — WhatsApp then behaves completely normally until you turn it back on.

Tech notes

• Main script: content.js
• Manifest: manifest.json (Manifest V3 — migrated from V2, which Chrome no longer accepts for new extensions)
• Injection target: https://web.whatsapp.com/*
• The chat list is found with findChatList() — known selectors first, then a structural heuristic (left-half chat list → walk up to its ~400px column) so it survives WhatsApp DOM changes

Install (unpacked extension)

Chromium browsers (Chrome, Edge, Brave)

1. Open extensions page:
   • Chrome: chrome://extensions
   • Edge: edge://extensions
2. Turn on Developer Mode.
3. Click Load unpacked.
4. Select this folder.
5. Open WhatsApp Web and refresh.

Firefox / Zen

1. Open about:debugging in Firefox/Zen.
2. Click This Firefox in the left sidebar.
3. Click Load Temporary Add-on.
4. Navigate into this folder and select manifest.json.
5. Open WhatsApp Web and refresh.

Note: Temporary add-ons are removed when the browser closes. For a permanent install, use an unbranded build (e.g. Zen) with xpinstall.signatures.required set to false, then drag the packaged .xpi onto about:addons.

Flatpak note: if the browser is installed via Flatpak, grant it filesystem access to this folder (flatpak override --user <app-id> --filesystem=<path>) or the file picker returns a sandbox path and content.js fails to load.

Quick tuning

Edit these constants in content.js to adjust the feel:

Constant	Default	What it controls
BLUR_AMOUNT	6	Blur intensity on sidebar content
TRIGGER_WIDTH	55	Width (px) of the invisible left-edge hover strip
EXPANDED_WIDTH	400	Width (px) of the sidebar when revealed

Repo

GitHub repo name: WhatsApp-Sidebar-hover