Design chrome new tab your own by building a simple chrome extension with HTML, CSS, JS and some open API's

Today, I want to share how to design chrome new tab with simple steps. Minimal configuration with basic knowledge of HTML, CSS and JavaScript and JSON.

I hope I'm able to help anyone who wants or needs to design their own chrome extension Here I am going to share how to design new tab. Like this we can create awesome chrome extensions.

Create a root folder inside that add new file name it manifest.json

{
  "name": "New Tab",
  "description": "Replace new tab page with a personal dashboard time, weather, quotes, and inspiration.",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting"],
  "chrome_url_overrides": { "newtab": "index.html" }
}

How to add our source code to chrome browser as extension?

1. Open chrome browser go to settings page.
2. Select extensions link from left panel.
3. Turn On developer mode right top corner in extension page.
4. Click Load unpacked button and select your root folder which we created at beginning.
5. Turn off developer mode. Open new tab to see your design based on your HTML, CSS and JavaScript.

Write your own HTML, CSS and JavaScript and design your new tab as you like.

Note: We are storing data in chrome.storage method which we can access later wherever we need.

For reference I am sharing my design code [inprogress repo] link: https://github.com/vulchivijay/chrome-extension-newtab