Browser Notes: The App That Nearly Injected JavaScript Into Your Web Pages

program source code on a computer display

Photo by Shahadat Rahman on Unsplash

I wanted a simple thing: the ability to stick notes on web pages. Visit a page, jot down a thought, come back later and see it again. Like Post-it notes for the internet.

What I got was a journey through browser security models, abandoned prototypes, and the quiet satisfaction of deleting several hundred lines of code.

The Idea

The concept was straightforward. You’re reading a page, you have a thought about it — maybe it’s a reference you want to remember, a bug you spotted, a reminder to come back. You press a hotkey, type your note, and it’s saved against that URL. Next time you visit, your notes appear in a little floating panel.

No account. No sync. No cloud. Just notes, on your machine, for your eyes only.

The Wrong Turn

My first instinct — and I say this with the benefit of hindsight — was magnificently wrong.

I started with JavaScript injection. The plan was to use AppleScript to run JavaScript inside the browser, injecting highlight overlays directly into web pages. Select some text, pick a colour, and the highlight would be rendered inline with the page content using injected DOM manipulation.

It was clever. It was technically impressive. It was also a terrible idea.

Injecting JavaScript into arbitrary web pages is, to put it diplomatically, a security minefield. You’re executing code in the context of pages that handle banking, email, medical records. You’re modifying the DOM of pages that might have Content Security Policies for very good reasons. You’re trusting that your injected code won’t interfere with the page’s own scripts, or vice versa.

I got it working. Highlights appeared on the page. They persisted across refreshes. There were colour pickers and tooltips. It was genuinely impressive to look at.

Then I sat back and thought about what I’d actually built: an app that injects arbitrary JavaScript into every web page you annotate. An app that requires NSAppleEventsUsageDescription because it needs to control your browser. An app that encodes JSON payloads in Base64 to smuggle them past AppleScript’s string escaping.

Reader, I deleted it all.

The Right Turn

The replacement is almost embarrassingly simple. Browser Notes uses the macOS Accessibility API to read exactly one thing: the text in your browser’s address bar. That’s it. No JavaScript. No AppleScript controlling your browser. No DOM manipulation. No Content Security Policy violations.

It reads the URL. It stores notes against that URL in a local SQLite database. When you visit a page that has notes, they appear in a floating panel. When you leave, they disappear.

The Accessibility API approach works with every browser — Safari, Chrome, Edge, Firefox, Arc, Brave, Opera, Vivaldi, and about eight others. No extensions to install. No per-browser configuration. If it has an address bar, Browser Notes can read it.

What It Does

Three features, all triggered by configurable keyboard shortcuts:

Add Note (hyperN)1 — opens a glass-effect panel over your browser. Type your note, use #hashtags to categorise, press return. Done.

Page Notes HUD — appears automatically when you visit a page that has notes. Shows each note with its text, hashtag pills, timestamp, and a pencil icon for editing. Dismisses when you navigate away, hides when you switch apps, re-appears when you come back. It tries very hard to be helpful without being annoying.

Notes Browser (hyperH) — a searchable list of every note you’ve ever made. Filter by text, URL, or hashtag. Press return to navigate to the page. Centres itself in your browser window because that’s where your eyes already are.

The Privacy Bit

This is where I get to be a bit preachy, so bear with me.

Browser Notes doesn’t phone home. It doesn’t sync to a cloud service. It doesn’t have an account system. It doesn’t track which pages you visit. It doesn’t even have network entitlements — it literally cannot make HTTP requests.

Your notes live in ~/Library/Application Support/BrowserNotes/notes.db. A single SQLite file. You can open it, query it, back it up, delete it. It’s yours.

We explored adding cloud sync during development. We decided not to, and not because it was technically hard — it’s because our policy is that nothing leaves your machine via our apps. Browser Notes reads your address bar and writes to a local database. That’s the entire data flow.

We considered it. We rejected it. We’re quite happy about that.

The Technical Bits

For the curious:

The whole thing is about 1,200 lines of Swift across eight source files. No dependencies beyond AppKit, ApplicationServices, and SQLite3.

What I Learned

Sometimes the impressive approach is the wrong one. JavaScript injection was technically fascinating but fundamentally misguided. The Accessibility API approach is boring by comparison — it reads a text field — but it’s secure, universal, and reliable.

The best code I wrote for this project was the code I deleted.

Check It Out

Browser Notes is free, open source, and available now. The source is on GitHub.

Footnotes

  1. When I refer to the hyper key, this requires third-party software to handle, such as our own HyperCaps. ↩