Creating Chrome Extensions Pt. 1

Even after I began learning to code, I never thought about creating a Google Chrome extension. They have always been one of those things that I didn’t put too much thought into, as I only have a few of them, which I barely use. That changed this week when my group inherited a code base that was a Chrome Extension for bookmarking webpages. Then I was forced to wonder how they were made. Fortunately, there is good documentation on it.

The great thing about Chrome extensions is they are made in almost the exact same way you would make any other web app. You need a manifest, which specifies important information that the extension needs to run, javascript file/s, and an optional html file for the button that pops up in the browser.

Let’s make a simple Chrome extension that grabs our GPS coordinates and displays them!

The Manifest

The manifest is a json file with important information the extension needs. For now we will create a simple one.

{
"manifest_version": 2,

"name": "My First Chrome Extension",
"description": "Gimme yo location!",
"version": "1.0",
"icons": {
"48": "location.png"
},
"browser_action": {
"default_icon": "location.png",
"default_popup": "popup.html"
},
"permissions": [
"geolocation"
]
}

The browser action allows us to make a clickable icon next to the address bar. It references popup.html as to what it looks like, and location.png for its icon. Icons just sets the image in the Chrome extensions window. We are going to use the geolocation permission, which allows us to use the HTML5 geolocation API in the Chrome extension. I used this icon for the extension.

The Popup

Next we want to create our popup.html file. This is written pretty much like a regular HTML file, CSS and all. In it we will have a button that we use to get our location and display it in the popup.

<!DOCTYPE html>
<html>
<head>
<title>Locator</title>
<script src=”popup.js”></script>
</head>
<body>
<h2>Locator</h2>
<hr />
<button id=”locator”>Get Location</button>
</body>
</html>

As you can see, this is plain HTML. Nothing special.

The Popup Script

Time to create our popup.js file. This is going to be the logic we use to grab the users current location and display it in the popup. We will be using vanilla JavaScript, since it makes no sense to import the jQuery library for a few lines of code.

//dont execute script until DOM has loaded
document.addEventListener(‘DOMContentLoaded’, function() {
var locButton = document.getElementById(‘locator’);
  //listen for user to click button
locButton.addEventListener(‘click’, function(){
    //grab current position 
navigator.geolocation.getCurrentPosition(function(position) {
    //create a paragraph and append to body
var p = document.createElement(‘p’);
p.innerHTML = position.coords.latitude + “, “ + position.coords.longitude;
document.getElementsByTagName(‘body’)[0].appendChild(p);
    });
})
}, false)

This is all the code we need!

Using Your Extension

Now that we have made our extension, let’s actually use it! Head on over to your Chrome extensions window by typing chrome://extensions/ in the address bar. Check the box that says “Developer Mode”, and a dropdown will appear. Click on “Load Unpacked Extension”, navigate to the folder with your files in it and voila! Now we have a locator icon next to the address bar, and if you click the button, the coordinates of your position will popup!