Home
Creating Google Chrome Extension – Custom New Tab Page
A Chrome extension that loads a custom URL on the new tab page enhances productivity and personalization by directing users to their preferred tools or resources instantly. Whether it’s a project dashboard, a learning platform, or a focus-oriented homepage, this extension simplifies workflows and eliminates the need for manual navigation. It’s perfect for professionals, students, or anyone looking to streamline their browsing experience and stay organized with every new tab.
Follow the below steps to create a minimalistic New Tab extension for the Google Chrome browser.
Create the following 3 files inside a “newtab-extension” folder:
manifest.json
{
"manifest_version": 3,
"name": "Custom New Tab by Bhupal",
"chrome_url_overrides": {
"newtab": "newtab.html"
},
"description": "Set the New Tab page to any URL or local file you want.",
"homepage_url": "https://bhupalsapkota.com",
"offline_enabled": true,
"optional_host_permissions": [ "file:///*" ],
"permissions": [ "storage" ],
"version": "1.0"
}
newtab.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Tab</title>
<script type="text/javascript" src="newtab.js"></script>
</head>
<body>
</body>
</html>
newtab.js
//Set your New Tab URL here
const customTabUrl = "http://localhost:8080"
window.location.replace(customTabUrl);
How to install the extension:
– STEP 1: Save the code into files as above.
– STEP 2: Go to Google Chrome Extensions Page chrome://extensions/
– STEP 3: Enable “Developer mode” (top right corner)
– STEP 4: Click on “Load Unpacked” extension and locate the extension folder
– STEP 5: Open New Tab on Chrome, when prompted click “Keep it”.
Extending the extension:
On newtab.html, instead of using JavaScript to redirect the custom URL,
you can build the newtab.html page the way you want using HTML/CSS/JS.
That’s it. Enjoy!
Copy & Share
Creating Google Chrome Extension – Custom New Tab Page
https://bhupalsapkota.com/google-chrome-extension-new-tab-page/