Hello there! Today we are going to quickly build a chrome extension from scratch.
Chrome extensions are programs that can extend the functionality of the Google Chrome web browser. Examples of extensions could be: an extension that notifies you of a new email while you are browsing the web, or another extension that delivers you the latest news when you open a new tab and many more.
In order to show how simple it is to create a chrome extensions, I wrote everything you need to get started in 5 simple steps:
1.Create a folder called “MyFirstExtension”
2.Inside that folder create a file called “manifest.json”. The “.json” part is the file extension. If you create this file inside Visual Studio Code then it’ll be smooth 👌.
3.Open the “manifest.json” file and past the following piece of code:
{
"name": "MyFirstExtension",
"version": "0.1.0",
"description": "This is my first extension",
"permissions": ["activeTab"],
"browser_action": {
"default_popup": "popup.html",
"default_icon": "type.png"
},
"manifest_version": 2
4.Now create that “popup.html” file mentioned on our manifest file. This file will hold the HTML for our popup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>My First Chrome Extension!</h1>
</body>
</html>
5.Now open Google Chrome and go to Settings > More Tools > Extensions and activate developer mode on the top right-hand corner. An option to “Load Unpacked” will appear. Click on that and navigate to the MyFirstExtension folder and load it!
And that’s pretty much it! You will now see a new icon show up on Chrome’s top bar where most other Chrome extensions are located. If you click on it you should see this:
Come back next week for the continuation of this article. We’ll add some cool features to our little extension.
Thanks for reading, see you on the next one. 👍
Additional reading