https://github.com/ztabs-official/image-editor-pro
Image Editor Pro
https://github.com/ztabs-official/image-editor-pro
chrome chrome-extension chrome-extensions
Last synced: 4 months ago
JSON representation
Image Editor Pro
- Host: GitHub
- URL: https://github.com/ztabs-official/image-editor-pro
- Owner: ztabs-official
- Created: 2025-05-23T19:15:23.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-12T20:58:05.000Z (10 months ago)
- Last Synced: 2025-08-12T22:31:30.071Z (10 months ago)
- Topics: chrome, chrome-extension, chrome-extensions
- Language: TypeScript
- Homepage: https://chromewebstore.google.com/detail/image-editor-pro/jbikmklfdcpnjbfbgjompkkkimankklh
- Size: 190 KB
- Stars: 18
- Watchers: 0
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Image Editor Pro - Chrome Extension
A beautiful and powerful Chrome extension for professional image editing with advanced capabilities including filters, drawing tools, cropping, resizing, and more.
## 🚀 Features
### Core Editing Tools
- **10+ Professional Filters**: Brightness, contrast, saturation, blur, hue, sepia, vintage, grayscale, invert, opacity
- **Drawing Tools**: Freehand brush with customizable size and color
- **Text Editor**: Add and edit text with double-click functionality
- **Shape Tools**: Rectangle, circle, triangle, star, arrow, heart
- **Icons & Emojis**: 8 built-in icons/emojis for creative editing
### Transform & Manipulation
- **Crop Tool**: Visual crop selection with real-time preview
- **Resize**: Smart proportional scaling with aspect ratio lock
- **Rotate**: 90-degree rotation left/right
- **Flip**: Horizontal and vertical flipping
- **Zoom**: In/out with scale display
### Export & Storage
- **Multiple Formats**: Export as PNG, JPEG, or WebP
- **Quality Control**: Adjustable quality for JPEG/WebP
- **Local Gallery**: ~5MB Chrome storage capacity
- **Auto-save**: Automatic saving to gallery
- **Download**: Direct download functionality
### User Experience
- **Professional UI**: Built with shadcn/ui and Tailwind CSS
- **Responsive Design**: Works on all screen sizes
- **Context Menu**: Right-click any image to edit
- **Immediate Access**: Click extension icon to open dashboard
- **Search & Filter**: Gallery with search and filtering options
## 🛠️ Technical Stack
- **Frontend**: React 18 + TypeScript
- **Canvas**: Konva.js for high-performance image editing
- **UI Components**: shadcn/ui with Radix UI primitives
- **Styling**: Tailwind CSS with custom design system
- **Build Tool**: Vite with optimized production builds
- **Extension**: Chrome Extension Manifest V3
## 📦 Installation
### For Users
1. Download the extension from Chrome Web Store (coming soon)
2. Or load as unpacked extension:
- Go to `chrome://extensions/`
- Enable "Developer mode"
- Click "Load unpacked" and select the `dist` folder
### For Developers
```bash
# Clone the repository
git clone
cd image-editor-extension
# Install dependencies
npm install
# Development mode
npm run dev
# Build for production
npm run build:production
# Generate icons
npm run icons
```
## 🏗️ Development
### Project Structure
```
src/
├── components/
│ ├── ImageEditor.tsx # Main editor component
│ ├── Gallery.tsx # Image gallery
│ └── ui/ # shadcn/ui components
├── dashboard.tsx # Main dashboard page
├── popup.tsx # Extension popup (redirects)
├── editor.tsx # Standalone editor page
├── background.ts # Service worker
├── content.ts # Content script
└── types/ # TypeScript definitions
```
### Key Components
#### ImageEditor
- Main editing interface with tabbed sidebar
- Real-time filter application with Konva.js
- Mouse event handling for drawing and cropping
- Transform operations with proper state management
#### Gallery
- Grid/list view toggle
- Search and filtering
- Star/favorite functionality
- Storage management with size tracking
#### Storage System
- Chrome Local Storage API
- ~5MB capacity with size monitoring
- Automatic cleanup and optimization
- Image metadata tracking
### Build Process
1. **Type Check**: TypeScript compilation check
2. **Vite Build**: Optimized production bundle
3. **Asset Copy**: Manifest, icons, styles
4. **Validation**: Required files check
5. **Size Analysis**: Bundle size reporting
## 🎨 Design System
### Colors
- Primary: Blue gradient (#667eea → #764ba2)
- Accent: Blue (#3b82f6)
- Success: Green (#10b981)
- Warning: Yellow (#f59e0b)
- Error: Red (#ef4444)
### Typography
- Font: System UI stack
- Sizes: 12px - 32px with consistent scale
- Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold)
### Components
- Consistent border radius (0.5rem)
- Subtle shadows and transitions
- Accessible color contrast
- Responsive spacing system
## 🔧 Configuration
### Vite Configuration
- React plugin with Fast Refresh
- TypeScript support
- Tailwind CSS integration
- Production optimizations
### Chrome Extension
- Manifest V3 compliance
- Service worker background script
- Content script injection
- Context menu integration
- Storage permissions
## 📊 Performance
### Bundle Size
- Total: ~2-3MB (including assets)
- JavaScript: ~800KB (minified)
- CSS: ~50KB (Tailwind purged)
- Assets: Icons, fonts, images
### Optimization
- Code splitting by route
- Tree shaking for unused code
- Minification and compression
- Efficient re-renders with React
## 🧪 Testing
### Manual Testing Checklist
- [ ] Upload and display images
- [ ] Apply all filters
- [ ] Draw with brush tool
- [ ] Add and edit text
- [ ] Create shapes and icons
- [ ] Crop functionality
- [ ] Resize with aspect ratio
- [ ] Transform operations
- [ ] Export in all formats
- [ ] Gallery operations
- [ ] Context menu integration
### Browser Compatibility
- Chrome 88+ (Manifest V3 requirement)
- Chromium-based browsers
- Edge 88+
## 🚀 Deployment
### Chrome Web Store
1. Build production version: `npm run build:production`
2. Create ZIP file of `dist` folder
3. Upload to Chrome Web Store Developer Dashboard
4. Fill out store listing details
5. Submit for review
### Local Installation
1. Run `npm run build:production`
2. Open Chrome Extensions page
3. Enable Developer mode
4. Load unpacked extension from `dist` folder
## 📝 License
MIT License - see LICENSE file for details.
## 🤝 Contributing
1. Fork the repository
2. Create feature branch
3. Make changes with tests
4. Submit pull request
## 📞 Support
For issues and feature requests, please use the GitHub issue tracker.
---
**Version**: 1.0.1
**Last Updated**: 2025
**Status**: Production Ready