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

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.

top right corner of the browser

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

newtab.js

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

loaded extension on chrome://extensions

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Understanding Promises in Javascript

Leetcode 1441: Build an Array With Stack Operations

Noteworthy Benefits that Node.js Offers to Web Applications!

Whats is new in Node.js 17 and how can I use it today?

How To Make a Twitter Bot With Node.js

Virtualization of angular ngFor — Welcome to the pure ngFor replacement — ngVFor !

Coffee Break — Simple Javascript Testing

TypeScript Type Annotations

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
consious_coder

consious_coder

void

More from Medium

National Alliance for Volunteer Engagement: A website to reflect a new iteration of volunteer…

A screenshot of black-and-white wireframes created in Figma. The wireframes include ‘home’, ‘about us’, ‘meet the team’, ‘contact’, ‘research’, ‘call to action’, and ‘statements’ sections.

Top Freelancer Jobs to Kick-Start Your Career — Synerge

The Design Date

DESIGN: 4 Reasons why you should be Hiring a Graphic Designer