CopyVersa v2 is a powerful Chrome extension that allows you to select and copy content from web pages in multiple formats (Markdown, HTML, and Plain Text) with an intuitive visual interface. This is a complete rewrite of the CopyVersa userscript, now as a native Chrome extension.
- 🎯 Smart Content Selection: Intelligent content detection and selection
- 📝 Multiple Format Support: Copy as Markdown, HTML, or Plain Text
- 🎨 Visual Feedback: Beautiful UI with real-time preview
- 🔄 Multi-Select Mode: Select multiple elements before copying
- 🌙 Dark/Light Themes: Automatic theme detection with manual override
- ⚡ Performance Optimized: Built with modern React and TypeScript
- 🔒 Privacy First: All processing happens loc 8000 ally, no data collection
-
From Chrome Web Store (Recommended)
- Visit the Chrome Web Store page
- Click "Add to Chrome"
-
From Source (Development)
git clone https://github.com/oddradiocircle/copyversa-chrome-ext.git cd copyversa-chrome-ext npm install npm run build # Load the dist/ folder in Chrome as an unpacked extension
- Activate CopyVersa: Press
Ctrl+Shift+C(orCmd+Shift+Con Mac) - Select Content: Click and drag to select content or click individual elements
- Choose Format: Select your preferred output format (Markdown, HTML, Plain Text)
- Copy: Click the copy button or press
Enter - Paste: Use
Ctrl+Vto paste the formatted content anywhere
- Chrome 88+ (Manifest V3 support)
- No additional dependencies required
- Node.js 18+ and npm 8+
- Chrome/Chromium browser for testing
# Clone the repository
git clone https://github.com/oddradiocircle/copyversa-chrome-ext.git
cd copyversa-chrome-ext
# Install dependencies
npm install
# Start development mode with hot reload
npm run dev
# Build for production
npm run build
# Run tests
npm test
# Run E2E tests
npm run test:e2ecopyversa-chrome-ext/
├── src/
│ ├── contentScript/ # ✅ Main Content Scripts & React Components
│ │ ├── core/ # ✅ Core business logic (tested)
│ │ │ ├── CopyVersaCore.ts # ✅ Main orchestrator (6/6 tests)
│ │ │ ├── SelectionEngine.ts # ✅ Selection system (10/10 tests)
│ │ │ ├── ConversionEngine.ts # ✅ Format conversion (15/15 tests)
│ │ │ └── StorageManager.ts # ✅ Chrome storage integration
│ │ ├── ui/ # ✅ React UI components
│ │ │ ├── PanelUI.tsx # ✅ Main panel container
│ │ │ └── components/ # ✅ Panel components (2/2 tests)
│ │ ├── __tests__/ # ✅ Test suites (7 suites, 44/44 passing)
│ │ └── index.ts # ✅ Content script entry point
│ ├── background/ # Service Worker (planned)
│ ├── popup/ # Extension Popup (planned)
│ ├── options/ # Options Page (planned)
│ └── manifest.ts # ✅ Chrome extension manifest
├── public/ # Static assets
├── docs/ # ✅ Comprehensive documentation
│ ├── PRD-CopyVersa-v2.md
│ ├── Technical-Architecture.md
│ └── Progress Reports/ # ✅ Development tracking
├── tests/ # ✅ Additional test files
└── dist/ # ✅ Built extension (ready for Chrome)
Key Files Status:
- ✅ All core TypeScript files: Compiling without errors
- ✅ React components: Working with proper JSX support
- ✅ Test infrastructure: Complete Jest setup with ES modules
- ✅ Build system: Vite configuration for Chrome extension
- ✅ Documentation: Comprehensive progress tracking
- 📋 Product Requirements Document
- 📖 User Stories
- 🏗️ Technical Architecture
- 🛠️ Development Guide
- 🤝 Contributing Guidelines
- Project setup and configuration ✅
- US-010: Panel UI Testing and Debugging ✅ (44/44 tests passing)
- Build system and TypeScript configuration ✅
- React UI components implementation ✅
- Core engine architecture ✅
- US-003: Core Activation System ✅ COMPLETED (All acceptance criteria met)
- Background Script with Chrome APIs ✅ (15/15 tests passing)
- US-011: Integration Testing (Ready - extension builds successfully)
- Content selection system ✅ IMPLEMENTED
- Multi-select functionality ✅ IMPLEMENTED
- Visual feedback ✅ IMPLEMENTED
- Markdown conversion ✅ IMPLEMENTED & TESTED
- HTML preservation ✅ IMPLEMENTED & TESTED
- Format switching ✅ (Implemented & Tested)
- Comprehensive testing ✅ (Unit tests completed)
- Performance optimization
- Accessibility improvements
- Chrome Web Store preparation
- Final testing and bug fixes
- Documentation completion
US-010 Panel UI Testing COMPLETED with 100% success rate:
- ✅ 7/7 test suites passing
- ✅ 44/44 tests passing
- ✅ Build system fully functional
- ✅ All core components tested and working
Current Status: ✅ ALL TESTS PASSING
# Run unit tests (44/44 tests passing)
npm test
# Run tests in watch mode
npm run test:watch
# Run E2E tests
npm run test:e2e
# Generate coverage report
npm run test:coverageTest Suites: 7 passed, 7 total ✅
Tests: 44 passed, 44 total ✅
Snapshots: 0 total
Time: 7.359 s
Test Coverage by Component:
- ✅ CopyVersaCore: 6/6 tests passing
- ✅ SelectionEngine: 10/10 tests passing
- ✅ ConversionEngine: 15/15 tests passing
- ✅ CopyVersaPanel: 2/2 tests passing
- ✅ Basic Configuration: 11/11 tests passing
- React 18 - UI Framework ✅
- TypeScript - Type Safety ✅
- Vite - Build Tool ✅
- Chrome Extension Manifest V3 - Extension APIs ✅
- Jest & React Testing Library - Testing Framework ✅ (44/44 tests passing)
- CSS Custom Properties - Theming & Styling ✅
- Build System: ✅ Fully configured and working
- Type Safety: ✅ Strict TypeScript with 100% compliance
- Test Coverage: ✅ Comprehensive unit testing (7 test suites)
- Core Features: ✅ Multi-format conversion implemented
- UI Components: ✅ React panel with drag & drop
- Chrome Int 6DB6 egration: ✅ Manifest V3 configuration complete
If you're upgrading from the CopyVersa userscript (v1.5), please note:
- No more Tampermonkey dependency: CopyVersa v2 is a native Chrome extension
- Enhanced UI: Completely redesigned interface with better visual feedback
- Improved Performance: Built with modern web technologies for better speed
- New Features: Multi-select mode and enhanced format options
- Better Compatibility: Works across more websites with improved content detection
We welcome contributions! Please see our Contributing Guidelines for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: daniel@gomezpadilla.com
- Original CopyVersa userscript community
- React and TypeScript communities
- Chrome Extension developers community
- All contributors and testers
Made with ❤️ by Daniel Gómez Padilla