Creating a Google Chrome Extension

I recently created a simple Chrome Extension (CrypCheck) that displays the current, live, price of some of the popular Crypto Currencies. After going through the process, it’s a lot quicker and easier than you think to write, test and publish your own Chrome Extension.

Firstly, setup a working directory and push it up to Github (or whatever else you use).

#bash
$ mkdir my_awesome_chrome_extension
$ cd my_awesome_chrome_extension
$ git init
$ echo "#my_awesome_chrome_extension" >> README.md
$ git add .
$ git commit -m 'first commit, setting up project'
$ git remote add origin yourremote.git
$ git push origin master

Next, we’re gonna want to download the starter files that Google provide in their docs. Click here and go to the Resources heading. You should end up with four files downloaded, manifest.json, popup.html, popup.js and icon.png (this is optional and can be replaced with any icon of your choice).

Now we’re going to want to load the extension in so we can test it locally. Navigate to the URL chrome://extensions/. From here, you should see a button at the top labelled Load unpacked extension. After clicking it, navigate to the working directory of your plugin and select it. This loads the Plug-In into your browser from the directory. You should be able to play with the sample app now, which allows you to change colours. Now you’re ready to build and test your app!

Remember, if you require any third party libraries like jQuery, you’re going to need to load them in. Also, make sure to edit the manifest.json to reflect details of your own app, as opposed to the sample app. This is an example of what my manifest.json looks like.

#json
{
  "manifest_version": 2,
"name": "CrypCheck",
  "description": "This extension allows the user to check the price of Bitcoin, Bitcoin Cash, Ethereum, Litecoin, Ripple and IOTA.",
  "version": "2.0",
"browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage"
  ]
}

Depending on the complexity of your project, you might also want to setup a structure to it. Especially if you find yourself loading in fonts, libraies and anything else, below is the folder structure of my app.

One thing to note, regarding the icon.png size, is that Google requires the size to be 128x128 pixels. You can also provide additional sizes of 48x48 and 16x16.

Publishing your extension

After completing your extension and making sure it works, you’re gonna want to share it with the world. Head over to Chrome’s Web Dashboard and Login with your Google Account. Once the page loads, hit the Add new Item button. This will prompt you to upload a zip of your project, which can be done by running the following command.

#bash
$ zip -r my_awesome_chrome_extension_v1.zip my_awesome_chrome_extension

Once the zip file uploads you can edit the details before publishing. This includes where you want to distribute the app, the category you want it to appear in and all the other details regarding it’s publication.

Once you’re finished tweaking hit Publish Changes. Congrats! You’ve published a Chrome Extension! Make sure to delete the one in your browser and re-download it from the Web Store, so you’re running the production version.

If you’re interested, you can take a look at my app’s repo as an example.

As always, thanks for reading, hit 👏 if you like what you read and be sure to follow to keep up to date with future posts.