Extension foundations

Choose an extension problem

Decide when browser integration is necessary and define a Page Notes project with a narrow, understandable scope.

A browser extension can do things a normal website can’t. It can watch what the browser does and change it. That’s a lot of power, and I only reach for it when a plain website can’t solve the problem.

In this course we build Page Notes. It saves a short note for the page you’re on, shows it in a toolbar popup, and can highlight the page when you ask. That’s it. It doesn’t need your browsing history, it doesn’t need access to every website when you install it, and it has no server.

When a website is not enough

Start from the moment ordinary web code stops working. A website can’t add a button to the browser toolbar. It can’t read which tab you have open. It can’t inject its own script into an unrelated page.

Those are real reasons to build an extension. “It’s easier to install” is not one. If a bookmark or a web app does the job, build that instead.

Budget the authority

Every feature costs some permission. I write the feature and the permission next to each other, so the price is visible:

  • saving notes needs extension-owned storage
  • reading the current tab after you click the toolbar icon can use activeTab
  • highlighting the page needs scripting plus temporary access to that one tab

Notice what’s missing. Nothing here needs permanent access to every site. Nothing sends browsing data to a backend. If a feature idea needs those, I question the feature first.

Decide where data stops

A full URL can contain private things: a path with a username, a search query, a token in the fragment. Page Notes uses the URL as the key for a note, so we have to decide what goes into that key.

Do we keep the complete URL? Drop the fragment? Strip tracking parameters? There is no single right answer, it depends on the product. But the answer must be written down before we store anything.

Write the user flow

Before writing code, write the user flow in plain sentences. Open the toolbar action. See the note for this page. Type. Save. Highlight.

For each step, name the extension context that runs it, the permission it needs, the data it reads, the data it writes, how long that data stays, and the visible user gesture that triggers it.

Then look at the list. Any capability that doesn’t attach to a step gets removed. That’s the whole scoping exercise, and it takes ten minutes. Try it now on Page Notes, and keep the list nearby. We’ll check every later lesson against it.

Lesson completed