This guide is quite detailed, so I've broken it down into smaller sections. In this series, we’ll walk through the process of building a Chrome extension that tracks IPL scores in real-time. Each part focuses on a different step, from setting up the basics to fetching live match data. The series will dive deep into the idea-to-product development experience and the engineering decisions we made to build graceful software.
This is the first part of the series.
Here’s a short overview before we start: My colleague and I became fascinated with Chrome extensions and decided to build one ourselves. After brainstorming ideas, we finalized a live cricket score tracker for the IPL. We aimed to make it as SOLID as possible, with a focus on readability and modularity. I’ll describe each step we took and the lessons we learned in this article.
Defining the problem: User’s point of view
I am a cricket fan, especially interested in the IPL. I want to keep track of IPL scores during work hours without needing to constantly switch tabs to get the latest updates.
Below is the list of functional and non-functional requirements we identified during the development of our application.
Functional Requirements:
- Real-time score tracking: Users must be able to view live scores of ongoing IPL matches directly within the Chrome extension.
- Persistent score display: Match scores should continue to display on the active tab, even when users switch between different tabs.
- Single-click control: Implement a one-click toggle to turn the score display on or off. The user experience should be streamlined, avoiding the need for complex configuration steps or multiple actions.
Non-Functional Requirements:
- State persistence: The extension should remember the scoreboard’s last on/off state and restore it when users reopen Chrome.
- Efficient API usage: Minimize the number of API calls to retrieve live scores, reducing server load and ensuring optimal performance.
- Drag-and-drop functionality: Allow users to reposition the scoreboard on the screen via drag-and-drop for enhanced flexibility.
- Performance optimization: Ensure that DOM manipulations are limited to a single active tab, preventing performance issues across multiple tabs.
Introduction
What exactly is a Chrome extension, and how can I build one?
My first thought when I asked this was: Ha! Looks simple, maybe another client-side frontend project I can whip up in no time. But yeah, it wasn’t that simple when we started building one ourselves.
A Chrome extension is like software (or a plugin) that can be installed on Google Chrome to use native Chrome features, manipulate the DOM, run service workers, track activities, and more. Building a Chrome extension is somewhat similar to developing a frontend web application, though it has a specific architecture to perform certain actions in designated files. Some of the main components are:
Popup: The box that appears when you click the extension icon, like this:
Content scripts: A JavaScript file that’s added to each tab individually. It has access to the DOM of the tab and can inject HTML elements into the existing DOM.
Background worker: As the name suggests, this is a service worker used to perform actions or send events to the extension. Unlike content scripts, which are loaded individually for each tab, the background worker is loaded only once, and all tabs interact with a single instance. This is a great place to handle synchronization logic for your application.
References and tools used:
Github repo
Chrome extension link
D2Lang for flow diagram
Draw.io for architecture diagram
Up next is an overview of the application's architecture. Click here ->
Top comments (0)