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 your machine serves works as it is; a page whose Content-Security-Policy forbids scripts from the server will refuse it, and one from another device on your network or a site elsewhere needs its origin listed (NOTATO_CORS_ORIGINS, or --cors-origin on notato serve; see below). 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.

Check connection tests whether the selected server, project and token accept feedback from the extension, without creating a note. If the server blocks its origin, the popup shows the extension origin to allow in that project's server settings.

No server. Under Notes go to, choose This browser only and the site needs no Notato server at all. The toolbar runs as it does in test mode: notes and their screenshots are kept in this browser across reloads, what is typed is covered in screenshots, and the toolbar's export button downloads them as a zip (with a feedback.md) or copies them as Markdown. A Notato board imports the zip into the same project, so a tester can annotate a site with only the extension and send you the file. For such a site the extension reaches no server at all, and asks Chrome for the site alone.

The extension also has Hide from this app on completed notes and Settings → Hide completed annotations for bulk hiding. Restore hidden annotations brings them back. Hiding is remembered in this browser without deleting feedback from the dashboard; reopened tasks and new agent questions remain visible. After rebuilding an unpacked extension, reload it in chrome://extensions and refresh the page to load the updated toolbar.

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.