Lets Make A Chrome Extention
Last weekend I had the pleasure of participating in T-Mobile’s hacktober hackathon where my teammates and I developed an app to help users browse the internet safely. During this experience, we used technologies that were new to me. With Chrome extensions being on the list of technologies I wanted to write a guide on how to set up a simple google extension.
What is a Google Extension?
Chrome Extensions are small web programs that use web technologies like Javascript, HTML, and CSS. A very basic Chrome Extension is made up of three major parts the Manifest.json, content script, and background script. That being said you can run a Chrome extension with the manifest alone.
Manifest.json
The manifest is important because without the manifest your Chrome extension wouldn’t even run. The reason for this is the manifest tells Chrome information about the extension such as its name, version, what file is the content script, and what file is the background script. The manifest only requires the following three attributes.
Loading Extension
To load your extension follow these steps.
- Step 1 — Make your way to chrome://extenstions. (only works in chrome browser)
- Step 2 — Developer mode switch in the top right corner.
- Step 3 — Click the Load unpacked and select the directory you have your extension saved you should see your extension now.
Content scripts
“Content scripts are files that run in the context of web pages.” This allows the code in this file to interact with the web page the user is on. Out of the three files I mentioned this is the only one that can interact with the web page. Now that we know what a Content script is let’s add one.
- step 1 — Make the content script this just needs to be a .js file.
- step 2 — Now lets tell our manifest about our content script using the following code.
Now Chrome knows about this file you can do so many things in this file. During the hackathon my team and I used it to send the user’s current URL and time spent on this URL to the backend. Once the web page was loaded we would send the URL to the backend and assign the start time to a variable and once the page was closed we would assign the end time to a variable then send the difference to the backend as well.
Background script
“Extensions monitor these events in their background script, then react with specified instructions.” Background scripts are also the only script that persists unless you tell them not to. So anything that wants to persist for the lifecycle of the extension you would do that here. A background script is only loaded when need. Let’s add a background script.
- step 1 — Make the background script this just needs to be a .js file.
- step 2 — Tell the manifest about the background script using the code down below
Browser Icon
The last thing I want to cover is how to give your extension an icon. This can be done in two steps. Step one is to find an image you like 128px is the best size. Step two is to tell the manifest about the image. So when we load the extension chrome knows about it. If you don’t add an icon then you will be given the default one.
Google extensions are a topic that I’m still learning about but I hope this blog was helpful to you in any way. As always I will post links I found helpful in the process of creating my own extension as well links used during the creation of this blog.
Helpful links
