Docs › Web apps

Any page and the Chrome extension

Put the toolbar on any web page with a bookmark, a script tag or the browser extension.

Any page, with nothing to install#

You do not need the SDK, or to rebuild anything, to annotate an app. Start the server and open /bookmarklet:

npx notato dev
npx notato inject        # prints the bookmark's page, a line for the console, and a script tag

Drag the button to your bookmarks bar and click it on the page you want to annotate: the toolbar appears, and notes go to the server as a project named after the page's host and port (localhost-5173). It is the same code as the SDK (the server serves it at /inject.js): component names for React apps, source locations if the Vite plugin is in, variants, settings, all of it. It works with any framework or none, and with or without hot reload (click it again after a refresh). A page that is on your machine or your network works as it is; a page whose Content-Security-Policy forbids scripts from the server will refuse it, and a site elsewhere needs the server started with --cors-origin <its origin>. The extension is for those.

Browser extension#

The extension puts the same toolbar on any site you turn it on for, including pages that refuse a script from another server and ones you do not build, with nothing changed in them. It is Chrome (and other Chromium browsers), Manifest V3.

bun run build:extension     # or take notato-extension-<version>.zip from a release

Then in chrome://extensions turn on Developer mode, Load unpacked, and choose packages/extension/dist (or the unzipped folder). On a page, click the Notato icon, switch Notato on this site on, allow the permission Chrome asks for, and check the server address (the default is http://localhost:4747) and the project. It remembers each site, loads itself there from then on, and does nothing anywhere else. It needs no hot reload: variants appear when the page next loads or reloads.

How it stays safe and works on pages with their own security policy: the part that reads the page runs in the page; it cannot call the server itself, so it asks a relay, which asks the extension's background worker. The worker only reaches the server set for that site, and only Notato's own API on it, so a page cannot use the extension to reach anything else on your machine. It asks for almost nothing up front: scripting and storage, plus loopback addresses; each site and any other server address is asked for when you turn it on. An unpacked build has a fixed id that the server accepts by default; a build from a store has its own, which you list with --cors-origin chrome-extension://<id>. The extension is not on any store. A page that is turned on could write notes to your project through the extension (it could with an SDK token too), so turn it on for sites you trust.