![]() color: A color code (HEX or RGB) as string.It handles when the button "Add" is clicked saving a new color entry to the color collection.īy reading the event input properties, this function creates ColorDefinitionElement instances which is used to populate the UI. When completed, the result is passed to downloadCssFile function. It parses the current color collection on storage to a string format as css variables. Method that handles the "Get CSS" button. It gets the color name and search both in UI and storage, removing that color element. Method that is fired when delete button is clicked. This function guards agains naming a color with a name already in use and empty strings.Īfter change both UI and storage are updated with the new value. This event is set on the ColorDefinitionElement class constructor. Method that is fired when a ColorDefinitionElement intance htmlElement is clicked on the color name. Function: handleColorLabelChange(clickEvent) Receives the css file content as a string and execute the download by creating an anchor tag element and executing the click event. It was used flexbox to display elements in a stacked column.Ĭolors were separated from the main css file and used as css variables to be easier to manipulate it.ĭefine all functions that provide business logic of the application. 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".Ī color collection is an array of objects that represents all the colors and names that were saved previosly. 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 file it is defined the icon images that should be use on the browser Views The manifest is a json file, required from Google, to comunicate how the application behaves and works: imgs: Contains all the image used by the application and this documentĪt the root of the application is set a configuration file for the code editor, setting some definitions like line indent and others:.scripts: Defines the application behavior. ![]() styles: Defines the application theme and appearence.views: Defines the application interface.root: Defines how the application should run and be set. ![]() The application is composed of 5 main parts: To see the code of a specific color just hover the mouse over the color entry icon:Ĭlick on the trash can icon to delete that color entry:Īs long at least 1 color entry exists, a export button will appear allowing a download of the named colors as css variables: To change the color name just click on it and a new name prompt will popup: With the color selected, click the button Add on the extension popup interface: ![]() How to use Set up extensionĬheck if Chrome is in developer mode and run "Load unpacked extension":Ĭlick on the extension icon and select the color picker input:Ī menu will popup and allow the color selection and adjustment: Chrome Extension - Color Picker Video Demo: Description: A chrome extension color picker application to extract colors from websites and images. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |