Solaxnm — SolanaM Image Studio

A professional Chrome browser extension for image editing, cropping, effects, format conversion, and export. Built with Vite, React, and TypeScript as part of the SolanaM ecosystem.

Install: Chrome Web Store · Developer: @alihd-tech

Features

Image import

• Drag and drop — Drop one or more images into the upload area
• File picker — Click to browse; supports multi-file selection
• Clipboard paste — Press Ctrl+V (or Cmd+V on Mac) to paste images from the clipboard
• Context menu import — Right-click any image on a webpage and choose Import to Studio
• Supported input formats — PNG, JPG, JPEG, WebP, AVIF, BMP, GIF, SVG, ICO

Editing tools

Tool	Shortcut	Description
Crop	C	Interactive crop with draggable handles and aspect ratio presets
Effects	E	Pixel-level image effects (see below)
Format	F	Choose output file format
Resize	R	Scale image from 10%–100% while preserving aspect ratio

Crop aspect ratios: Free, 1:1, 4:3, 16:9, 3:2, 9:16

Effects: None, Sharpen, Edge Detect, Emboss, Blur+, Posterize, Solarize

Resize presets: 25%, 50%, 75%, 100%

Press Escape to close an open tool panel.

Multi-image workflow

• Upload multiple images at once
• Switch between images using the thumbnail strip
• Per-image crop and resize settings
• Download all — Batch export every image with staggered downloads

Export

• Output formats: PNG, JPEG, JPG, WebP, AVIF, BMP, GIF, ICO
• Export summary — Live comparison of original vs. output format, dimensions, and file size
• Size change indicator — Shows percentage increase or decrease vs. the original
• Transparent background fill — When exporting to formats that don't support transparency (e.g. JPEG), alpha is flattened using a configurable background color from Settings

Extension integration

• Popup editor — Click the toolbar icon for a compact editor (480×600, up to 800px tall)
• Full editor — Opens in a dedicated browser tab for a larger workspace
• Side panel — Available via Chrome's side panel API (editor.html)
• Context menu — Right-click images on any http(s) page:
  • Import to Studio — Load the image into the editor
  • Quick Save As — Export directly as JPEG, PNG, or WebP without opening the editor
  • Extension Settings — Open the options page
• Page image scanning — Content script detects images, SVGs, and background images on web pages
• Light / dark theme — Toggle in the editor header; settings page has its own theme toggle

Settings

Open via extension icon → Options, or from the context menu.

Setting	Description
Auto-import from context menu	Automatically open the full editor after importing via right-click
Show export notifications	Display Chrome notifications on import and export
Advanced editing tools	Enable professional-grade editing features
Default export format	PNG, JPEG, WebP, or AVIF
Transparent background fill	Hex color used when flattening transparency for opaque formats

Settings sync via chrome.storage.sync under the key Solaxnm_settings.

Keyboard shortcuts

Shortcut	Action
Ctrl+Shift+I / Cmd+Shift+I	Open quick editor (popup)
Ctrl+Shift+E / Cmd+Shift+E	Open full editor
C	Crop tool (in editor)
E	Effects panel
F	Format panel
R	Resize panel
Escape	Close active tool panel
Ctrl+V / Cmd+V	Paste image from clipboard (upload screen)

Installation

Chrome Web Store (recommended)

Install the published extension directly from the Chrome Web Store.

Development

# Install dependencies
npm install

# Start Vite dev server (UI development)
npm run dev

# Type-check
npm run type-check

# Build extension for production
npm run build

After npm run build, load the dist/ folder as an unpacked extension in Chrome.

Load as a browser extension

1. Clone this repository
2. Install dependencies: npm install
3. Build: npm run build
4. Open Chrome and go to chrome://extensions/
5. Enable Developer mode
6. Click Load unpacked
7. Select the dist folder

Usage

Quick editor (popup)

1. Click the Solaxnm icon in the toolbar
2. Upload an image (drag-drop, browse, or paste)
3. Use the toolbar to crop, apply effects, change format, or resize
4. Review the export summary and click Download

Context menu

1. Right-click any image on a webpage
2. Choose SolanaM Image Studio → Import to Studio to edit, or Quick Save As to export immediately as JPEG, PNG, or WebP

Full editor

1. Press Ctrl+Shift+E (or Cmd+Shift+E on Mac), or
2. Enable Auto-import in Settings so context-menu imports open the full editor automatically

The full editor uses the same interface as the popup with more screen space.

Settings

1. Right-click the extension icon → Options
2. Configure import, notification, and export preferences
3. Click Save Preferences

Project structure

imager/
├── src/
│   ├── components/
│   │   ├── ImageUploader.tsx      # Drag-drop, paste, multi-file upload
│   │   ├── ImageProcessor.tsx     # Main editor: tools, preview, export
│   │   ├── CropTool.tsx           # Interactive crop UI
│   │   ├── ImageCanvas.tsx        # Canvas preview helper
│   │   └── Settings.tsx           # In-app settings modal (legacy)
│   ├── utils/
│   │   ├── image-processor.ts     # Canvas processing, filters, export
│   │   ├── extension-settings.ts  # Chrome storage settings API
│   │   ├── vectorizer.tsx         # SVG vectorization utilities
│   │   ├── CropManager.ts         # Crop coordinate helpers
│   │   └── FileHandler.ts         # File I/O helpers
│   ├── types.tsx                  # TypeScript interfaces
│   ├── App.tsx                    # Shared editor shell
│   ├── main.tsx                   # Popup entry point
│   ├── editor.tsx                 # Full editor entry point
│   ├── settings.ts                # Settings page script
│   ├── background.ts              # Service worker
│   ├── content.ts                 # Content script
│   └── theme-context.tsx          # Light/dark theme provider
├── index.html                     # Popup page
├── editor.html                    # Full editor / side panel page
├── settings.html                  # Options page
├── manifest.json                  # Chrome Extension Manifest V3
├── vite.config.ts                 # Vite multi-entry build config
└── package.json

Tech stack

Technology	Purpose
React 18	UI components
TypeScript 5	Type safety
Vite 5	Build tool and dev server
Tailwind CSS 4	Styling with purple accent theme
Lucide React	Icons
HTML5 Canvas API	Image processing and export
Chrome Extension Manifest V3	Extension platform

Architecture

Service worker (background.ts)

• Registers context menu items on install and startup
• Handles Import to Studio and Quick Save As actions
• Routes keyboard commands to open popup or full editor
• Stores pending context-menu images in chrome.storage.local (5-minute TTL)
• Shows welcome notification and opens Settings on first install

Content script (content.ts)

• Runs on all http(s) pages and iframes
• Extracts image data from <img>, SVG, <picture> sources, and CSS background images
• Processes images for context-menu import and direct export
• Highlights images on request; observes DOM for dynamically added images

Popup (index.html + main.tsx)

• Compact 480×600 editor loaded from the toolbar icon
• Checks for pending images from the context menu on open

Full editor (editor.html + editor.tsx)

• Full-tab editing workspace
• Also registered as the Chrome side panel default path

Settings (settings.html + settings.ts)

• Standalone options page with sidebar navigation
• Persists preferences to chrome.storage.sync

Image processing utilities

Key exports from src/utils/image-processor.ts:

Function	Description
drawImageWithFilters()	Render image with CSS filter pipeline
applyAdvancedFilterToCanvas()	Apply sharpen, edge, emboss, blur+, posterize, solarize
cropCanvas()	Crop to a selection rectangle
getScaledDimensions()	Calculate resize dimensions from scale percentage
prepareCanvasForExport()	Flatten transparency for opaque formats
downloadCanvasAsImage()	Export canvas as a downloadable file
getCanvasFileSize()	Estimate output file size before download
loadImageFromFile()	Load a File object into an HTMLImageElement
getFilterPresets()	Named filter presets (Vivid, Cool, Warm, etc.) — available in the processing layer
getAdvancedEffects()	List of pixel effects exposed in the Effects panel

Browser compatibility

• Google Chrome 88+
• Microsoft Edge 88+
• Opera 74+
• Brave and other Chromium-based browsers

Requires Manifest V3 support.

Links

Chrome Web Store	SolanaM Image Studio
Developer	github.com/alihd-tech
SolanaM	solanam.com
Support	solanam.com/support

SolanaM ecosystem

Solaxnm is part of the SolanaM platform for creators and developers.

Development scripts

Command	Description
npm run dev	Start Vite dev server
npm run build	Build all extension entries to dist/
npm run preview	Preview Vite production build
npm run type-check	Run TypeScript compiler without emitting

The Vite build produces separate bundles for the popup, editor, settings page, background service worker, and content script. Root-level background.js, content.js, and settings.js are copied from dist/ after each build for convenience.

License

MIT License — Part of the SolanaM ecosystem.

Contributing

Contributions are welcome. Please open an issue or submit a pull request.

Version history

v2.9.2 (current)

• Multi-image upload and batch export
• Export summary with format, dimension, and file size comparison
• Resize tool with scale slider and presets
• Transparent background fill setting for opaque format export
• Context menu quick export (JPEG, PNG, WebP)
• Light/dark theme in editor and settings
• Settings page redesign with synced preferences

v1.2.0

• Crop tool with aspect ratio presets
• Advanced pixel effects panel
• Context menu integration
• Full editor mode and keyboard shortcuts

v1.0.0

• Initial release with basic image processing and browser extension support