Chrome's new tab page is functional, to say the least. However, it's not quite as good-looking as you'd want it to be, and the features or information shown on the homepage might not be to your liking.
In a time when modern web browsers are dropping new tab pages, I decided to take Chrome's customization abilities for a spin. It turns out, creating your own custom homepage for Chrome with weather updates, RSS feeds, and a to-do list is quite easy.
Why bother with a custom homepage?
Extensions are good—but personal dashboards are better
As mentioned above, the default Chrome new tab page is fine if you're into minimalism. You get your recently visited tabs, and a bookmark bar on top to get you going. However, if you need any more from your home page, Chrome is going to disappoint.
I treat my new tab page as a personal dashboard that loads every time I fire up my browser, and hence, I need more information and functionality. There are plenty of extensions that can do this for you, such as Tab Widgets, start.me, and my personal favorite, Momentum. However, you're restricted in terms of what you can do with them, not to mention you'll be stuck with whatever layout the extension offers.
Creating your own homepage gives you complete control over what you see and how it looks. Plus, it's a great way to practice HTML, CSS, and JavaScript if you're just getting started with web development.
Setting up the page
You only need four files to make Chrome feel brand new
You don't need a fancy development environment to create a custom homepage. It's essentially an HTML file with CSS and JavaScript thrown in for styling and functionality, respectively. Start by creating a folder and adding the following files:
- index.html: This is the skeleton of your homepage.
- style.css: Controls styling, fonts, colors, and more.
- main.js: Adds interactivity, animations, and other functionality.
- manifest.json: A configuration file that tells Chrome what your extension does.
At its core, the project is a static web page. The index.html file defines the basic layout, featuring weather information at the top, a large digital clock in the center, a motivational tagline, and RSS and to-do sections at the bottom. The manifest.json file is what turns this page into a Chrome extension. A single line in the file also permits Chrome to replace its default new tab page.
"chrome_url_overrides": {
"newtab": "index.html"
} The weather card pulls live data for New Delhi using the OpenWeather API. The script fetches current conditions, temperature, and changes the icon to reflect the weather accordingly. It's a simple HTML request and updates automatically whenever the tab is refreshed, which should also be every time you open the new tab page.
const OPENWEATHER_KEY = 'enterAPIkeyhere';
fetch(`https://api.openweathermap.org/data/2.5/weather?q=New Delhi&appid=${OPENWEATHER_KEY}&units=metric`)
.then(res => res.json())
.then(data => {
document.getElementById('mini-weather').textContent = `${Math.round(data.main.temp)}°`;
document.getElementById('mini-location').textContent = data.name;
});
I wanted to have a big clock in the middle, as I often leave my browser on the new tab page when idle. The live clock helps fill that space while being useful. It runs with setinterval() updates, formatted to show AM/PM. It gives the homepage a sense of motion even when you're idle.
For the RSS feed, I wanted the MakeUseOf RSS feed by default, with the option to add more if required. This was a little tricky to figure out, but my local coding AI helped me quickly write an RSS parsing function that extracts article data.
const DEFAULT_FEEDS = ['https://www.makeuseof.com/feed/'];
fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(DEFAULT_FEEDS[0])}`)
.then(res => res.json())
.then(data => parseRSS(data.contents));
It loads clickable headlines with thumbnail images, the author name, an excerpt, and the publishing date and time. If a feed doesn't load due to content or CORS (Cross-Origin Resource Sharing) restrictions, a fallback proxy is used for reliability.
The final piece is the to-do list that saves to Chrome's sync-storage—meaning your tasks follow you across devices logged into your Google account. It's a simple but effective logic that ensures tasks are persistent and stay saved during Chrome sessions.
const storageSet = async (key, value) => {
if (window.chrome?.storage?.sync) {
return new Promise(res => chrome.storage.sync.set({ [key]: value }, res));
}
localStorage.setItem(key, JSON.stringify(value));
}; Tasks are added, displayed in a list, and stored automatically. You can also choose to clear completed tasks or switch between active and completed tasks if required. If you'd like to start using the same structure I made, you can visit the official GitHub repository for the full code and instructions.
Making it look good
Dashboards deserve to look good, too
As functional as a page might be, if it's not well designed, the user experience won't be great. A good-looking homepage isn't all about colors. It's about maintaining balance. I ended up using Bootstrap for responsiveness and icons for simple but neat-looking visuals.
The color palette is dark and subtle to make the page easy on the eyes in dark conditions. I also added a soft vertical gradient and a blurred vignette effect in the CSS to add contrast and depth to the page.
body {
background-image: linear-gradient(180deg, #040607 0%, #071017 100%);
color: #eef6f8;
overflow: hidden;
}
.card {
border-radius: 1rem;
background: rgba(255, 255, 255, 0.1);
} The result is a sleek, distraction-free interface that fits well with Chrome's default design. I don't want to let Chrome gobble RAM, and keeping it as close to stock as possible helps.
Getting your homepage into Chrome
Run your own extensions
Once you're done coding, you can load the homepage into Chrome as an extension. Follow these steps:
- Head over to chrome://extensions and enable the Developer mode toggle in the top-right.
- Click the Load unpacked button.
- Navigate to the folder with your homepage files and click Select folder.
And that's it. You should see the custom homepage loaded as an extension in Chrome. Any changes you make to the files in the extension's folder will automatically reflect in Chrome from this point onward by simply refreshing the page.
Depending on your code, the extension might ask for some permissions within the browser. You can either grant them the first time the extension loads or later from the chrome://extensions page. Additionally, this extension will work with other Chromium-based browsers like Edge, Brave, Opera, Vivaldi, and more without any changes.
Give your browser a fresh look
A homepage that’s uniquely yours
At this point, every time I open a new tab, I get a quick snapshot of the day, weather, headlines, and my ongoing tasks. All this information is presented in a layout I like, without the need for any distracting elements.
Building your own custom Chrome page is easier than you might think. If you're comfortable with HTML, CSS, and JavaScript, this project is a great way to practice those skills while creating something genuinely useful. And if you're not, it's a great way to get started regardless.
A few lines of HTML, CSS, JavaScript, and a couple of hours of fiddling can easily replace a dozen clunky extensions and give you something that reflects your routine perfectly. So if you spend hours in your browser every day, it's worth spending some more to make it truly yours.