THE BEGINNER’S GUIDE: Build a simple Chrome Extension in minutes

January 06, 2016

“I don’t know where to begin!”

That’s how I felt only a few hours ago when I tried to figure out how to start building a google chrome extension. After taking the leap of faith and diving in to some documentation, I was pleasantly surprised and I hope you will be too. Here’s why..

Google Chrome has some great tools that can help you easily develop a simple chrome app. In this article, I’ll show you how to create a simple chrome extension that can change your Google homepage background. Join the code-along!

Let’s start with the basics:

What are extensions? They are small software programs that can modify and enhance the functionality of the Chrome browser. Chrome extensions extend Chrome’s capabilities. You write them using HTML, CSS, and JavaScript.

What can extensions do? Extensions can do quite a lot. They use either page actions or browser actions. They can’t use both.

A page action is a chrome extension that is specific to certain pages. You will usually see a UI added in the omnibox bar (google chrome’s address bar).

A browser action is not specific to a page and is relevant no matter where you are in the browser. You will usually see a UI added to the right of the omnibox bar.

Ready to dive in? Let’s do this!

STEP 1

CREATE A NEW DIRECTORY

Create a new directory called “My First Chrome Extension” in your terminal and open up your favorite text editor.

mkdir my_first_chrome_extension
STEP 2

CREATE A FILE CALLED MANIFEST.JSON

Create a file in your terminal called manifest.json.

touch manifest.json

This is just a metadata file in JSON format that contains properties like your extension’s name, description, version number and so on. Every extension needs to have a JSON-formatted manifest file.

**copy the code below and paste it in to your manifest.json file:

{
“manifest_version”: 2,
“name”: “Custom Google Homepage”,
“description”: “This extension shows a Google Image search result for the current page”,
“version”: “1.0”,
“page_action”: {
“default_icon”: “img.png”,
“default_popup”: “popup.html”,
“default_title”: “My custom google page!”
}
}
Step 3

CONNECT TO CHROME

Now we need to ..load the extension!

  1. Go to chrome://extensions in your browser
  2. Ensure that the Developer mode checkbox in the top right-hand corner is checked, like this:

3. Click Load unpacked extension to pop up a file-selection dialog & select your directory.

4. If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

Tip: It is common to have syntax mistakes. Make sure your commas & brackets are formatted correctly.

5. Ensure that the enabled box next to your chrome extension is checked so you can see it in action.

6. Now you can fiddle with your code :)

*IMPORTANT: Make sure to click reload after every change you make so you can see it in action →

Step 4

ADD CONTENT SCRIPT

Awesome! You now have your first chrome extension running. Let’s make it actually do something.

Content scripts are very important and allow you to interact with content loaded into your browser. It contains the layout logic. To incorporate content scripts we need to add the following code to the manifest.json file.

{
“manifest_version”: 2,
“name”: “Custom Google Homepage”,
“description”: “This extension changes the background image of the google homepage”,
“version”: “1.0”,
“content_scripts”: [
{
“matches”: [“https://www.google.com/*"],
“css”: [“main.css”]
}
],

“page_action”: {
“default_icon”: “img.png”,
“default_popup”: “popup.html”,
“default_title”: “My custom google page!”
}
}

“matches” refers to the URLs we want the Chrome Extension to change. In our example, we want it to work on the URL https://google.com/.

We can now links other files by adding it to content scripts. Since we want to add a background image to the google homepage, we should go ahead and add a css file.

Step 5

MAKE A CSS FILE

touch main.css

Add some custom css by going in to your console and finding the correlating class or id of the element you would like to edit. In my case I wanted to edit the background image so the following is the css code I needed to change the background image and a bit of the font.:

body#gsr.hp.vasq{
background-image: url(“http://interfacelift.com/wallpaper/D307f62b/03514_duskatlakezurich_1440x900.jpg");
}
div.gb_xe.gb_R.gb_Me.gb_Ee {
font-weight: bold;
font-size: 15px;
}

Now go to chrome://extensions in your browser, click reload

…go to Google & voila!!!

Congratulations on making your first chrome extension! Happy coding!

***Please note that this was a tutorial for page action chrome extensions. Browse action chrome extensions are a bit different. Part 2 of this series will contain a code along for browse action extensions.

More resources

Google official starter guide — build a browse action chrome extension

Chrome Extension Architectural Overview

Chrome Platform API Reference

Tech Talk: Getting Started with Chrome Extensions by Hubspot




Also in Stories by Linda Vivah on Medium

ES6 JavaScript: Understanding Let & Const

December 27, 2018

via GIPHY

There were many updates brought by ES6. One of the Syntax updates introduced was the concept of declaring variables with let andconst instead of var

To understand whylet & constwere introduced, we must first understand how var works & the concept of hoisting → That being said, here are the 5 questions we will cover in order:

  1. HOW DOES VAR...

Read More

Best Coding Books for Babies/Kids

October 18, 2018

I get a ton of questions regarding the coding books I read to my 15 month old son, specifically on my Instagram.

Since I have purchased quite a few, here are my top 4 coding book suggestions for babies/young kids:

1. ABCs of the Web

A great introduction to basic coding and web concepts for children in the form of the alphabet!

2. Web Design for Kids

Introduces basic coding concepts in an engaging...

Read More

Resources I used to pass the AWS Solutions Architect — Associate Certification Exam

August 29, 2018

I recently passed the AWS Solutions Architect Associate Exam and would like to share some of the resources I used to study for the exam. I used 2 different online courses to study, did the labs included with those courses, & took a few practice tests.

Background: My goal when studying was to really understand and be able to use what I learned on the job. I currently work as a web developer so I do...

Read More

10% Off Your First Order!

Use Coupon Code HIGHFIVE