Creating a Google Chrome Extension

Its actually quite easy to create an extension for everyone’s favorite Chromium-based web browser these days. So easy, in fact, that you will get a quick tutorial to have a new extension up and running in just a few easy steps!

Let’s start off by thinking about the very basic building blocks we will need to get an extension up and running.

Manifest
HTML file
Icon image

That’s honestly it for a very basic extension!

Okay, so lets talk about the manifest file first. Make a new file in your directory called manifest.json
This file will contain properties that will define how certain parts of your extension look and operate.
For this example, we will use the following content in the file:

{
  "name": "Example Extension",
  "description": "My first extension!",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/logo16.png",
      "32": "/images/logo32.png",
      "48": "/images/logo48.png",
      "128": "/images/logo128.png"
    }
  },
  "icons": {
    "16": "/images/logo16.png",
     "32": "/images/logo32.png",
     "48": "/images/logo48.png",
     "128": "/images/logo128.png"
  }
}

That is pretty straight forward, but I’ll go through what everything means.

Name is the name of the extension
description is a short description of the extension
version is the version of the extension (this should go up with each release and update)
manifest_version determines what features are available to use in the extension
default_popup is the page that is shown when users click the icon for the extension
default_icon is a collection of different sized icons for the extension
icons is a collection of different sized icons for the extension

Im not really sure why you need both sets of icons, but you really do.

Here, we will put some very basic html to show “Hello World!” when the user clicks the icon of the extension.
Place this in your popup.html file.

<!DOCTYPE html>
<html>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

That’s it, the code is done! Let’s go ahead and get this loaded into Chrome so you can test it. Open Chrome, navigate to chrome://extensions and you will see all of your installed extensions.
Click the button that says Load Unpacked, select the folder that contains your html and manifest.json files and your extension will be loaded!

Now you can test your extension by clicking it and you should see a popup saying “Hello World!”

This is only the beginning! Google has some incredible documentation and samples you can look at here and you can see the code for the extension I wrote which inspired this tutorial over at my GitHub repo!

Leave a Reply Cancel reply