SideNotes

About

SideNotes — Smart Clipboard & Side Panel for Every Tab


SideNotes lives in your browser's side panel, always within reach as you browse. It's part smart clipboard, part notepad, part developer tool — built for people who constantly copy things, reference values from pages, and need a persistent scratchpad that doesn't disappear when you switch tabs.



📋 Smart Clipboard Stack


Every time you select and copy text on any page, SideNotes quietly catches it and stacks it in your panel. No extra steps. Just copy as you normally would — highlights from articles, code snippets, addresses, product names, error messages — and they accumulate in a rich-text editor you can read, edit, rearrange, and copy all at once with a single click.


The editor is fully editable. You can type freely, bold text, highlight passages in five colors, change font size, insert visual separators between sections, and build up a formatted document from fragments collected across dozens of tabs. Smart Copy can be toggled off in settings if you want to use the editor purely as a manual notepad.



📧 Contact Detection — Email & Phone


When Contacts detection is on, SideNotes scans the visible text of every page and wraps every email address and phone number in a subtle, clickable chip. One click copies the value to your clipboard instantly, with a small "Copied" toast confirming the action. No more triple-clicking to select a phone number buried in a block of text, or right-clicking to copy an email.


Supports international phone formats — Indian (+91 98765 43210), UK (+44 7911 123456), US (800-555-0199), and many more.



🎨 Color Detection — HEX, RGB, HSL, Named


When Colors detection is on, SideNotes finds every color value on the page — HEX codes like 
#1a2b3c
, RGB values like 
rgb(255, 99, 71)
, HSL values like 
hsl(210, 80%, 60%)
, and all 140+ named CSS colors like 
tomato
, 
cornflowerblue
, or 
papayawhip
. Each one gets a circular color swatch next to it so you can see the actual color at a glance, and clicking copies the value. Invaluable on design documentation, color palette pages, or any UI reference.



∑ Math Solver


Enable Math Solver in settings, type any arithmetic expression in the panel editor, and press Enter. SideNotes evaluates it instantly and appends the result inline in green — no need to open a calculator.


Supports full operator precedence, parentheses, and exponentiation:


345 + 378 / 74 * (373 + 383 - 22)
 → 
= 4020.27


2^10
 → 
= 1024


(19.99 * 3) + 14.50 - 5
 → 
= 69.47


The evaluator is a hand-written parser with zero use of 
eval
 — completely safe.



💱 Currency Conversion


Enable Currency Conversion, set your base currency (supports 42 major currencies including USD, EUR, GBP, INR, JPY, AED, SAR, CNY, and more), and type any amount with a currency code in the editor. Press Enter and SideNotes fetches live exchange rates and appends the converted amount inline in purple.


250 USD
 → 
≈ ₹20,847.50


1200 EUR
 → 
≈ ₹107,340.00


$500
 → 
≈ ₹41,695.00


Rates are fetched from a free public API and cached for one hour so you're not making a network call every time. You choose which currencies to enable — toggle individual currencies on or off from the currency chip panel in settings.



🎤 Speech to Text — Dictate into the Panel


Click the Dictate button and speak. SideNotes uses Chrome's built-in speech recognition to transcribe your voice and type it into the editor in real time. Interim (in-progress) text appears in grey while you speak, then finalizes when Chrome confirms it. Click Stop when you're done.


Useful for quickly capturing thoughts, dictating notes while reading, or appending voice-written content to a page's copied text. Works on any page where microphone access has been granted.



</> Script Injector — Run JS & CSS on Any Page


For developers and power users. Enable Script Injector in settings and the main view switches to a full code editor powered by CodeMirror, with:



Syntax highlighting for JavaScript and CSS

Line numbers

Bracket matching and auto-close

Autocomplete triggered on every keystroke (Ctrl+Space for full list)


Write any JavaScript or CSS, select your language (JS or CSS), and click the ▶ Execute button. Your code runs directly on the active page — JS executes in the page's own context with full DOM access, CSS injects as a 
<style>
 tag that applies immediately.


Re-run as many times as you like. Each run replaces the previous injection cleanly. Great for quickly tweaking a page's styles, testing a DOM manipulation, or scraping data without opening DevTools.



✏️ Rich Text Editor


The main clipboard area is a full contenteditable editor, not a plain textarea. It supports:



Bold — select text and click B, or use Ctrl+B

Highlight — five colors (yellow, green, blue, red, purple) plus a one-click "remove highlight" option

Font size — increase or decrease with + and − buttons, from 9px to 32px, applied to the whole editor

Separators — insert a visual dividing line between sections

Copy All — copies the full plain text content of the editor to clipboard in one click

Clear — wipe the editor and start fresh


Content is saved automatically to local storage and restored the next time you open the panel.



⚙️ Settings


Everything is configurable from the Settings view (gear icon in the header):



Smart Copy on/off

Contacts detection on/off

Colors detection on/off

Math Solver on/off

Currency Conversion on/off — with base currency selector and per-currency toggles

Script Injector on/off — with JS/CSS language picker



🔒 Privacy


SideNotes does not collect, transmit, or store any of your data externally. All notes, settings, and clipboard contents stay on your device in Chrome's local storage. The only external network request is a currency exchange rate fetch from 
open.er-api.com
 (a public API, no account required) when Currency Conversion is enabled. No analytics, no telemetry, no tracking of any kind.



Who is SideNotes for?



Researchers and writers who gather content from multiple sources while writing

Designers who work with color values across documentation and references

Developers who want quick access to emails, color codes, and a scratch JS console in the browser

Anyone who copies things constantly and wants them to land somewhere useful instead of disappearing when you copy the next thing.