Skip to content

Color_Code_Viewer-Extension 🎨 Developed a unique extension using JavaScript and Manifest V3, enhancing my understanding of how browser extensions work. This project provided a hands-on experience with complex JavaScript functionality, including copy, paste, pick, and save as text features.

Notifications You must be signed in to change notification settings

StayLearner/Color_Code_Viewer-Extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

3 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 Color Code Viewer Extension πŸ–₯️

πŸ“œ Description

The Color Code Viewer Chrome extension allows you to easily pick colors from anywhere on your screen and instantly get their Hex and RGB codes! Perfect for designers, developers, and anyone who works with colors, this extension not only helps you grab color codes but also lets you save your picked colors in a list and export them to a .txt file. ✨

βš™οΈ Features

  • 🌈 Pick Any Color: Capture any color from any pixel on your display.
  • πŸ’» View Hex & RGB Codes: Get the Hex and RGB values for the color you selected.
  • πŸ“‹ Copy Codes: Quickly copy the color codes to your clipboard with just a click.
  • πŸ“ Save Color List: Save your selected colors in a .txt file for easy access later.
  • 🧹 Clear List: Option to clear the list if you need to start fresh!

πŸ’» Tech Stack

  • Frontend: JavaScript (lots of it! πŸ˜‰), a little bit of CSS for styling.
  • Browser API: Chrome Extensions API (Manifest V3).
  • Libraries: None! Just pure JavaScript and Chrome APIs. πŸ› οΈ

πŸ”§ Installation

Link- https://chromewebstore.google.com/detail/color-code-viewer/neickedhklkbkiofgdjdfojiepcfhpla

  1. Visit the live link for the Color Code Viewer extension on the Chrome Web Store.
  2. Click on Add to Chrome.
  3. Once installed, the Color Code Viewer icon will appear in your browser toolbar. πŸ‘€

πŸš€ Usage

  1. Click the Color Code Viewer extension icon in the toolbar to open the popup.
  2. Click the Pick Color button to start selecting colors from your screen. 🎨
  3. Hover over the area with the color you want, and click to capture it. πŸ“
  4. The Hex and RGB values will be displayed immediately. πŸ”
  5. Click Copy to copy the color code to your clipboard. πŸ“‹
  6. Continue selecting more colors, and they’ll be added to your color list. πŸ“œ
  7. To save your color list, click Save to download a .txt file containing the color codes. πŸ’Ύ
  8. To clear your list, just click Clear List. 🧹

🀝 Contributing

Want to contribute to Color Code Viewer? πŸŽ‰
Feel free to fork the repository, submit a pull request, and add new features or improvements! πŸš€
Just make sure to follow the existing code style and keep it cool. 😎

πŸ“ License

This project is open-source and available under the MIT License. πŸŽ‰

🌟 Acknowledgments

  • Thanks to the Chrome Extensions API for making building this extension so easy! πŸ’ͺ
  • Special thanks to all the contributors and testers for their awesome feedback! πŸ™Œ

About

Color_Code_Viewer-Extension 🎨 Developed a unique extension using JavaScript and Manifest V3, enhancing my understanding of how browser extensions work. This project provided a hands-on experience with complex JavaScript functionality, including copy, paste, pick, and save as text features.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published