I made a Magnifier Toggle — A Simple Zoom‑Lens Browser Extension

Source: Dev.to

Magnifier Toggle is a small experiment I built while teaching myself how browser extensions work. I’m still learning and figuring things out as I go, so the code isn’t perfect yet — but the extension works, and I’m fixing the newbie bugs as I get better.

The extension adds a circular “magnifying glass” to any webpage. Click the toolbar icon to toggle it on or off, and the lens follows your mouse with a zoom‑ed‑in view of the page. It’s lightweight, minimal, and a fun project for learning MV3.

GitHub:

What it does

• Adds a circular magnifier overlay
• Follows your cursor smoothly
• Zoom level can be adjusted
• Lens size can be adjusted
• Escape key disables it
• Works on most normal sites

Why I built it

I’m self‑teaching and learning by doing. This project helped me understand:

• How MV3 background service workers work
• How content scripts interact with the page
• How to inject and style overlays
• How to handle mouse movement and zoom math

It’s not perfect, but I’m improving it as I learn more.

How to try it

1. Download or clone the repo.
2. Open your browser’s extensions page.
3. Turn on Developer Mode.
4. Load the folder as an unpacked extension.
5. Click the toolbar icon to toggle the magnifier.