Free · Open Source · Chrome Extension

Annotate Anything.

On Any Webpage. Any Local File.

Draw, highlight, write, and whiteboard — directly on top of any website or offline HTML file. No sign-up. No data collected. Works everywhere.

v1.2
🎉 New in v1.2 — Group Toolbar System + Popup Menu Completely redesigned toolbar with customizable groups, flyout panels, presets, and a full settings popup with a live layout editor.
🗂️ Group Toolbar 📂 Flyout Groups 📐 4 Presets 🪟 New Popup Menu 📁 file:// Support ↕️ Vertical Slider
Download v1.2 for Chrome ✨ Try Demo How to Install

Free download · Windows · Chrome · v1.2 Stable

✏️ Pen
✨ Magic Pen
🖊️ Highlighter
➡️ Arrow
⬜ Rectangle
⭕ Circle
T Text
🧹 Eraser
🖥️ Whiteboard
🗂️ Group Toolbar
📁 Local Files

Everything you need.
Nothing you don't.

A complete annotation toolkit that lives in your browser — lightweight, private, and now fully customizable.

🎯

Works on Any Page

Turn ON once — Self Annotate injects itself on every page you visit, every refresh, every tab. Now works on local file:// pages too.

🗂️

Group Toolbar System

Buttons are organized into groups. Set each group as Inline (always visible) or Flyout (collapses to one icon, expands on click). Keep your toolbar clean.

🪟

New Popup Menu

Click the extension icon for a full 3-tab popup: toggle ON/OFF, adjust theme and language, and edit your toolbar layout — all in one place.

🖥️

Floating Whiteboard

A full multi-page whiteboard that floats over any website. Resize, minimize, go fullscreen. Export pages as PNG or PDF.

📐

4 Built-in Presets

Default, Minimal, Drawing, and Compact — choose a preset for your Annotate and Whiteboard toolbars separately, then customize further.

🔒

100% Private

No accounts. No servers. No tracking. Everything stays in your browser — layout, settings, and annotations never leave your device.

Rebuilt from the toolbar up.

v1.2 is the biggest update yet — the entire toolbar is now dynamic, grouped, and fully customizable through a brand-new popup interface.

🪟

Brand New Popup Menu

Previous versions had no popup — clicking the icon just toggled ON/OFF with no UI. Now it opens a full 3-tab panel.

  • ON/OFF toggle switch with live status
  • Auto-detects file:// pages with a setup hint
  • Theme: Auto / Light / Dark
  • Language: English / বাংলা
  • Saves instantly to chrome.storage
🗂️

Group Toolbar System

Every button now belongs to a named group. Two display modes per group:

  • 📌 Inline — buttons always visible
  • 📂 Flyout — collapses to one icon, expands on click
  • Flyout opens above the bar (horizontal) or left (vertical)
  • Active tool shown on flyout trigger button
✏️

Live Layout Editor (Annotate)

Fully customize the page annotation toolbar from the popup's Annotate tab:

  • Pick from 4 built-in presets
  • Rename, re-icon, reorder groups
  • Add / remove buttons per group
  • Delete groups or add new ones
  • 💾 Apply instantly — no reload needed
🖥️

Live Layout Editor (Whiteboard)

The Whiteboard toolbar has its own independent layout editor in the popup's Whiteboard tab:

  • Separate presets (Default, Minimal, Compact)
  • Includes BG Color button unique to WB
  • Changes push live to the whiteboard toolbar
  • Layout saved separately from Annotate
📁

Local File Support

Self Annotate now works on offline HTML files and local web pages opened via file:// URLs — great for annotating downloaded lecture slides or saved web pages.

  • Enable "Allow access to file URLs" in extension details
  • Popup shows a notice when on a file:// page
↕️

Vertical Slider & Compact Bar

The thickness slider is now context-aware and toolbar buttons are more compact overall:

  • Slider rotates vertical when toolbar is in vertical mode
  • Buttons reduced to 30×30px for tighter fit
  • Default stroke thickness increased to 6 for better visibility
  • No more horizontal scrolling on the bar
Default Preset — Annotate Toolbar
✏️
🖊️
📐
↩️
🗑️
👁️
🤚
↔️
🖥️
Default
Minimal
Drawing
Compact

Every tool, detailed.

✏️ Annotation Overlay
✏️
Pen
Smooth freehand drawing on any webpage
Magic Pen
Draws and fades away after 2 seconds
🖊️
Highlighter
Semi-transparent marker for highlighting text
➡️
Arrow
Draw arrows to point at content
Rectangle
Draw boxes to frame content areas
Circle
Draw circles and ellipses freely
T
Text
Type text labels directly onto the page
🧹
Eraser
Erase specific strokes by touch/click
↩️
Undo
Undo last stroke — also Ctrl+Z
🗑️
Clear All
Remove all annotations from the page
👁️
Hide / Show
Temporarily hide all annotations
🤚
Scroll Mode
Pause drawing to scroll freely
↔️
Rotate Bar
Switch toolbar between horizontal and vertical
🖥️ Whiteboard
📄
Multi-page
Add, navigate, delete whiteboard pages
Page Thumbnails
Visual overview of all whiteboard pages
⬇️
Export PNG / PDF
Save current page as PNG or all pages as PDF
🎨
5 Backgrounds
Grey, White, Dark, Yellow, Green
↔️
Resizable Window
Drag any edge or corner to resize
Fullscreen Mode
Expand whiteboard to fill entire screen
Minimize
Collapse to a tab at the screen bottom
⚙️ Extension — New in v1.2
🪟
Popup Menu
3-tab popup: toggle, settings, layout editor
🗂️
Group Toolbar
Buttons in named groups — Inline or Flyout mode
📐
4 Presets
Default, Minimal, Drawing, Compact
📁
Local File Support
Works on file:// HTML pages and offline docs
↕️
Vertical Slider
Thickness slider rotates with the toolbar orientation
🟢
Permanent ON/OFF
Toggle once — auto-injects on every page
🌙
Auto / Light / Dark Theme
Follows system preference or manual override
🌍
English / বাংলা
Full bilingual interface support
📍
Position Memory
Toolbar location saved across all pages

Up in 60 seconds.

No Chrome Web Store needed. Load it directly as an unpacked extension.

1
Download & Extract the ZIP

Click the download button to get self-annotate-v1.2.zip.
Right-click → "Extract All..." → extract to a permanent folder:

C:\Users\YourName\Extensions\self-annotate\

After extracting, the folder should contain:

manifest.json
background.js
content.js
popup.html
popup.js
options.html
icons\
⚠️ Do NOT delete this folder after installing — Chrome loads the extension directly from it.
2
Open Chrome Extensions

In the Chrome address bar, type and press Enter:

chrome://extensions
3
Enable Developer Mode

Look at the top-right corner of the extensions page.
Toggle ON the switch labelled "Developer mode".

4
Load the Extension

Click "Load unpacked".
Navigate to your extracted folder where manifest.json is visible.
Click "Select Folder".

✅ Extension installed successfully
5
Pin the Extension

Click the 🧩 puzzle icon → find Self Annotate → click the 📌 pin icon. The ✏️ icon will always show in your toolbar.

6
(Optional) Allow Local Files

To annotate on local HTML files — go to chrome://extensions → Self Annotate → Details → enable "Allow access to file URLs".

📁 File:// support enabled
7
Turn It ON & Start Annotating

Click the ✏️ Self Annotate icon → the popup opens.
Toggle Annotate Mode ON — badge turns green.

Open any webpage → a ✏️ button appears bottom-right.
Click it to open the toolbar and start drawing!

🎉 You're ready to annotate!

Try it before installing.

The real annotation tool running on an actual physics lecture page. No install needed — opens in a new tab.

📄 তড়িৎচৌম্বকীয় আবেশ — Online Physics
Physics · Chapter 5
তড়িৎচৌম্বকীয় আবেশ
ফ্যারাডের সূত্র ও লেঞ্জের সূত্র
কোনো বর্তনীর মধ্য দিয়ে চৌম্বক ফ্লাক্সের পরিবর্তন হলে বর্তনীতে একটি তড়িচ্চালক বল আবিষ্ট হয়...
ε = −dΦ/dt
important!
✏️ 🖊️ 📐 T
✏️
Open Live Demo in New Tab
✏️ Full annotation toolbar
🗂️ Group toolbar system
🖥️ Whiteboard with export
💾 No install needed
Latest — v1.2 Stable

Ready to annotate?

Download Self Annotate v1.2 for free — the biggest update yet, with the new group toolbar system and popup menu.

Download self-annotate-v1.2.zip
Chrome on Windows No sign-up required Free forever Works on file:// pages