Let’s Build A Chrome Extension That Shows Customized New Tab Page.
have you ever felt bored of seeing browser’s default new tab page, or using someone else’s tool or themes?
No Problem, Now you can build your own after going through this tutorial
Prerequisites
- you should have basic html and javascript knowledge.
so,what we are going to do?
- a basic html web page that shows a search bar and grid of most recently visited sites
- and making it as a chrome extension by including it in a manifest
- loading the extension into browser
To Get the Source Code for this project Click here
Let’s get started
first of all let’s project structure of our extension
- addon folder is our root folder, it contains
- css folder/ — it contains all the stylesheets required for the extension pages
- manifest.json- is the main entry file of extension, it has all permissions and properties of the extension that we need to define in it as per the requirement.
- js folder/ — contains javascript files.
- images/ — of course, it contains images
- newTab.html is the page we are going embed into browser.
Let’s quickly look into manifest.json
version is the normal version code as every application needs to identify updates, in our case it’s 1.0 , in case you want to update the extension in the store set it to higher than it was.
manifest_version is the version of extension api’s manifest, currently it’s 2, in future it may change.
set a name to the extension and add relevant description to it.
set the icons of extension, we can observe them in store and chrome://extensions . we need to set it in 3 different resolutions as 128px,48px,16px, for this tutorial we will use same icon.
extension icon can be visible at top right corner of the browser after setting browser_action default_icon. this property also needs three resolutions of the icon.
by setting chrome_url_overrides -> newtab property we can replace the default browser newtab page with our customized page.
to show the most visited sites we need a permission called topSites, so we need to define it in permissions.
And that’s the Setup let’s dig into newTab.html
that’s the markup for our page, if it’s hard to read here,checkout github link provided above, and download the project
images and required files mentioned in this markup are available in the github repo above
we will have a search bar so we can enter something in it and make a query to google
And coming to main part the newTab.js is
initialize references to markup elements and add required event listeners on window load.
- when search icon is clicked or enter is pressed it makes query to google
- newTab.search() is gets the value from the search bar and trims and sets the current window’s location,that automatically refreshes as per the query.
let’s see how to show listing of most visited sites
we can send a callback to chrome.topSites.get(callback) and it passes topsites as an array of objects and each object contains { title of the site, url of the site, ..addition properties}
what’s happening over there is →for each site we are making a card component and appending it to the list container.
That’s it! now Load it in Browser!
open chrome://extensions in your browser
and enable developer mode by toggling switch at top right corner of the window. after that you can see three options at top left corner of that same window.
click on load unpacked and it open file dialogue, select our project root directory and click open.if everything is fine then you can see card item like below
now open new tab, Boom, now its displays our webpage instead of default boring one.
what’s next?
- if you not like this design replace newtab.html with your awesome design and reload the extension,
get the Source Code for this Project
Follow me for more Content like this
