Website: https://renshubtc.github.io/annotated/ · Demo video
Annotate anything. Ask AI. Global chat.
A Chrome extension for snipping or recording any part of a web page. Highlight the words that matter, type your take right on the screen, and it lands under your snip with the source link. Save it as a PNG or MP4 ready for X, or share it in a chat that everyone with Annotated.com sees, in Chrome's side panel.
Annotated.com was made for the competition: Jason Calacanis's $5K Chrome extension bounty for Annotated.com, from This Week in Startups. It will abide by all the terms and conditions set out by the competition.
- Download
Annotated.com.zipfrom the website and unzip it. - Open
chrome://extensionsand turn on Developer mode (top right). - Click Load unpacked and choose the unzipped folder (the one with
manifest.jsonin it). - Pin the icon so it's one click away.
Click the icon (or press Alt+Shift+S). The bar appears at the top of the page and the chat opens beside it.
- Press 📷 for a picture or 🎥 for a video, then drag a box (▭) or click a post, image or video on the page (▤).
- Drag across the words that matter to highlight them.
- Type your take and press Enter. It drops in under your snip, with the source link.
- Save it, copy it, or send it to the chat.
| Button | What it does |
|---|---|
| 📷 Screenshot | Make a picture. |
| 🎥 Screen recording | Make a video. |
| ▭ Select an area | Drag a box around what you want. |
| ▤ Select a post, image or video | Click the thing you want, and the box fits it. |
| ● Record | Start recording your area, after a 2-second countdown. A video in your area plays from where it is at the same moment, so you can clip any part of it; one already playing (on X or TikTok, say) waits there during the countdown. The recording stops if the video ends, and by itself at 90 seconds. |
| ❚❚ Pause | Pause the recording, and a video in your area with it. Press again to carry on. |
| ■ Stop | Stop the recording (Esc does too). A video in your area pauses. |
| 0:00 | How long the recording is. |
| 🖍 Highlighter | Choose the highlighter's colour. |
| ↶ Undo | Remove your last highlight. |
| ⤓ Save | Save it as a PNG or MP4, ready to post on X. |
| ⧉ Copy | Copy it, to paste into a post or the chat. |
| a Send to the chat | Post it in the chat straight away. It flies off the page into the chat. |
| ✕ Close | Close the bar and the chat (Esc does too). With a video you haven't saved yet, press it twice. |
One chat for everyone with Annotated.com, in Chrome's side panel. Annotations (pictures and videos made with Annotated.com, with their source link) go to everyone, and everything else is a reply to one.
- Click an annotation to reply to it. Clicking its picture also opens it full size, so you can read it while you write; click it again to close it.
- Right-click a post to Reply or Like it, Go to source link, or Download or Copy it.
- Ask AI fact-checks an annotation with Chrome's built-in AI, on your computer.
- File a claim if a post uses your work beyond fair use. It goes privately to the people who run the chat.
- You get a random name. Click Posting as … under the chat box to change it.
Snipping and saving happen on your computer. Only what you post in the chat is uploaded, and posts in the chat are public. The extension only works on a tab after you click its icon there, and asks for no access to your browsing history. The source link under a snip leaves out logins, keys, one-time codes, email addresses and tracking tags.
The chat runs on Supabase. To run it on your own project, run supabase/setup.sql in its SQL Editor, turn on anonymous sign-ins, and put the project's URL and publishable key in chat-config.js.
MIT. The Newsreader font in fonts/ is under the SIL Open Font License (fonts/OFL.txt), and the files in vendor/ keep their own licenses (next to each file).