Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nstechbytes/mini-converter

Mini Converter Chrome Extension! This compact yet powerful tool is designed to help you convert color codes between various formats and manage your conversion history effortlessly. Ideal for designers, developers, and color enthusiasts, this extension makes handling and visualizing different color formats a breeze.
https://github.com/nstechbytes/mini-converter

chrome chrome-extension converter extension gui hex rgb

Last synced: 17 days ago
JSON representation

Host: GitHub
URL: https://github.com/nstechbytes/mini-converter
Owner: NSTechBytes
License: apache-2.0
Created: 2024-10-11T13:30:39.000Z (about 1 month ago)
Default Branch: main
Last Pushed: 2024-10-11T13:38:29.000Z (about 1 month ago)
Last Synced: 2024-10-29T14:49:26.124Z (18 days ago)
Topics: chrome, chrome-extension, converter, extension, gui, hex, rgb
Language: CSS
Homepage:
Size: 44.9 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Mini Converter Chrome Extension

Welcome to the **Mini Converter Chrome Extension**! This compact yet powerful tool is designed to help you convert color codes between various formats and manage your conversion history effortlessly. Ideal for designers, developers, and color enthusiasts, this extension makes handling and visualizing different color formats a breeze.

## 🚀 Features

- **🔄 Convert Color Codes**: Convert between HEX, RGB, HSL, HSV, HWB, CMYK, CIELAB, CIEXYZ, NCOL, VECA, Decimal, and Hex Int color formats.
- **🕒 Color History**: Save and view your color conversion history for quick access.
- **🌗 Dark Mode**: Switch between light and dark modes to suit your viewing preference.
- **📋 Copy to Clipboard**: Copy conversion results and history items with ease.

## 🛠️ Installation

### Prerequisites

- Google Chrome (latest version recommended)
- Basic knowledge of installing Chrome extensions

### Steps

1. **Clone the Repository**

```bash
git clone https://github.com/NSTechBytes/Mini-Converter.git

2. **Navigate to the Extension Directory**

```bash
cd mini-converter-extension
```

3. **Load the Extension**

- Open Google Chrome.
- Go to `chrome://extensions/`.
- Enable "Developer mode" (toggle switch in the top right).
- Click on "Load unpacked" and select the directory where you cloned the repository.

4. **Start Using the Extension**

- Click on the extension icon in the Chrome toolbar to open the extension popup.
- Enter a color code and choose a format to see the conversion results.

## 📸 Screenshots

### Light Mode
![Extension Preview Light Mode](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Mini%20Converter/Light.png)

---

### Dark Mode

![Extension Preview Dark Mode](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Mini%20Converter/Dark.png)

---

## 📘 Usage

### Converting Colors

1. **Open the Extension**

Click on the extension icon in the Chrome toolbar.

2. **Enter a Color Code**

Type your color code (e.g., HEX, RGB) into the input field.

3. **Select the Desired Format**

Choose the format to which you want to convert the color from the dropdown menu.

4. **Click "Convert"**

Click the "Convert" button to see the result in the selected format.

5. **View Results**

The converted color will be displayed in a visual box, and the result will appear below.

6. **Save to History**

Each conversion is automatically saved to your history for future reference.

### Dark Mode

- **Toggle Dark Mode**: Click the 🌙 (moon) icon in the top-right corner to switch to dark mode. The icon will change to a ☀️ (sun) icon when dark mode is enabled, and vice versa.

### Copying Results

- **Copy Conversion Results**: Click the 📋 "Copy" button to copy the result to your clipboard.
- **Copy History Item**: Each history entry has a copy icon. Click it to copy the corresponding entry to your clipboard.
- **Delete History Item**: Use the 🗑️ delete icon next to each history item to remove it from the history list.

## 🗂️ Directory Structure

The extension includes the following main files:

- `manifest.json`: Defines the extension's metadata and permissions.
- `popup.html`: The HTML file for the extension's main interface.
- `popup.css`: The CSS file for styling the extension's popup interface.
- `popup.js`: Handles the extension's functionality.
- `welcome.html`: The HTML file for the welcome page.
- `welcome.css`: The CSS file for styling the welcome page.
- `welcome.js`: Manages interactions on the welcome page.

## 🛠️ Development

### Code Structure

- **HTML Files**: Structure the extension’s interface.
- **CSS Files**: Provide styling and layout for the UI elements.
- **JavaScript Files**: Implement functionality for color conversions, history management, dark mode toggling, and more.

### Contributing

If you’d like to contribute to this project, please follow these steps:

1. **Fork the Repository**: Create a personal copy of the repository by forking it on GitHub.
2. **Clone Your Fork**: Clone your fork to your local machine.
3. **Create a Branch**: Create a new branch for your changes.
4. **Make Changes**: Implement your changes or add new features.
5. **Commit and Push**: Commit your changes and push them to your fork on GitHub.
6. **Create a Pull Request**: Open a pull request from your fork's branch to the original repository's main branch.

### Issues and Bug Reports

If you encounter any issues or bugs, please report them on the [Issues](https://github.com/NSTechBytes/Mini-Converter/issues) page of the repository. Include a detailed description of the issue and steps to reproduce it.

## 🙏 Acknowledgements

- **Chroma.js**: Used for color conversions and manipulation.
- **Font Awesome**: Provides icons used in the extension's UI.
- **Google Chrome**: The platform for which this extension is built.

---

Thank you for using the Mini Converter Chrome Extension. We hope it enhances your color management and conversion tasks! 🎉