Workshop #002: Building Your Own New Tab Page Using Chrome Extensions

Stop using that default new tab page, and just build your own 🔨

Ever wondered how Grammarly effortlessly corrects your spelling or how AdBlocker wipes out ads before they even appear? Welcome to our workshop— where we decode the secrets of Chrome Extensions that make all this possible!

TL;DR

• What are Chrome extensions

• New Tab Page

• Tools we’ll be using

• What we’ll be building

• What else can you build with extensions

What are Chrome Extensions?

Chrome extensions are small pieces of software built on top of Chrome, that can add extra functionality.

Some well-known examples include Ad Blockers, Grammarly, and LastPass, which securely manages passwords across websites. Honey automatically finds and applies coupon codes while shopping online. These are just a few among countless others.

One of the more sadistic examples is an extension called LeetCode torture, which doesn’t allow you to open a new tab if you haven’t solved a coding problem that day (we tried it and, gave up 3 days in 🙈).

What is the new tab page?

Most people using Chrome don’t change the default new tab page until they see a friend with a cool swanky one with bright pictures and inspirational quotes. That is how I came across Momentum, one of the most famous new tab page extensions on the Chrome web store.

For people unfamiliar with extensions such as Momentum, which allows you to change the appearance of your new tab, let me show you what you have been missing out on.

Default Chrome New Page | New Page from Momentum

Tools we’ll be using

This workshop will be a bit more technical than we’d like. But fear not! We are going to provide you with code for all of the parts in the workshop and also share a detailed written walkthrough in the next post.

Chrome extension building toolkit

• Replit: this will be our editor of choice to build our extension. You can follow along with your own IDE, such as VS Code, Atom or any other…

• React: we’ll be using React as the frontend JS library.

• ChakraUI: our UI library, so you don’t need to do everything from scratch.

What we’ll be building

Here is our pitch 🥁

Introducing our revolutionary, AI-infused (because, why not 😉) new tab page! Adding widgets has never been easier—you’ll create your own widgets to enhance our modular interface.

Our exclusive search bar defaults to ChatGPT—because who even Googles anymore?

For those stuck in the Stone Age or needing more “reliable” sources, simply type “g” and SPACE BAR for a direct Google search.

Oh, and did we mention? We’ve hijacked Chrome’s search bar. Now, typing “gpt” followed by SPACE redirects all queries chatGPT. Here’s to boosting your productivity by 10x 🍻

We’ve also included a dev joke generator for those moments when you need a conversation starter with your fellow software engineering friends.

Of course, we couldn’t forget the dark mode—because let’s face it, coders can’t be productive without it.

Additionally, we’ve integrated a simple weather widget so you’ll always know when it’s raining in Dublin. Though we’re not entirely sure if the weather API is reliable enough for that just yet.

Why build Chrome Extensions?

You might be wondering, why bother with Chrome Extensions? It’s a valid question. Most people might not see the need to create one. But if you’re unlike most people, crafting extensions tailored to solve your own challenges can be incredibly rewarding.

Take for instance, we started by creating a simple new tab page to teach everyone how to build extensions. It ended up becoming our perfect new tab page, enhancing our productivity and becoming something we use every day.

Imagine solving a bigger problem. You could potentially reach a market of 3 billion devices all running Chrome. Not a bad opportunity, right?

You might find out that you have the next billion-dollar extension idea already in your mind. Don’t let perfection get in your way, just give it a go!

To get invited to our next workshop email us at lets.giveago@proton.me