back to listing index

Hackathons Image "Grayscaler" Chrome Extension

[web search]
Original source (
Tags: image-processing chrome-extension-development
Clipped on: 2017-06-17

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:

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

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:

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:

Image (Asset 1/8) alt=