fbpx
5 Steps to Create a Chrome Extension

DATE

Over the course of a weekend, I scratched off two ‘firsts’ from my bucket list.

  1. Compete in a Hackathon
  2. Create a chrome extension

Five badass women in tech came together to create a chrome extension called ‘Make The Space’ that relied on a Rails backend and a bunch of Ajax-y Javascript fun on the frontend. When we first decided to create the chrome extension — it was kind of intimidating. There are a TON of resources out there and it was difficult wading through all of the information. I hope this article helps with creating your own.

Let’s get started:

1. Create a new directory

mkdir new_chrome_ext 
cd new_chrome_ext

2. Create a manifest.json file

This is the bread and butter of your chrome extension. This is what lets chrome know what properties should be included in your extension.

The boilerplate will likely look something like this:

{
“name”: “Hello World!”,
“version”: “0.0.1”,
“manifest_version”: 2,,
“description”: “My first Chrome extension
}

3. Create a file called index.html in your directory

touch index.html

4. Make the extension active on a new tab by adding this to your manifest file:

"chrome_url_overrides : {
“newtab”: “index.html”
}

5. Customize and make it your own!

Here are some resources that helped us get started:

MAKE SURE TO TEST YOUR CODE LOCALLY!

  1. Navigate to ‘chrome://extensions’
  2. Click developer mode on the top right corner
  3. Click ‘Load unpacked extension…’ (can be found beneath main header)
  4. Resolve any errors (if any!)

Note: One issue we ran into was requiring jQuery, as our code relied heavily on it. A workaround, we added the jQuery library to our repo and included a reference to it in our manifest.json file.

If anyone has any resources they’d like to share, additional tips/tricks. Please reach out to me!

More
articles

Stay up to date with me!

Sign up for resources, tips, and the occasional freebie.