Creating my first chrome extension
Inspired by a tech talk given at work
--
Recently, one of my colleague at work gave a presentation about creating chrome extensions. Although I have used many Chrome extensions before, I have never tried making one myself. The talk was very insightful and it inspired me to create my first chrome extension and document my findings here for anyone who is just starting out.
First, what are web extensions?
We can think of web extensions as apps living inside our browser. They help to enhance our web browsing experience by providing additional functionalities. Almost all types of browsers like Mozilla and Safari, not just Chrome browsers, support web extensions. However, due to the popularity of the Chrome browser, we mostly hear about Chrome extensions and they are the most popular amongst developers.
To find out about the different Chrome extensions available for download, you can visit https://chrome.google.com/webstore/
My chrome extension
The chrome extension that I am going to share is called “video speeder”. As the name suggests, it can be used to speed up or slow down the playback rate of Youtube videos. While Youtube videos might already have this functionality, the range of playback rates we can select is limited. This extension will help to provide more options in the range of playback rates that we can choose from.
Before going more in depth, let’s look at how we can control the playback rates through setting values on the relevant DOM elements.
With the Youtube video playing in the browser, open the browser console. On the console, you can control the playback rate of the video by adding a simple line as seen below:
As we can see, the Youtube video has a tag video. What the line here, document.getElementsByTagName["video"][0].playbackRate = 4, does is that it simply selects this video element by tag and then set the playback rate to the desired value.
This concept will be what I will use when I create my Chrome extension.
Lets get started
Here is a snapshot of how my project file for the Chrome extension looks like and we will go through each file one by one.
manifest.json
“popup.html” contains the code to render the interface that users can interact with when they enable the chrome extension.
“content-script.js” contains the code that will perform reading and modification of the DOM of the web pages the browser visits.
“icons” is simply an array of images for the icon of your chrome extension. The image that you place here have to be of PNG type. If it is of JPG type, the icon might not render.
To understand more about what the different keys means in the manifest.json file, check out this article:
popup.html
This is a simple HTML file that defines the interface that users can work with. There are 2 buttons for the users to indicate if they want to increase or decrease the speed. When either of the buttons are clicked, it will trigger the listener function inside popup.js.
popup.js
Here, we see that there is a listener for the two buttons rendered in popup.html. When either of those buttons are clicked, a message will be emitted via the Chrome Apis.
Check out this link for a complete list of all the APIs available:
content-script.js
The content-script file will contain the code to modify the DOM of the webpage. Remember that our ultimate goal is to set the playback rate of the video and the code here will do exactly this when it receives a message that is sent by popup.js.
Uploading it to your browser
Now, that the code is completed, we will need to add it to our browser so we can use it.
- Go to browser, type chrome://extensions/
- Enable the “developer mode”
- Click on “Load unpacked” option and choose the project folder to upload.
- Go to Youtube and open a video -> This extension only works for youtube videos.
- Go to the top bar to enable this chrome extension, “Video speeder”.
- There will be a pop-up with plus and minus signs. Click on plus sign to speed up the video and minus sign to reduce the speed of the video.
(If you find that it doesn’t work, make sure other extensions are disabled)
- Each time you update your project code, simply return to this page and click on the refresh button as seen in the image below.
That’s all!
This is just a very simple first chrome extension project for our own personal use.
Some additional information: If you dislike working with raw html and js, you could check out using React (frontend JS library) with your chrome extension. Here is a link to the boilerplate code that you could consider.
