{"id":32790040,"url":"https://github.com/solaxnm/solaxnm-extension","last_synced_at":"2025-11-05T11:02:58.239Z","repository":{"id":320350210,"uuid":"1081755476","full_name":"solaxnm/solaxnm-extension","owner":"solaxnm","description":"SolanaM Browser Extension | Modify and Edit On the fly without precontext","archived":false,"fork":false,"pushed_at":"2025-10-23T08:41:02.000Z","size":354,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-23T10:27:53.374Z","etag":null,"topics":["browser-extension","chrome","react","vite"],"latest_commit_sha":null,"homepage":"https://ext.solanam.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/solaxnm.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-23T08:38:56.000Z","updated_at":"2025-10-23T09:41:31.000Z","dependencies_parsed_at":"2025-10-23T10:27:57.211Z","dependency_job_id":"47a77809-fd72-4738-9de6-863b5d50a5f7","html_url":"https://github.com/solaxnm/solaxnm-extension","commit_stats":null,"previous_names":["solaxnm/solaxnm-extension"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/solaxnm/solaxnm-extension","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solaxnm%2Fsolaxnm-extension","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solaxnm%2Fsolaxnm-extension/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solaxnm%2Fsolaxnm-extension/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solaxnm%2Fsolaxnm-extension/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/solaxnm","download_url":"https://codeload.github.com/solaxnm/solaxnm-extension/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/solaxnm%2Fsolaxnm-extension/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":282807274,"owners_count":26730415,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-05T02:00:05.946Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser-extension","chrome","react","vite"],"created_at":"2025-11-05T11:01:23.340Z","updated_at":"2025-11-05T11:02:58.227Z","avatar_url":"https://github.com/solaxnm.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solanam Image Processor As Browser Extension\n\n## Tech Stack\n[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge\u0026logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n[![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwind-css\u0026logoColor=white)](https://tailwindcss.com/)\n[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)](https://reactjs.org/)\n\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"/public/cover.webp\" alt=\"SolanaM Logo\" height=\"400\"/\u003e\n\u003c/div\u003e\n## Overview\nThe Solanam Image Processor is a professional image processing tool integrated into your browser, designed to enhance your workflow within the Solanam ecosystem. Developed by the team at [solaxnm](https://github.com/solaxnm), this extension is a part of the broader Solanam platform accessible at [solanam.com](https://solanam.com). It offers advanced image handling, cropping, and validation features to streamline your image processing tasks directly from your browser.\n\n\n## Features\n- **Image Validation**: Ensures files are of supported types (JPEG, PNG, WebP, GIF, BMP, TIFF, AVIF, SVG, ICO) and under 10MB.\n- **File Handling**: Loads and processes image files, providing detailed metadata (name, size, type) with size formatted in human-readable units (e.g., KB, MB).\n- **Crop Functionality**: Offers precise cropping with an interactive overlay, adjustable settings (x, y, width, height), and draggable/resizable crop boxes.\n- **Background Service**: Runs background tasks to support extension operations seamlessly.\n- **Content Script Integration**: Processes images on any webpage matching `\u003call_urls\u003e` with context menu support.\n\n## Installation\n1. Clone the repository: `git clone https://github.com/solaxnm/solaxnm-extension.git`\n2. Navigate to the project directory: `cd solaxnm-extension`\n3. Install dependencies: `npm install`\n4. Build the extension: `npm run build`\n5. Load the extension in your browser:\n   - Open Chrome/Edge: `chrome://extensions/`\n   - Enable \"Developer mode\"\n   - Click \"Load unpacked\" and select the `dist` folder\n\n## Usage\n- **Popup Interface**: Click the extension icon to open the popup, where you can upload images, view file info, and apply cropping.\n- **Context Menu**: Right-click an image on any webpage to process it directly using the extension's context menu options.\n- **Cropping Workflow**:\n  - Upload or select an image to display it in the popup.\n  - Enable the crop tool to adjust the crop area with an interactive overlay featuring draggable handles (NW, NE, SW, SE, N, S, W, E).\n  - Apply the crop to generate a new image or reset to the original.\n- **Notifications**: Receive feedback via browser notifications for validation errors or successful operations.\n\n## How It Works\n### Structure\n- **`src/`**: Contains the source code.\n  - **`components/`**: Reusable React components for the UI.\n  - **`icons/`**: Extension icon assets in multiple sizes (16x16, 32x32, 48x48, 128x128).\n  - **`utils/`**: Utility modules including:\n    - `app.ts`: Application logic.\n    - `CompressionManager.ts`: Handles image compression (if implemented).\n    - `CropManager.ts`: Manages crop settings and applies cropping with overlay.\n    - `FileHandler.ts`: Validates and loads image files.\n    - `FilterManager.ts`: Applies image filters (if implemented).\n    - `ToastManager.ts`: Manages notification displays.\n    - `main.ts`: Entry point for the extension logic.\n  - **`index.css`**: Global styles.\n  - **`style.css`**: Additional styling (optional).\n- **`background.js`**: Service worker for background tasks.\n- **`content.js`**: Content script injected into webpages.\n- **`vite-env.d.ts`**: TypeScript environment definitions for Vite.\n\n### Workflow\n1. **Initialization**: The extension loads with a background service worker (`background.js`) and injects `content.js` into matching webpages.\n2. **Image Upload**: Users upload images via the popup, where `FileHandler` validates file type and size.\n3. **Processing**: Valid images are loaded as Data URLs and displayed. `CropManager` enables cropping with an overlay, allowing percentage-based adjustments.\n4. **Output**: Cropped images are rendered as new canvases, convertible to Data URLs for download or further use.\n5. **Interaction**: Dragging and resizing the crop box updates settings in real-time, dispatched via custom events.\n\n## Development\n- **Run in Development Mode**: `npm run dev` - Starts a local server for live reload.\n- **Build for Production**: `npm run build` - Compiles the extension into the `dist` folder.\n- **Preview Build**: `npm run preview` - Serves the production build locally.\n- The project leverages Vite for fast development, React for the UI, and TypeScript for type safety.\n\n## Scripts\n- `npm run dev`: Starts the development server with hot module replacement.\n- `npm run build`: Transpiles TypeScript and builds the extension with Vite.\n- `npm run preview`: Previews the production build on a local server.\n\n## Dependencies\n- **React \u0026 React DOM**: For building the popup UI.\n- **TypeScript**: For static typing and better code maintainability.\n- **Vite**: For bundling and development server.\n- **@vitejs/plugin-react**: Enhances Vite with React support.\n\n## License\n[MIT License](https://opensource.org/licenses/MIT) - Feel free to modify this section with your preferred license.\n\n## Contributing\nContributions are welcome! Please fork the repository at [github.com/solaxnm](https://github.com/solaxnm), create a branch, and submit a pull request with your changes. Ensure to follow the project’s code style and include tests where applicable.\n\n## Support\nFor issues or questions, please open an issue on the [GitHub repository](https://github.com/solaxnm/solaxnm-extension/issues) or visit [solanam.com/support](https://solanam.com/support).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolaxnm%2Fsolaxnm-extension","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolaxnm%2Fsolaxnm-extension","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolaxnm%2Fsolaxnm-extension/lists"}