Log inGet started
Features
DrivePhotosNotesCalendar and ContactsAssistantPasswordsMailFor developers
Why StavoExtensionsPricingDocsDownloadLog in
Docs

Web clipper

Save articles, highlights, screenshots and bookmarks from your browser straight into Notes, as plain Markdown in your own vault.

The clipper is a browser extension for Chrome, Edge, Brave and Firefox. It's free, like the rest of the web side of Stavo, and it talks only to your own server.

Install from source for now; store listings coming soon. The steps are below.

What it saves

  • Article: the main text of the page without menus and ads, as clean Markdown with headings, links, lists, tables and code blocks. Images are saved into your vault, so the note keeps working when the page changes. The source address, author, date and site name go into the note's properties.
  • Full page: everything on the page as simple Markdown.
  • Selection: what you selected, with a link back to that spot on the page.
  • Highlights: mark passages as you read, then save them as a list of quotes. Each quote links back to its exact spot on the page.
  • Screenshot: the visible part of the page, or an area you drag. It's saved as an image in your vault and shown in the note.
  • Bookmark: the title, link, description and preview image.

Before saving you pick the vault, the folder (it remembers the last one, Clippings to start), tags and a short comment. After saving, Open in Stavo takes you to the note. The same choices are in the right-click menu under Clip to Stavo.

Install it

You need Bun to build it. Get the source of the Stavo integrations, then build the clipper:

shell
cd integrations/web-clipper
bun install
bun run build

That makes dist/chrome (Chrome, Edge, Brave, Opera, Vivaldi) and dist/firefox.

Chrome, Brave, Opera, Vivaldi

  1. Open chrome://extensions (Brave: brave://extensions).
  2. Turn on Developer mode, top right.
  3. Click Load unpacked and choose the dist/chrome folder.
  4. Pin it from the puzzle button in the toolbar so it's one click away.

Edge

  1. Open edge://extensions and turn on Developer mode.
  2. Click Load unpacked and choose the dist/chrome folder.

Firefox

  1. Open about:debugging#/runtime/this-firefox.
  2. Click Load Temporary Add-on and choose dist/firefox/manifest.json.
  3. When you sign in, Firefox asks for access to websites. Allow it: the clipper needs it to read pages and reach your server.

Firefox removes temporary add-ons when it restarts. That goes away once the clipper is in the Firefox add-ons store. Safari comes later.

Connect it to your server

  1. The clipper's settings open after you install it (or right-click its button and choose Options).
  2. Enter your server's address, like drive.example.com, and click Sign in.
  3. A tab opens on your server. Check that it shows the same code as the clipper, then click Approve.

The clipper gets its own key. It can list your vaults and folders and add new notes and images. It can't read your notes or files. See and remove connected browsers on your server under /dashboard/clipper.

Paste a token instead. If signing in doesn't work, for example in a private window, open https://drive.example.com/dashboard/clipper, make a token under Make a token to paste, and paste it into the clipper's settings with your server address.

Servers on the internet need https. Plain http only works for addresses on your own network, like 192.168.1.20:8710 or nas.local.

Clip something

  1. Open a page and press Alt+Shift+S (⌥⇧S on a Mac), or click the clipper's button.
  2. Pick what to save. If you selected text first, Selection is already picked.
  3. Check the title, vault, folder and tags, add a comment if you like, and click Save to Notes.

Highlights: choose Highlights and Start highlighting, then select text on the page. Each selection turns yellow. Click a highlight to remove it, and save from the bar at the bottom of the page.

An area of the page: choose Screenshot, then Pick an area, and drag. Press Esc to cancel.

You can change the shortcut, and add ones for clipping the article right away, highlighting and screenshots of an area, at chrome://extensions/shortcuts (Edge: edge://extensions/shortcuts; Firefox: about:addons, the gear button, Manage Extension Shortcuts).

Good to know

  • Notes are ordinary Markdown files in your vault, with images in its _attachments folder. They sync, search and link like any other note.
  • The clipper only reads a page when you clip it. Nothing runs in the background on the sites you visit.
  • Browsers don't let extensions read their own pages, extension stores or new tabs, so those can't be clipped.
  • Prefer links to your images over copies? Turn off Save images into the vault in the clipper's settings.
  • The server's admin can turn the clipper off in Admin > Features > Web clipper.