How to build your first chrome extension
So you are curious about, how to make a chrome extension.
What can you even do with a chrome extension, and can a chrome extension even be useful?
Before I made my first chrome extension, I had no clue how it worked. Is it required to use any technologies specific for building an extension? Does it have its own kind of framework or even language?
I was surprised how easy it turned out to be.
It is just like we build a website! 🥳
... With the opportunity to use Chrome's API, running with Javascript.
Google have made a great documentation to the API. You can find it here
We will not be using the API in this example.
Let me show you how easy it is, to get started.
popup.html manifest.json
These two files, are what you need to get started with your project
manifest.json
The manifest.json is required, for building a chrome extension.
In this file, you will give the documentation about your extension. Anything from title, description, author, we are also setting the icon (as you will see in the topbar), the website(s) the extension will need permission to (possible to set to all) and toggle your background and content scripts.
What is background and content scripts?
In some cases, you might wanna get content from the website you are on, and listen to or use this content inside your chrome extension popup. This was required in my first chrome extension styled components indicator.
I am simply checking, if the website is using styled-components or not. For this, I have to look at the DOM elements on the current website. Then the popup will give a message, if it does or not. So somehow, I wanna communicate between background and content.
My code is open sourced and you can see it in this repository
Lets return to manifest.json for this beginner project.
{
"manifest_version": 2,
"name": "Hello world!",
"description": "This is my awesome hello world extension",
"version": "1.0",
"author": "me",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
This is the minimum details you need in manifest.json and it explains more it less itself.
popup.html
Like mentioned earlier, its just like we build a website. A website in this small popup when we click on our chrome extension icon 😎
<!DOCTYPE html>
<html>
<head></head>
<body style="background: #d44c31">
<h1>My awesome hello world extension</h1>
</body>
</html>
Simple as that!
Just like we know HTML, you can implement a style.css and scripts if you want to.
Okay, awesome! How can I see it in action?!
First you click on Chrome's extension icon in the top right corner.
Select Manage extension
Click on Load unpacked and select the project folder.
Click on Chrome's extension icon again, and click on the needle to activate.
You can now see the extension in action - how awesome is that 🤩
And that is how to build your very first chrome extension. This article will help you get started with the basic of a chrome extension project. When you are ready to upload it to chrome webstore, you will find the progress on Chrome's developer dashboard.
I asked in the top of article, is a chrome extension even useful?
And yes. Yes it is. I would like to show you my current extensions, I am using.
I hope you found this article useful, and happy hacking with your first Chrome Extension 😎