Google Chrome is the most used web browser today, and Chrome extensions are great software development tools that extend Chrome’s functionality with new features. Google has created comprehensive documentation, which provides basic information and gets the ball rolling.
But as extension complexity increases, we must rely on third-party forums like Stackoverflow and Hackr.io for help.
In this article, we will go through the process of creating an intermediate-level Chrome extension, which will reduce the opacity of the video player controls on the YouTube website, to increase the visibility of the content.
By the end of this Chrome extension tutorial, you’ll know how to make a Chrome extension.
What is a Chrome Extension?
A Chrome extension is a plug-in for your Chrome browser. But you might ask yourself:
Why build a Chrome extension in the first place?
Chrome extensions improve, extend, and customize the functionality of your browser. A lot of software solutions have “extensions” – also known as “add-ons” or “plug-ins.”
But Chrome makes it uniquely easy to develop an extension.
Why Create a Chrome Extension?
These days, programmers rely on tons of innovative web development IDEs and other tools to enhance their experience.
So, creating a Chrome extension is excellent programming practice.
You can add it to your programming portfolio or just develop the Chrome browser of your dreams. Some people create one-off Chrome extensions for their job, while others develop Chrome extensions for fun.
Where Can You Get Ideas for Chrome Extensions?
To create Chrome extension projects, think of something you might like to see on your Chrome browser. You can also take a look at some of the most popular Chrome extensions available:
- Checker for Google Calendar. Make sure you never miss anything on your schedule with an embedded Google Calendar.
- Grammarly. Check any email (or document) before selling it for grammar or spelling errors.
- LastPass. Password managers are very popular – especially in today’s world of single sign-on and two-factor authentication.
For the most part, Chrome extensions help you get work done easier. But they can also be for shopping (like the Honey coupon application) or recreation (like the Edit Anything web editor).
Ready to learn how to build Chrome extensions? Keep reading.
Step-by-Step: How to Make a Chrome Extension for Video Player Controls
The easiest way to become a successful Chrome extension builder is to practice. Let’s start with a Chrome extension for video player controls.
Our Chrome extension will be useful when you have paused the video, but the video player controls are hiding the content of the video behind them.
Take YouTube. When you pause a YouTube video, the player controls are always visible, such as this video about Chrome OS:
So, we’ll learn how to create Chrome extension code that manipulates that overlay. When we have created our plug-in, we will be able to remove the player when we pause the video, resulting in this:
1. Create a Manifest.json File
The first step in this Chrome extensions tutorial is creating your manifest.json file.
The manifest.json file contains important extension information, like its name, version, actions, and permissions. Every extension must have a manifest.json file.
So, let’s create a manifest.json file with the required fields in an empty directory:
{
"manifest_version": 2,
"name": "My First Extension",
"version": "0.1"
}This creates a basic Chrome extension that simply just loads the extension into Chrome. Keep in mind that the ‘manifest_version’ must always be 2, as version 1 is no longer supported starting from January 2014. Also, the manifest file must contain the three fields above.
2. Load the Extension into Chrome
Your next step toward making a Chrome extension is to load the extension into Chrome. \
Open up the Chrome extensions page. To do that, either click on the three dots in the upper right corner, then go to ‘more tools, and then “extensions.” Or, go to the address bar and type: “Chrome://extensions/.”
After that, turn on “developer mode” in the top right, then click on “Load unpacked” in the top left.
Now, browse to the directory with the manifest file, and then select that folder. The list below will not display that extension.
After making any changes to the code, you can refresh the extension by clicking on the small refresh icon located on the right side of the extension.
3. Develop your Content Scripts
According to the official documentation, content scripts are files that run in the context of web pages. They can read or modify a web page, and pass information to their parent extension with the standard Document Object Model (DOM).
The content script can exchange “messages” with their parent extension and therefore can access Chrome APIs used by their parent extension. Some commonly used Chrome APIs are onConnect, onMessage, and sendMessage, among others. All are important in making a Chrome extension and building Chrome extension architecture.
Content scripts are completely isolated from the external environment, and this enables them to make changes to their own Javascript environment without affecting the webpage or other content scripts.
To sum up, content scripts can access and modify the web page that the browser visits. This distinguishes them from other Javascript files in the project. Content scripts have to be declared in the manifest file, along with their details, like which URL they’re allowed to access.
4. Inject your Content Scripts
Content scripts can be injected into a webpage(s) in two ways programmatically or declaratively. In this example, we use the programmatic injection as we only have to run the script on specific occasions. Before we inject the script, we have to first provide the active tab permission in the manifest, which enables the script to run on the currently active tab. If you want to automatically execute the content scripts on a new tab, you have to declare the content scripts in the manifest.
So we update the manifest.json file like this:
"permissions": ["activeTab"],
"content_scripts": [
{
"matches": ["https://www.YouTube.com/*"],
"js": ["contentScript.js"]
}
]Now we can inject the content script into the webpage. We can either inject a part of the code, or an entire file. In this example, we will inject the entire javascript file, contentScript.js. After injecting this file, it will modify the YouTube player window to reduce the opacity of the player controls. This file contains the following code:
//contentScript.js
var s = document.getElementById('stylehidecontrols');
if (s) {
s.remove();
}
else {
s = document.createElement('style');
s.id = 'stylehidecontrols';
var r = '#movie_player .ytp-gradient-top, #movie_player .ytp-gradient-bottom, #movie_player .ytp-Chrome-top, #movie_player .ytp-progress-bar-container, #movie_player .ytp-Chrome-controls';
s.appendChild(document.createTextNode(r));
document.body.appendChild(s);
}First, we try to find an element with id “stylehidecontrols.” If it is found, we remove it to bring the opacity back to normal. If it is not found, then we have to reduce the opacity of the video player controls. To do that, we first create a “style” element to contain CSS style information and assign it the id “stylehidecontrols”, which we tried to find earlier.
Now we create a text with CSS style information of various known elements in the YouTube website, which are associated with the video player. Then, we assign it to a variable, “r.”
Note: we set the opacity for all these elements to 0.2, so they don’t obstruct the view but still are visible and can be operated upon.
Now we create a node with the variable “r,” and then append it to the style element “s.” And finally, we append “s” to the document body. This causes the new style to take effect immediately and reduces the opacity of the video controls. If the extension icon is clicked again, it will just remove the style element from the DOM, hence restoring the opacity to the original.
5. Develop your Background Scripts
To inject the content script programmatically, we need a javascript file, which always runs in the background and listens for the click event. Content scripts have some limitations as they cannot listen to the click events. So, we need a background script for this task that can access Chrome API, but not the webpage.
This background script listens to a specific event. Then, it can inject javascript code into the page, which in turn can access and modify the webpage. We must declare the background script file in the manifest like this:
"background": {
"scripts": ["backgroundScript.js"]
}The background script is responsible for listening to the click event and then injecting the “contentScript.js” file into the page. The contents of the background script are:
//backgroundScript.js
Chrome.browserAction.onClicked.addListener(
function(tab) {
Chrome.tabs.executeScript(tab.id, {
"file": "contentScript.js"
});
});In this example, we have directly injected the file into the page. We can also use message passing to achieve this task, where the background script will send a message to the content script on click event, and then the content script will listen for that specific message. If the message is received, it will execute the code.
When you write Chrome extension code, content scripts can also be injected “declaratively.” To do that, we can add something like this to the manifest.json file:
"content_scripts": [
{
"matches": ["http://*.mywebsite.com/*"],
"CSS": ["styles.CSS"],
"js": ["contentScript.js"]
}
]The CSS field is optional and can be used to inject CSS files for the matching pages. They are injected in the order they are declared in the array.
6. Create Your Actions
Actions are important to Chrome extension development. Chrome extensions can have two types of actions, page actions and browser actions. Page actions can act only on the current page, unlike browser actions. We can include icons and popups for the extension using actions. To put an icon in the main Google Chrome toolbar, add this to the manifest.json file:
"browser_action": {
"default_icon": {
"32": "icon.png"
}
}You can create icons of any size in an image editor like Photoshop, Illustrator, or Gimp. Additionally, you can just download the icon of the required size from the internet. Once you have the icon, place it with the current name in the root folder.
This adds a 32 by 32 size icon in the main toolbar of Chrome. We can also include icons of other sizes, but If not provided, Chrome will automatically resize the icon to fit accordingly.
7. Build Your Complete Manifest.json File
This is the last process in your Chrome plugin development. After we add all the above fields to the manifest.json file, it will look like this:
//manifest.json
{
"manifest_version": 2,
"name": "Youtube Player Controls",
"version": "0.1",
"description": "This extension reduces the opacity of Youtube video player controls for better visibility of the content.",
"background": {
"scripts": ["backgroundScript.js"]
},
"permissions": ["activeTab"],
"content_scripts": [
{
//"matches": [""],
"matches": ["https://www.YouTube.com/*"],
"js": ["contentScript.js"]
}
],
"browser_action": {
"default_icon": {
"32": "icon.png"
}
}
}The final directory structure is as below:
- backgroundScript.js
- contentScript.js
- icon.png
- manifest.json
React & TypeScript Chrome Extension Development [2024]
Conclusion: How to Develop Chrome Extensions
We’ve gone through a complete breakdown of how to make a Chrome extension.
But this was only a basic preview.
For more information about Chrome extensions and how it works in the background, please visit the official documentation or a tutorial on how to develop Chrome extensions.
Need more inspiration?
Check Out Chrome’s Best Free SEO Tools
Frequently Asked Questions
1. Is It Easy to Make Chrome Extensions?
If you’re already a programmer, it’s surprisingly easy to make your own Chrome extensions. But you’ll need to put it through an extensive testing and quality control process before it’s ready for the Chrome store.
2. Can You Make Your Own Google Extension?
Anyone can make their own Google extension. Your Google extension will run on your local Chrome deployment (on your own computer) unless you upload it to the Chrome marketplace – where anyone can use it, like downloading an app for iOS or Android.
3. What are Google Extensions Written In?
Google extensions use the popular web technologies HTML, CSS, and JavaScript. Because of this, they’re a great way to practice building websites and web applications.
4. How Much Does it Cost to Publish a Chrome Extension?
It’s only $5 to publish a Chrome extension. But you should ensure you meet Google’s quality standards – and be aware that those who download your extension can also rate and review it!
