Glue - Native macOS Chromium Browser with Element Commenting

A native macOS application that renders web applications using Chromium, provides full DevTools support, and enables element inspection and commenting.

Features (Planned)

• 🌐 Native macOS app with Chromium rendering
• 🛠️ Full DevTools support (F12)
• 🎯 Element selection and hover inspection
• 💬 Comment on specific UI elements
• 💾 Persistent comment storage

Development

Prerequisites

• Node.js v20+
• macOS (for development)
• npm or yarn

Setup

# Install dependencies
npm install

# Build the app
npm run build

# Run in development mode
npm run dev

# Build for distribution
npm run dist

Project Structure

glue/
├── src/
│   ├── main/           # Main process (Node.js)
│   ├── preload/        # Preload scripts (security bridge)
│   ├── renderer/       # Renderer process (UI)
│   ├── injection/      # Content scripts for webview
│   └── shared/         # Shared types and constants
├── dist/               # Compiled output
└── package.json

Scripts

• npm run build - Build all TypeScript files
• npm run dev - Run app in development mode with DevTools
• npm start - Run app in production mode
• npm run clean - Clean build artifacts
• npm run dist - Create distributable DMG

Implementation Status

Phase 1: Project Setup ✅

• [x] Project structure and configuration
• [x] TypeScript setup
• [x] Main process with BrowserWindow
• [x] Preload script with contextBridge
• [x] Basic renderer UI
• [x] Comment storage layer

Phase 2-10: In Progress

• [ ] Browser UI & WebView
• [ ] DevTools integration
• [ ] Element selection & hover
• [ ] Comment system
• [ ] Dynamic content handling
• [ ] macOS polish
• [ ] Testing
• [ ] Distribution

Architecture

Security

• ✅ Context isolation enabled
• ✅ Node integration disabled
• ✅ Sandboxing (partial - webview requires sandbox:false)
• ✅ IPC via secure contextBridge

Storage

Comments are stored in: ~/Library/Application Support/Glue/comments.json

License

MIT

glue