The Prompt Enhancer is a Chrome extension that transforms casual text into polished, professional messages across popular web platforms (LinkedIn, Instagram, Gmail, WhatsApp). It uses OpenRouter API for AI-powered text enhancement and provides both popup and inline interaction modes.
- Frontend: Vanilla JavaScript + CSS (for maintainability and performance)
- AI Provider: OpenRouter API with embedded key for MVP
- Storage: Chrome Storage Local API
- Build System: Webpack for bundling and optimization
- ✨ Inline Enhancement: One-click rephrase buttons next to Send buttons
- 🎨 Custom Prompts: User-created prompt templates with full CRUD operations
- 📱 Popup Interface: Standalone rephrase tool with clipboard integration
- 🔄 Accept/Decline Workflow: Preview and approve changes before applying
- 📊 Usage Analytics: Track acceptance rates and prompt effectiveness
- ⚙️ Settings Management: Comprehensive configuration options
prompt-enhancer/
├── 📄 manifest.json # Chrome extension manifest v3
├── 🎨 popup/
│ ├── popup.html # Main popup interface
│ ├── popup.js # Popup logic and interactions
│ └── popup.css # Popup styling
├── 🔧 content/
│ ├── content.js # Content script for page injection
│ ├── platform-selectors.js # Platform-specific DOM selectors
│ └── inline-ui.js # Inline button and overlay components
├── ⚡ background/
│ └── service-worker.js # Background script for API calls
├── 🔗 shared/
│ ├── storage.js # Chrome storage utilities
│ ├── api.js # OpenRouter API integration
│ └── constants.js # App constants and configurations
├── ⚙️ settings/
│ ├── settings.html # Settings page
│ ├── settings.js # Settings logic
│ └── settings.css # Settings styling
└── 🎯 icons/ # Extension icons (16, 48, 128px)
- Project Setup: Webpack build system, manifest configuration
- OpenRouter Integration: API client with error handling
- Popup Interface: Basic UI with rephrase functionality
- Storage System: Prompt management and settings persistence
- Content Script: Platform detection and DOM injection
- LinkedIn Integration: Inline button with Accept/Decline workflow
- Error Handling: Comprehensive error states and recovery
- User Experience: Loading states and feedback systems
- Settings Page: Full prompt CRUD interface
- Advanced Features: Usage analytics and prompt organization
- Configuration: API key management and user preferences
- Multi-Platform: Instagram, Gmail, WhatsApp support
- Performance: Bundle optimization and caching
- Testing: Comprehensive test suite and quality assurance
- UI/UX Polish: Visual refinements and accessibility
- Documentation: User guides and help materials
- Deployment: Chrome Web Store submission package
| Platform | Integration Type | Status |
|---|---|---|
| Messaging interface | ✅ Primary | |
| Direct messages | ✅ Supported | |
| Gmail | Compose window | ✅ Supported |
| WhatsApp Web | Message input | ✅ Supported |
- Bundle Size: < 500KB total
- Load Time: < 200ms for popup
- API Response: < 3 seconds
- Memory Usage: < 10MB
- Platform Detection: > 95% accuracy
- 🔐 API Key Protection: Obfuscated embedded keys for MVP
- 🛡️ Content Security Policy: Strict CSP for extension pages
- 🔒 Local Storage Only: No cloud sync in MVP version
- 🚫 No Data Tracking: Privacy-first approach
{
id: "unique-id",
name: "Professional LinkedIn",
instruction: "Make this message professional and concise...",
isDefault: true,
createdAt: 1677652288000,
usageCount: 42
}{
selectedPromptId: "professional",
maxTokens: 150,
temperature: 0.7,
autoInject: true,
showTooltips: true
}graph TD
A[User Opens Popup] --> B[Select Prompt Style]
B --> C[Type Message]
C --> D[Click Rephrase]
D --> E[AI Processing]
E --> F[Show Enhanced Text]
F --> G{User Decision}
G -->|Accept| H[Copy to Clipboard]
G -->|Decline| I[Try Different Prompt]
graph TD
A[User Types Message] --> B[Click Inline Button]
B --> C[AI Enhancement]
C --> D[Show Preview Overlay]
D --> E{User Choice}
E -->|Accept| F[Replace Original Text]
E -->|Decline| G[Keep Original Text]
# Clone and setup
git clone <repository-url>
cd prompt-enhancer
npm install
# Development build with watch
npm run dev
# Production build
npm run build
# Run tests
npm test
# Package for Chrome Web Store
npm run package- Build the extension:
npm run build - Open Chrome Extensions:
chrome://extensions/ - Enable Developer Mode
- Click "Load unpacked" and select
dist/folder - Pin the extension to toolbar for easy access
- Acceptance Rate: > 70% of rephrases accepted
- Platform Compatibility: > 95% success rate
- Error Rate: < 1% of operations
- User Retention: > 60% week-1 retention
- Time to Rephrase: < 5 seconds end-to-end
- User Satisfaction: > 4.0 stars on Chrome Web Store
- Daily Active Users: Track growth trajectory
- Feature Adoption: Monitor most/least used features
- 🎚️ Tone Controls: Formal/casual slider
- 🔄 Multiple Variants: Generate several options
- 👥 Team Features: Shared prompts and collaboration
- 📊 Advanced Analytics: Detailed usage insights
- 🌐 Multi-Browser: Firefox and Edge support
- 🗣️ Voice Integration: Speech-to-text input
- 🤖 Model Selection: Choose different AI models
- 📱 Mobile Companion: Mobile app integration
- 📋 requirements.md: Original product requirements
- 🏗️ ARCHITECTURE.md: Detailed system architecture
- 💻 IMPLEMENTATION_GUIDE.md: Code patterns and examples
- 🗺️ PROJECT_ROADMAP.md: Development timeline and milestones
- 🔧 TECHNICAL_SPECIFICATION.md: Detailed technical specs
- 🎯 Todo List: Track implementation progress
- 🐛 Issue Tracking: Bug reports and feature requests
- 📖 User Guide: End-user documentation
- 🔒 Privacy Policy: Data handling and privacy practices
- Follow the established code patterns in
IMPLEMENTATION_GUIDE.md - Maintain test coverage above 85%
- Update documentation for new features
- Test on all supported platforms before submitting
- ESLint: Enforce consistent code style
- Prettier: Automatic code formatting
- Jest: Unit and integration testing
- Puppeteer: End-to-end testing
For questions about the architecture or implementation:
- 📧 Technical Questions: Review implementation guide
- 🐛 Bug Reports: Use issue tracking system
- 💡 Feature Requests: Submit via project roadmap
- 📖 Documentation: Check available docs first
This comprehensive architecture plan provides everything needed to build the Prompt Enhancer Chrome extension:
✅ Complete Technical Specifications
✅ Detailed Implementation Patterns
✅ Clear Development Roadmap
✅ Performance & Security Guidelines
✅ Testing & Quality Assurance Strategy
The architecture is designed for:
- 🚀 Fast Development: Clear patterns and reusable components
- 📈 Scalability: Modular design for easy feature additions
- 🔧 Maintainability: Well-documented code and clear separation of concerns
- 🛡️ Security: Privacy-first approach with secure API handling
- 🎯 User Experience: Intuitive interface with smooth workflows
Next Step: Switch to Code mode to begin implementation! 🚀
This architecture plan represents a complete blueprint for building a production-ready Chrome extension that transforms casual text into professional messages across multiple web platforms.