A Code Screenshot Beautifier - Chrome Extension for Screenshot Annotation & Code Beautification
Features • Installation • Usage • Development • Contributing
| Popup | Image Editor | Code Beautifier |
|---|---|---|
 |
 |
 |
| Feature | Description |
|---|---|
| Region Capture | Select any screen region to capture |
| Visible Area | Capture current browser viewport |
| Full Page | Auto-scroll and stitch for complete page screenshot |
| Desktop Capture | Capture other application windows |
| Delayed Capture | Timer-based capture with 3/5/10 second delay |
| Feature | Description |
|---|---|
| Arrow Tool | Draw directional arrows with multiple styles |
| Shape Tool | Rectangle and circle annotations |
| Text Tool | Add text labels with font/size/color options |
| Mosaic Tool | Blur sensitive information |
| Undo/Redo | Multi-step undo and redo operations |
| Feature | Description |
|---|---|
| Code Input | Manual input, paste, or drag & drop files |
| Syntax Highlighting | High-quality highlighting for 180+ languages |
| Theme Selection | 30+ built-in code themes |
| Gradient Background | Preset gradients + custom backgrounds |
| Window Style | macOS/Windows style window frames |
| Line Highlighting | Highlight specific code lines |
| Feature | Description |
|---|---|
| Multi-format Export | PNG/JPG/WEBP formats |
| Copy to Clipboard | One-click copy to system clipboard |
| Local Download | Save to local file system |
Coming Soon
- Clone the repository
git clone https://github.com/xie392/CodeFrame.git
cd CodeFrame- Install dependencies
pnpm install- Build the extension
pnpm build- Load into Chrome
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" in the top right corner
- Click "Load unpacked"
- Select the
distdirectory from the project
| Shortcut | Action |
|---|---|
Alt + Shift + S |
Capture visible area |
Alt + Shift + R |
Select region to capture |
Alt + Shift + F |
Full page screenshot |
Alt + Shift + D |
Desktop capture |
┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│ Screenshot │ ──→ │ Annotation │ ──→ │ Export │
│ Capture │ │ Editor │ │ & Share │
└─────────────┘ └─────────────┘ └─────────────┘
- Click the CodeFrame icon in the browser toolbar
- Select capture mode (Region/Visible/Full Page/Desktop)
- Add annotations in the editor (arrows/text/mosaic etc.)
- Export or copy to clipboard
- Click the icon to open CodeFrame
- Switch to the "Code" tab
- Paste or type your code
- Choose theme, background, font and other styles
- Click export or copy
| Category | Technology |
|---|---|
| Framework | React 18 + TypeScript |
| Build | Vite + CRXJS |
| Styling | TailwindCSS |
| Code Highlighting | Shiki |
| Canvas | Konva.js |
| State Management | Zustand |
| Extension Spec | Manifest V3 |
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build for production
pnpm build
# Lint code
pnpm lint
# Run tests
pnpm test
# Type check
pnpm typechecksrc/
├── background/ # Service Worker
├── popup/ # Main popup
├── editor/ # Image editor
├── codegen/ # Code generator
├── content/ # Content scripts
├── shared/ # Shared modules
└── options/ # Settings page
We welcome all forms of contributions!
- Fork this repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'feat: add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Create a Pull Request
- Follow ESLint + Prettier configuration
- Line length ≤ 80 characters
- Follow Conventional Commits
- New code < 100 lines
- Prefer pure functions
- Single responsibility principle
- No
anytypes
This project is open-sourced under the MIT license.
This project was built entirely through Vibe Coding - all code was generated with AI assistance, without manually writing a single line of code. 🤖✨
Made with ❤️ by xie392