Creating a Simple Photo Editor with Chrome
- Organizing the Application Files
- Skinning the Application
- Working with Image Effects
- Loading the Images
- Deployment
- Summary
In part 1 of this series, we created Chrome extensions using browser actions and page actions. In this article, we'll create a full-fledged application to implement a simple photo editor in Chrome. Similar to Instagram, the new application will be able to open a photograph and apply different filters. In addition, we'll give it limited support for undoing the last applied filter.
Organizing the Application Files
Our photo editor will be a touch more complex than the examples we've done previously, so it's extra important that we organize our files. Provided that you have the proper paths listed in your manifest.json file, you can put your files anywhere. We'll use the structure pictured in Figure 1, grouping JavaScript, images, CSS, and icons.
Figure 1 Application folder structure.