Making You Own Custom Startpage For Chrome

Suggest An Edit

Table of Content

Introduction

Well, I’ve been wanting to make my own homepage or newtab page. I thought this kind of thing is only possible in firefox. You might have seen some cool custom firefox startpage like this one. Turns out, if you want a custom newtab page on chrome, you have to make an extension for that. Fortunately, it is super simple.

Making the extension

Prerequisite

Before we start, we must prepare several things.

  • Basic knowledge of HTML, CSS and JS (JS isn’t required though, it’s optional).
  • Text editor
  • Chrome based browser (duh? obviously)

Preparing the project

First thing first, make a directory with the name of your choice anywhere you prefer. I’ll have mine at ~/codes/chrome-page. Then inside that directory, create a manifest.json file. Fill it with this.

{
  "name": "Startpage",
  "version": "1.0",
  "description": "My personal custom startpage",
  "manifest_version": 2,
  "chrome_url_overrides": {
    "newtab": "index.html"
  }
}

If you want to know this file even more, google has it covered for you. The important part here is the chrome_url_overrides.newtab field. You should point that to an HTML file that you want to make as a startpage.

Making the page

Honestly, nothing much to tell here. You can go as overkill as you want for a startpage or just go ahead and pick one from the internet. I suggest you to go to r/startpage subreddit for a start. Here’s mine.

old startpage

It’s super simple, I just set some vim-like shortcut (prefixed with colon) like :o to open a new website, :s to do google search, :gh to open github, etc. If you want mine, you can get it here.

UPDATE Sat, October 17, 2020

I made a new once since the old one is too minimal. Here’s the new one.

new startpage

You can get it here

UPDATE Tue, February 16, 2021

I simplified my previous startpage by removing the icons and changing the font and the background. I also added a random sentence at the top so I will always memorise a word everytime I open a newtab page. There’s also a link to jisho.org in case I got interested on that word.

newer startpage

You can get this new one here and I have an API that serves random word here.

Applying the homepage

To apply the homepage that you’ve made, go ahead to chrome://extensions and activate Developer Mode at the top right corner. A new menu should appeared. Click on the button that says Load Unpacked. A file manager will appear, go ahead and navigate to your project directory and click OK or Choose or whatever your file manager gives you. New extension should appear with the name that you choose earlier on manifest.json. Activate it and that’s it, your custom startpage should appear whenever you open a new tab.

Conclusion

Making a custom startpage for google chrome isn’t that hard. I thought it requires some weird trick or something but it’s not. Hope you find this post useful and see ya later, have a nice day! ツ

Comments