How To Make a Chrome Extension

Spire Digital
Sep 15, 2015

Background

In a previous post, I had written about a Chrome extension that I developed. This follow-up post covers how to make your own extension.

Getting Started

I recommend getting the Chrome Apps & Extension Developer Tool. This tool will allow you to load an “unpacked” extension in your browser. The alternative is to enable Developer Mode and delete/reload the extension with each iteration. You will also want to use your favorite text editor or IDE for HTML/CSS/JS. I prefer Notepad++ for Windows and Sublime Text for Mac.

The Manifest

The manifest.json file serves as the main method for the extension. It contains all the relevant information for the extension. This will make more sense when you review the code sample (below).

Breakdown of Manifest File

Note that many other things can be declared and you can even have an extension without a popup. The explanations below are scoped the the example (above).

  • manifest_version – on version 2 as of 2014 [source]
  • name – displayed on “chrome://extensions/” and the Chrome Web Store
  • version – this needs to be incremented with each build you push to the Chrome Web Store
  • description – a blurb about your extension, displayed on “chrome://extensions/” and the Chrome Web Store
  • icons – you can specify different icons for different sizes
  • default_icon – the icon to be displayed in the browserbrowser action – the action to be taken when the icon is clicked
  • default_title – the text displayed when you hover over the icon in the browser
  • default_popup – the html file to use as the “popup” when a user clicks the icon

The Pop-Up

This HTML file can display whatever you want. There are, however, a few limitations:

  • Size – The max width is 580px and the max length is 780px [source]
  • If your page is bigger, you will see scroll bars
  • OnClick – Cannot be set in the HTML file. You will have to make an accompanying JavaScript file to find each element and set its OnClick() action. [source]
  • Note: It is a best practice to load <script>s at the end of a document

Packaging Your Extension

To get your extension on the Chrome Web Store you will need to:

  • Sign Up for a Developer Account
    • One time fee of $5
  • Minify your CSS and JS
    • Plenty of free tools online or plugins for Notepad++ and Sublime
  • Optimize your images
    • ImageOptium or tinypng.com are good tools that we use
  • Zip up the files
    • .zip compression is built into OSX and Windows 8, just right click and compress
  • Upload to Google
    • Log into your dev account and upload your package
    • The review process can take an hour or so

Further Reading