I write about software engineering, entrepreneurship, changing careers, and more.

5 Steps to Create a Chrome Extension

Over the course of a weekend, I scratched off two ‘firsts’ from my bucket list. Compete in a Hackathon 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: Google Chrome Developers Guide More on Manifest.json files Require JS Make-The-Space Code MAKE SURE TO TEST YOUR CODE LOCALLY! Navigate to ‘chrome://extensions’ Click developer mode on the top right corner Click ‘Load unpacked extension…’ (can be found beneath main header) 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!