Coding Challenge #47 - Build Your Own Chrome Extension

Coding Challenge #47

This challenge is to build your own Chrome extension. Chrome extensions are a software programs that extends the functionality of the Google Chrome web browser. They are typically written in HTML, CSS, and JavaScript, and they modify or enhance the browser’s functionality in some way.

Chrome extensions can add new features, customise the appearance of websites, improve productivity, block ads, manage passwords, and much more. You can install and manage Chrome extensions through the Chrome Web Store.

If You Enjoy Coding Challenges Here Are Four Ways You Can Help Support It

1. Refer a friend or colleague to the newsletter. ??
2. Sign up for a paid subscription - think of it as buying me a coffee ?? twice a month, with the bonus that you also get 20% off any of my courses.
3. Buy one of my courses that walk you through a Coding Challenge.
4. If you work for a company that sells to software engineers, encourage them to sponsor the newsletter. ??

The Challenge - Building A Chrome Extension

For this Coding Challenge you’re going to build a Chrome extension that will customise the look and functionality of each new tab you open in Chrome. It’s drawing on inspiration from the popular extension Bonjourr and the more complicated Momentum.

If you’ve never built a Chrome extension before the Chrome for Developer website has a section on getting started building Chrome extensions.

This Coding Challenge is Sponsored by Alloy Automation:

Stop wasting your time building integrations. Alloy Automation is an integration development platform used by engineering teams at Amazon, Gorgias, Postscript, & others to get rid of the headaches of handling OAuth, API field mappings, and continuously having to add new endpoint support to existing integrations. Founded in 2019, the company is backed by a16z, Bain Capital Ventures, & Y Combinator. Learn more and try out their Unified API today.

Step Zero

Before we begin, please set up your IDE etc. as you like it. This challenge is one you’ll be tackling in JavaScript or TypeScript along with HTML and CSS.

Step 1

In this step your goal is to create the Coding Challenges equivalent to ‘Hello, World’ for Chrome extensions. That is create an extension that:

1. You can install locally
2. Sets the background colour of the new tab to Coding Challenges Blue (that’s #04295B)
3. Displays the text Coding Challenges>_ in the centre of the new tab. Bonus points for matching the Coding Challenges branding! ??

When you create a new tab, the tab should then look like this:

Continued...

You can find Step 2 and beyond on the Coding Challenges website as build your own Chrome extension..

Or if you'd rather get the whole challenge delivered to you inbox every week, you can subscribe on the Coding Challenges Substack.

2 Other Ways I Can Help You:

1. I write another FREE newsletter Developing Skills that helps you level up the other skills you need to be a great software developer.
2. I have some courses available: Build Your Own Redis Server (Python Edition) which guides you through solving the Redis Coding Challenge in Python. Build Your Own Shell (Go Edition) which guides you through solving the Shell Coding Challenge in Go.