Home > Articles

Creating a Simple Photo Editor with Chrome

  • Print
  • + Share This
Concluding his two-part series, James L. Williams, author of Learning HTML5 Game Programming: A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL, expands on the previous discussion of how to build custom extensions for Google Chrome. This time we build a complete (miniature) application with grown-up features.
From the author of

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.

  • + Share This
  • 🔖 Save To Your Account