In this article, I'll show you how to create the setup for a simple new tab Chrome Extention.
Make a new folder.
In this folder, we'll need to create a
manifest.json
file and anindex.html
file.
{
"manifest_version": 2,
"name": "Name of your extention",
"version": "0.1.0",
"chrome_url_overrides": {
"newtab": "index.html"
}
}
<!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>Name of your extention</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
- Turn on 'Developer mode' by going to chrome://extensions/ in your Chrome browser and switch the developer mode on in the top right.
- Click the 'Load unpacked' button on the left and select the newly created folder containing the files we just made.
Now when you open a new tab, you should see your Hello world page! 🎉
Get creative and customize it until you're happy with how it works.
The next step would be uploading your Extention to the Chrome web store. I'll be making an article on how to do that soon, so be sure to give me a follow!
This is my first blog post ever. So if you have any tips or feedback let me know below.
Thanks for reading. :)
Top comments (1)
This was a very wonderful intro to web extention.Loved it!