A Chrome extension that generates images using AI models via OpenRouter. Supports text-to-image and image-to-image generation with multiple models and aspect ratios.
- Text-to-Image Generation: Create images from text prompts using various AI models
- Image-to-Image Generation: Use reference images to guide the generation process
- Screenshot Capture: Capture and select specific areas from web pages as reference images
- Multiple AI Models: Support for OpenAI GPT Image, FLUX, Gemini, Recraft, and more
- Customizable Settings:
- Aspect ratios (1:1, 16:9, 9:16, 4:3, 3:4, 3:2, 2:3, Auto)
- Resolution options (Auto, 512, 1K, 2K, 4K)
- Quality settings (Auto, Low, Medium, High)
- Output formats (PNG, JPEG, WebP, SVG)
- Background options (Auto, Opaque, Transparent)
- Compression control for JPEG/WebP formats
- Dark/Light Theme: Toggle between dark and light themes
- Image Management: Download generated images or copy to clipboard
- Drag & Drop Upload: Easily upload reference images
- Keyboard Shortcuts: Press
Ctrl/Cmd + Enterto generate images
-
Clone this repository:
git clone https://github.com/saviki/browimage.git
-
Open Chrome and navigate to
chrome://extensions/ -
Enable "Developer mode" in the top right corner
-
Click "Load unpacked" and select the
browimagedirectory -
The extension icon will appear in your browser toolbar
-
Click the extension icon to open the side panel
-
Click the settings gear icon ⚙️ to open settings
-
Enter your OpenRouter API key (get one at openrouter.ai)
-
Click "Save Key"
-
Click the extension icon to open the side panel
-
Enter a description in the "Prompt" text area
-
Select your desired settings (model, aspect ratio, quality, etc.)
-
Click "Generate Image" or press
Ctrl/Cmd + Enter -
Wait for the image to be generated
-
Download or copy the result using the buttons below the image
-
Upload reference images by:
- Dragging and dropping images into the upload area
- Clicking the upload area and selecting files
- Using the "Capture Screenshot Area" button to capture from web pages
-
Enter a prompt describing what you want to generate
-
Select a model that supports image input (the UI will indicate which models support this)
-
Click "Generate Image"
-
Click "Capture Screenshot Area" button
-
A screenshot of the current page will be taken
-
Click and drag to select the area you want to use as a reference
-
Press
Escapeto cancel or release the mouse to confirm selection -
The selected area will be added as a reference image
The extension supports various AI models including:
| Model | Developer |
|---|---|
| OpenAI GPT Image 2 | OpenAI |
| OpenAI GPT Image 1 | OpenAI |
| Seedream 4.5 | ByteDance |
| FLUX.2 Pro | Black Forest Labs |
| Gemini 2.5 Flash Image | |
| Recraft V4 Pro | Recraft |
| Microsoft MAI Image 2.5 Pro | Microsoft |
| Grok Imagine | xAI |
Note: Model availability depends on your OpenRouter account and the models you have access to. The extension will automatically fetch available models when you save your API key.
The extension requires the following permissions:
| Permission | Purpose |
|---|---|
sidePanel |
Display the extension's user interface |
storage |
Save your API key and preferences locally |
tabs |
Capture screenshots from active tabs |
scripting |
Inject the screenshot selection overlay |
host_permissions |
Communicate with OpenRouter API |
browimage/
├── manifest.json # Chrome extension manifest v3 configuration
├── service-worker.js # Background script for API calls and message passing
├── sidepanel/
│ ├── sidepanel.html # UI markup structure
│ ├── sidepanel.js # UI logic and state management
│ └── sidepanel.css # Styles with dark/light theme support
├── content/
│ └── selection-overlay.js # Injected script for screenshot area selection
├── 48icon.png # Extension icon (48x48 pixels)
└── 128icon.png # Extension icon (128x128 pixels)
-
manifest.json: Chrome extension manifest v3 configuration defining permissions, side panel, and service worker
-
service-worker.js:
- Handles API communication with OpenRouter
- Manages screenshot capture functionality
- Processes messages between side panel and content scripts
- Generates images using the OpenRouter API
-
sidepanel/: The extension's user interface
sidepanel.html: Main HTML structure with settings panel, prompt input, model selection, and result displaysidepanel.js: JavaScript logic for UI interactions, image upload, model fetching, and state managementsidepanel.css: CSS styles with CSS custom properties for theming (dark/light mode)
-
content/selection-overlay.js:
- Injected into web pages for screenshot selection
- Creates an overlay for selecting specific areas
- Handles mouse events for area selection
- Crops and returns the selected area
This is a plain Chrome extension with no build process required. Simply load the directory in Chrome's developer mode.
- Make changes to the code
- Go to
chrome://extensions/ - Click the refresh button 🔄 on the extension card
- Test the changes in the side panel
The extension uses Chrome's message passing API for communication:
- Side Panel → Service Worker: Generate image, capture screenshot, fetch models
- Service Worker → Content Script: Inject selection overlay, show selection
- Content Script → Service Worker: Send captured screenshot data
- Service Worker → Side Panel: Return generated image, screenshot data
The extension uses the OpenRouter API for image generation.
POST https://openrouter.ai/api/v1/images
All API requests require an API key passed in the Authorization header:
Authorization: Bearer your-api-key
Usage is subject to OpenRouter's pricing and terms of service. Check your account at openrouter.ai for current rates and limits.
- Local Storage: Your API key is stored locally in Chrome's storage and never leaves your browser
- No Tracking: No analytics, tracking, or telemetry is implemented
- Minimal Data: Only the prompt, reference images, and settings are sent to OpenRouter for generation
- No Server: There is no backend server; all communication is directly between the extension and OpenRouter
- Click the settings gear icon ⚙️
- Enter your OpenRouter API key
- Click "Save Key"
- Check your internet connection
- Verify your API key is valid at openrouter.ai
- The extension will fall back to a default list of models
- Ensure you're on a regular web page (not
chrome://or other restricted pages) - Check that the extension has the necessary permissions
- Try refreshing the page and attempting again
- Check your OpenRouter account balance
- Verify the selected model supports your chosen settings
- Some models may not support all aspect ratios or formats
- Check the browser console for detailed error messages
- Click the extension icon in the toolbar
- If it still doesn't open, try disabling and re-enabling the extension
- Try selecting a higher resolution setting
- Some models may have different output quality
- Check if the model supports your selected resolution
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Enter |
Generate image (when prompt is focused) |
Escape |
Cancel screenshot selection |
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Test thoroughly in Chrome
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow Chrome Extension Manifest V3 best practices
- Use async/await for all asynchronous operations
- Maintain the dark/light theme support
- Test on different websites for screenshot functionality
- Ensure error messages are clear and helpful
This project is licensed under the MIT License
- OpenRouter for providing the AI image generation API
- Chrome Extensions API for the platform
- All the AI model providers for their image generation capabilities
If you encounter any issues or have suggestions, please open an issue on GitHub.
Made with ❤️ for the AI image generation community