Video Demo: https://youtu.be/Nji_N-Kk1Ls
Description: A chrome extension color picker application to extract colors from websites and images.
Access your extension manager:
Check if Chrome is in developer mode and run "Load unpacked extension":
Click on the extension icon and select the color picker input:
A menu will popup and allow the color selection and adjustment:
With the color selected, click the button Add on the extension popup interface:
The color will be shown right below:
To change the color name just click on it and a new name prompt will popup:
To see the code of a specific color just hover the mouse over the color entry icon:
Click on the trash can icon to delete that color entry:
As long at least 1 color entry exists, a export button will appear allowing a download of the named colors as css variables:
The application is composed of 5 main parts:
- root: Defines how the application should run and be set
- views: Defines the application interface
- styles: Defines the application theme and appearence
- scripts: Defines the application behavior
- imgs: Contains all the image used by the application and this document
At the root of the application is set a configuration file for the code editor, setting some definitions like line indent and others:
The manifest is a json file, required from Google, to comunicate how the application behaves and works:
In this file it is defined the icon images that should be use on the browser
There is only 1 file here that represents what should be shown on the popup interface that appears when the extension button is clicked:
In this html file it is defined a form with a color input and submit button to work as the input setup to save a new color in what is called a "color collection".
A color collection is an array of objects that represents all the colors and names that were saved previosly.
It was used flexbox to display elements in a stacked column.
Colors were separated from the main css file and used as css variables to be easier to manipulate it.
Define all functions that provide business logic of the application.
Receives the css file content as a string and execute the download by creating an anchor tag element and executing the click event.
Method that is fired when a ColorDefinitionElement intance htmlElement is clicked on the color name. This event is set on the ColorDefinitionElement class constructor.
This function guards agains naming a color with a name already in use and empty strings.
After change both UI and storage are updated with the new value.
Method that is fired when delete button is clicked. It gets the color name and search both in UI and storage, removing that color element.
Method that handles the "Get CSS" button. It parses the current color collection on storage to a string format as css variables. When completed, the result is passed to downloadCssFile function.
It handles when the button "Add" is clicked saving a new color entry to the color collection.
By reading the event input properties, this function creates ColorDefinitionElement instances which is used to populate the UI.
Class that represents a color entry.
This class constructor requires:
- color: A color code (HEX or RGB) as string
- index: A number used by the application to avoid repeated numbers, used by new added color.This is only used by colors that do not have a label (name) yet
- label: A color name as string
- handleColorLabelChange: An event for handling the color name click event
- handleColorDelete: An event for handling the color delete
The idea of separating this data as a class is to prevent code repeating across the application (DRY)
About removing the logic of the handleColorLabelChange and handleColorDelete from the class. It makes the application easier to understand and change making the class "uncoupled" from the application.
Query all the elements that will be used or referenced from the index.html.
The chrome API is used to access the storage and check if the user had already a collection saved.
It is also checked if there is any color saved to show or hide the "Get CSS" export button.
In case there is a collection on the storage, for each element in the collection, a ColorDefinition instance is created.
Each instance has a property "htmlElement" that return a Html element that represents a color saved, then appended to the container.
The main file that is included on the views/index.html. It sets the initial behaviour of the application and sets the event handlers on the interface:
I would like to thank all people that made CS50 possible on edX. I was able to learn much more about the foundation of the computer science. This chrome extension was done as the final project required at the end of the course and I much satisfied with my progress througout the experience that is CS50.
My honest thanks to David J. Malan and all of the staff envolved with this amazing work and experience called CS50.