Screenshoto

Yet another Google Chrome extension for taking screenshots.

Motivation

• the Chrome Web Store is full of screenshot extensions, but very few of them actually work the way you would expect
• • Quite a few of them have grown into a semi-professional graphics studio inside a browser window, with lots of advanced features - and, inevitably, slower and more tedious controls.
  • Most of the more "professional" ones are unusable - at the very last step you always find out you have to pay a huge pile of money.
  • The "small" extensions can't capture Retina versions - some even get around it with a lie along the lines of "upsampling the image" from a low resolution, which is technically wrong.
  • Other extensions can capture at a chosen Retina multiplier, but only that one - so the same job would have to be repeated 3 to 4 times.

Requirements & Specification

• The user selects what to capture only once
• • Option to select the area to capture
  • • Option to resize it after the initial selection
    • Capture only on command, with a button
  • Option to capture a single HTML (DOM) element
  • • Selection with a crosshair, highlighting / outlining the block
• Changes made in the image editor are applied equally to all Retina versions, with no further action from the user
• The user generates all Retina versions with a single click
• • The user can still save just one version on its own
  • The user can still check each version separately - a site's pixel-density-specific settings can sometimes change the layout of elements
• The user has to get their work done faster than with competing products
• Starting the extension
• • With the extension's popup button in the browser's extensions toolbar
  • From the context menu
• After taking a capture
• • Opens a simple image editor with basic annotation tools
  • • Rectangle
    • Circle
    • Arrow
    • Text
    • Numbers
  • 5 to 10 basic high-contrast colours
  • 3 basic stroke widths / sizes
  • an "Undo" action

Implementation

On larger projects and legacy codebases, I still don't think you can rely on AI 100%. There it works as a very good assistant that takes the routine work off your hands.
With mini utilities of this size, where the whole source code fits into a single context window, it's done in a few minutes with no supervision at all.
The project took 1.5 man-days from scratch, including deployment to the Chrome Web Store, and was finished in a single day.
The time went into:

• preparing the agent (a text file), skills and CLAUDE.md (all text files),
• a high-level design and a description of the UI and behaviour, two use cases
• Manual testing of the functionality
• Preparing screenshots and deploying to the Chrome Web Store
• 0 manual changes to the code

Chosen tech stack:

• TypeScript
• Vite build
• 100% Claude Code