How to build a Google Chrome Extension
When a user enters a URL into the address bar of a browser, a request is sent to a database that processes the request and responds with the information the user requested. This includes text, some styling and Javascript for functionality. This is the standard experience developers create for a user. This is great and all, but what if we wanted to transform or customize our experience beyond what developers originally intended? (Hint — the answer is ‘extensions’.)
In this how-to, I show you how I built an extension that allows learn.co students to manage social elements on lesson pages. There are different kinds of extensions, but just know that at its core, this is a browser action extension that will hide or show elements on specific pages when a student clicks the extension button in the Google Chrome toolbar.
Before we start, make sure to refer to Chrome documentation when needed, since there are many options available to you when making extensions as well as many changes to the Chrome Extension keyword library. This way, you can implement your own features when developing your own extension. I suggest you build your own hide-this-element style extension and follow along.
manifest.json
Every extension you make will need a manifest.json file. It’s how our extension is going to talk to Chrome. It tells Chrome what the extension does, and when the extension is applicable. Create a file in your extension directory called manifest.json. The minimum this file needs is an object with 3 key-value pairs:manifest_version, name and version.
At the time this blog was written, the current "manifest_version" is 2.
As you may have noticed, we’ve also included a couple of key-value pairs to our first object:
A key "description" with a string that describes the extension.
A key “icons” with a value of an object with 3 key-value pairs. Make sure you create 3, square .png icons for your extension. Chrome will select the correct .png file it needs for the right occasion.
We’ve also made a new key-value pair:
A “browser_action” key with the value of an object. It has 2 key-value pairs; default_icon and default_title, both values are string data-types.
Developer Mode
Developer mode is where we can start to test our extension by using it on our browser before we publish anything. In a new tab, type chrome://extensions/ into your URL bar. This will return a list of all extensions downloaded to your browser. Toggle “developer mode” in the top right hand corner, then click “load unpacked”. At this point, you want to select the directory you made for your extension to load it.
Now you can just click refresh on this page whenever you make changes to your codebase to test your output.
content.js
Your content.js file houses your Javascript code that will manipulate the content on pages specified by you, the developer. You have to let your manifest.json file know you would like to inject this script.
In a new key-value pair, add the key "content_scripts" with an array of objects. The first key-value pair within this object will have a key of “matches” and a value of an array. This array will contain URLS in which you would like your extension to work. Note that the * at the end of the URL denotes a wildcard. This means that this extension should work on any URL that include the characters that come before it (i.e. www.learn.co/track/).
The second key-value pair will be “js” with an array of script files you would like to have loaded up and interact with your selected webpages.
As I mentioned earlier, this is an extension that hides elements on specific learn.co pages, so let’s take a look at how I’ve coded my content.js file:
First, code in a console.log()and refresh your extension to confirm we’re all connected:
This will populate your browser’s console with the corresponding message:
Now it’s time to implement our initial code. Note: A Chrome extension’s default nature is to execute your content file after the DOM is loaded. There is no need for you to add a ‘DOMContentLoaded’ event listener.
The code below selects the elements to be changed upon page load, then sets their display to “none” so that when the selected page loads, the <div> elements won’t be deleted, but they will remain invisible until I want to see them again.
Our extension now hides elements on a webpage on page load:
Now you can focus your completing lessons until you want to socialize or race your classmates. Speaking of which, to toggle the style value of these elements so they will show up at the click of a button, we will inject a new file called background.js.
background.js
Create a file named “background.js”. This file will hold our event listener:
chrome.browserAction.onClicked.addListener(<yourFunctionName>)
This event listener is telling Chrome, “when this button is clicked, please execute this function”. This function has one argument, tab. Within this function, tab will refer to the “tab” object we will need properties from later. In the function block, I have a msg variable that stores an object.
Message Passing
This message is created so that we can get permission from content.js within our document. We want permission to interact with our button (background.js) located outside of our document— kind of like a request and response cycle. We are requesting to have our extension button have permission to change a webpage, and the response would be the actual change.
Besides a message, our function needs a way to send this message. sendMessage is a method that is available to us through the Chrome extension library. It takes two arguments. The first argument is the current tab we would like to send our message to. We just need to use that tab’s id property. The second argument is the message we are sending to content.js.
Let’s configure manifest.json to accept our background.js file.
Notice we’ve added a “permissions” key so that our extension is allowed to access the current tab, and as values we’ve stored specific URLS as elements in an array with string data-types. Now we can send our message, let’s program content.js to “listen” for it.
Our Event
Our content.js needs a function that will be executed when we click our button (and subsequently, send our unique message). This line is our listener for our message from background.js:
chrome.runtime.onMessage.addListener(gotMessage)
addListener has a method available to us that points to the function where we will code our hide/show logic. This function will take 3 arguments. The first argument is the message object we sent from background.js. The second argument is the sender (background.js). The third argument is the sendResponse (if we were going to send a response).
This function will only be executed if our message value is the same as the one we created in background.js. Our extension now hides and shows elements at the click of a button. It will toggle between ‘none’ and ‘block’ using some inverse logic.
Deployment
Once you’ve tested your extension and it works, deploying your extension is relatively easy. Use this link to sign into your developer account. I don’t suggest using your personal google account if you need to create a developer account. Select all your files in your file browser and compress them into a .zip file. Use a low version like “0.0.1" and use software version conventions so you can update your extension as it progresses through alpha, beta and full release versions.
Conclusion
With the use of Chrome documentation and this how-to, you should be able to create a Chrome extension that changes elements on a given page. Browser extensions are pretty powerful. You can do a lot more with some creativity and experimentation. Have fun!
