Image "Grayscaler" Chrome Extension

This codelab will walk you through the steps of building a Google Chrome Extension which will let users pick an image from the web and convert it to grayscale.

We’ll be using the following extension APIs:

• Windows
• Context Menus

We’ll be using some of these new HTML features:

• Canvas
• document.querySelector
• input type range

You may install the completed extension from the Google Chrome Extensions gallery here.

Step 1: Requirements

To write an extension, make sure you have the following installed:

• Google Chrome
• A text editor

You do not need to know how to write an extension before completing this codelab.

Step 2: Project Setup

Create a folder somewhere on your computer to contain your extension’s code. Inside your extension’s folder, create a text file called manifest.json, with the following contents:

{
  "name": "Image 'Grayscaler' Extension",
  "version": "1.0.0",
  "description": "Select images with the context menu and convert to grayscale.",
  "icons": {
    "128" : "sample-128.png"
  }
}

Note that there is an icon file referenced in the manifest file. Feel free to make your own, but here’s one that has already been made:

sample-128.png
Powered by Evernote Publisher