Web Clipper

Save web content directly into your OpenCharts notes — via the Chrome extension or the in-editor /clip command. Clip full pages, selections, highlights, screenshots, or images, then let AI summarize or extract action items automatically.

Installing the Chrome Extension

Download the extension from the Chrome Web Store (or load it unpacked from extensions/opencharts-clipper/ for development).
Click the extension icon and log in with your OpenCharts account.
Pin the extension to your toolbar for quick access, or use the keyboard shortcut Ctrl+Shift+O.

The extension uses Manifest V3 with Vite + React. Auth is handled via Appwrite Web SDK — your session JWT is stored securely in chrome.storage.session.

5 Clip Modes

Full Page

Captures the entire page using Readability, stripping ads and navigation for clean content.

Selection

Clip only the text you've selected on the page.

Multi-Passage Highlights

Highlight multiple passages across the page. Highlights persist via XPath anchoring, even after reload.

Screenshot

Capture a viewport screenshot or draw a region to clip a specific area as an image.

Image Grab

Right-click any image on a page to clip it directly into your notes.

AI Actions

After clipping, you can run AI actions on the content before it lands in your note. These are processed server-side via /api/notes/clip-ai using Gemini (primary) with OpenRouter fallback.

Summarize — Condense the clipped content into a brief summary

Key Takeaways — Extract the most important points as a bullet list

Extract Actions — Pull out action items and to-dos from the content

Classify — Auto-tag the clip based on its content type

Custom Prompt — Write your own AI instruction to process the clip

Destination Picker & Insert Position

Choose which note receives the clip with fuzzy search powered by /api/notes/search.

Pick where the clip is inserted:

Append — add to the end of the note
Prepend — insert at the top
After Heading — pick a specific heading (fetched from /api/notes/[projectId]/headings)

Clip Templates & Auto-Matching

The template engine supports 14 variables (title, URL, date, selection, etc.) and auto-matches templates based on:

URL patterns — match domains or path patterns
Schema.org type — detect articles, recipes, products, etc.

5 default templates are included. You can create custom templates in the extension's options page.

The `/clip` Slash Command

You don't need the extension to clip web content. Type /clip in the notes editor, paste a URL, and OpenCharts fetches and parses the page server-side using Readability.

The result is inserted as a webClip block — the same collapsible card you get from the extension.

The slash command is great for quick clips without switching to the browser extension. It supports the same AI actions after insertion.

Web Clip Block in Notes

Clipped content appears as a custom webClip BlockNote block with:

Collapsible card — expand/collapse the clipped content
Metadata header — source URL, favicon, clip date
Hover actions — open source, re-clip, delete
Outline sidebar — a dedicated "Clips" section lists all clips with source titles, favicons, click-to-jump navigation, and a count badge
Status bar — clip count and clipped word count

AI Panel Clip Awareness

The Notes AI side panel automatically detects clips in your document. Two built-in AI templates are available:

"Summarize my clips" — generates a synthesis of all clipped content
"Extract action items from clips" — pulls tasks from clipped pages

Clip-related queries are automatically scoped to clip sources via the intent classifier's clipScoped flag.

Offline Queue

If you're offline or the server is unreachable, clips are queued in IndexedDB and automatically retried every 30 seconds. The extension badge shows the number of pending clips. Once connectivity is restored, queued clips are delivered in order.

Keyboard Shortcuts

CtrlShiftO

Open clipper popup

CtrlShiftH

Toggle highlights mode

CtrlShiftS

Screenshot capture

CtrlShiftL

Open clip history

Batch & Team Clipping

Batch clip — select multiple tabs and clip them all at once into the same note.

Team clipping — when working in a team workspace, clips can include an orgId so they land in the correct organization project. Collaborators receive a real-time toast notification when a clip is inserted.

Export Awareness

Web clips are export-aware across all formats: DOCX and PDF render a left-border card with a source footer, Markdown uses blockquotes with source links, and plain text outputs footnotes. Version history tracks clips with the add_clip change type.

Was this article helpful?

Notes Editor

Rich-text editor with blocks, formatting, themes, AI, and collaboration.

Notes: AI Writing Assistant

Side-panel AI for generating, editing, organizing, and translating notes content.

Notes: Task Manager

Checklist tasks with priorities, due dates, and automatic reminders inside notes.

Notes: Export & History

Export notes to Word, PDF, Markdown, HTML, or JSON, and manage version history.

Notes: Export & History Collaboration