3 min read

Make your own new tab browser extension in 50 lines of code

There are plenty of home page and new tab replacement extensions on the Chrome Web Store that you could use, but why not make your own if it's easy?

New Tab extension by Isaac Bythewood on GitHub
Isaac Bythewood Isaac Bythewood
July 09, 2022

A benefit of making your own Chrome extension is that you also avoid all the excess tracking and bloat with a bonus of unlimited customizability. In my review of new tab extensions on the Chrome Web Store the majority of them had some form of tracking, usually in the form of Google Analytics, so I decided to just make a quick one myself!

To get started making a Chrome extension you need to create a folder and in that folder create a file called mainfest.json with the following:

In that same folder add a new file called newtab.html.

From here we need two more files, one for our JavaScript and one for our CSS as we defined in our HTML above. The JavaScript file is named newtab.js and the CSS file is named newtab.css.

And we are good to add it to Chrome!

  1. Open up the chrome://extensions page by navigating to the URL or clicking through the menus.
  2. Enable "Developer mode" in the top right corner by clicking the switch.
  3. Click "Load unpacked" under the Extensions navbar, appears after you enable "Developer mode".
  4. Select the folder you put all the above code in.

If you did all that correctly you'll see a block show up that looks like this.

New Tab extension block

Now if you open a new tab you'll be able to see all your work.

New Tab extension complete

You now have a working New Tab extension with zero trackers and you can customize it with whatever you want! In the cover photo of this post you can see my New Tab extension which you can find the source code for on GitHub.

I've added a few extras to mine like:

  • Bookmarks bar + bookmark edit button
  • Weather icon + temperature
  • Full weekday and month names
  • A 12 hour clock instead of 24 hour
  • Custom image background

All of which you can copy and paste out of my source code and use on your own New Tab extension if you like.

For more information on developing Chrome extensions I've found Google's official documentation to be very helpful.

I hope to have helped you along your way to creating more custom browser extensions. It's not as hard as I originally thought and I've found I can accomplish quite a bit with just a few lines of code. I'm probably going to try making some other browser extensions in the near future.

Related posts

Some posts in similar tags to this one.

EditorConfig website
Using EditorConfig to improve coding style consistency
EditorConfig has been around for almost a decade at this point. It is widely supported by many editors natively and many more with plugins.
Isaac Bythewood Isaac Bythewood
May 21, 2022
Caddy website
Caddy configuration for Django with some sensible defaults
Caddy is a great web server with sensible defaults but there a few things that I need to configure to have perfect synergy with Django.
Isaac Bythewood Isaac Bythewood
June 04, 2022
CodeMirror website
Using CodeMirror to show formatted code in Wagtail
Going through all the steps to use CodeMirror with Wagtail to show formatted code on the frontend of your site.
Isaac Bythewood Isaac Bythewood
June 11, 2022
© 2024 Isaac Bythewood. Some rights reserved.