DEV Community

Cover image for Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀
Abinav Seelan
Abinav Seelan

Posted on

2 1

Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀

When switching between slack and Whatsapp, @rheaditi and I have found ourselves trying to use slack hotkeys to do things on Whatsapp Web way too often.

Introducing refined-whatsapp, a chrome extension that we built for ourselves and others like us. This extension adds:

  • ⚡️ Hotkeys:
    • Start a new chat with: "Cmd/Ctrl + K"
    • Temporarily hide current chat with: "Cmd/Ctrl + L"
    • Show/hide the Chats Sidebar with: "Cmd/Ctrl + \"
    • Search through messages with: "Ctrl + Space"
    • View chat info with: "Cmd/Ctrl + I"
  • 🌚 Dark mode for Whatsapp™ Web!

The extension is available to download on the Chrome Web Store.

Check out our twitter post, which has a video 🎬 to see these hotkeys in action!

The code is open source! If you find any issues / have ideas, do feel free to report them on Github or raise a PR if you wish to contribute!

GitHub logo campvanilla / refined-whatsapp

Supercharge Whatsapp Web with hotkeys and custom themes! 🚀

refined-whatsapp

Supercharge Whatsapp™ Web with hotkeys and a dark theme 🚀

GithubBanner


Keyboard Shortcuts

Action Hotkey
Start a new chat / Quick search ⌘ Command + K or Ctrl + K
Show/hide current chats ⌘ Command + L or Ctrl + L
Show/hide chat sidebar ⌘ Command + \ or Ctrl + \
Show/hide chat info ⌘ Command + I or Ctrl + I
Search messages in chat ⌃ Ctrl + Space

Dark Mode

dark-mode

local setup

If you'd like to try this extension out before a stable release:-

  1. Setup the repo:
# clone the repo
$ git clone git@github.com:campvanilla/refined-whatsapp.git
$ cd refined-whatsapp
# install && build
$ npm install && npm run build
# take note of the output directory, it'll be /path/to/refined-whatsapp/dist
  1. Head over to chrome://extensions/
  2. Select "load unpacked" & load the "dist" directory from above.
  3. Head over to https://web.whatsapp.com/ & check out the features! 💰

If you want to…

AWS Q Developer image

Your AI Code Assistant

Implement features, document your code, or refactor your projects.
Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay