Catch Every Moment: Explore Our Live IPL Score Chrome Extension!

neha malvia
3 min readJul 10, 2024

--

Hey there, cricket fans and tech enthusiasts! Today, we’re diving into the fascinating world of Chrome extensions with a focus on our very own creation: the Cricket Now: Live IPL Score Chrome extension. This article will take you through its architectural overview, highlighting how we integrated React to deliver a seamless live score experience right within your browser.

Meet the Extension: Cricket Now

Imagine being able to catch up on live IPL scores without leaving your browser. That’s the magic of our Chrome extension. Whether you’re a die-hard fan or just casually keeping up with the matches, this extension makes it effortless. Check out the extension here.

GitHub Repository

Before we get into the details, feel free to check out the source code on GitHub: Cricket Now: Live IPL Score Repository.

Architecture and Implementation

Let’s break down the key components that make our extension work:

1. manifest.json

The manifest.json file is the backbone of your Chrome extension. It’s like the blueprint that Chrome follows to understand how to run our extension smoothly. Everything, from its name and description to its permissions and dependencies, is defined here.

2. index.html and index.js

These files set up the frontend interface using React. index.html acts as the popup that appears when you click the extension icon, while index.js sets up the React environment and renders the main component, ExtensionController, which drives the user interface.

3. extension-controller.js

Built with React, this component manages the extension’s functionality toggle. It utilizes Chrome’s storage capabilities for seamless state management, ensuring a smooth user experience.

Here’s the code snippet to get and set the data from chrome storage:

const { isEnabled } = await chrome.storage.sync.get("isEnabled");
chrome.storage.sync.set({ isEnabled: !isEnableScore });

4. contentScripts.js

Ever wondered how the scorecard magically appears on your favorite sites? That’s what contentScripts.js does. It injects our JavaScript and CSS into web pages, creating the scorecard right on the active page in your browser. It keeps you updated with the latest scores without needing you to refresh manually.

5. background.js

background.js quietly runs in the background, fetching live scores and sending them to the active page’s content script for display. It acts as the central hub for communication across all tabs and windows in the browser.

7. webpack.config.js

Webpack bundles all our assets — JavaScript, CSS, and more — into a deployable package. It’s configured to handle React components, ensuring optimal performance and ease of deployment.

Conclusion

And there you have it — a glimpse into how we’ve crafted the Cricket Now: Live IPL Score Chrome extension. We’ve shown you the inner workings, from manifest.json to webpack configurations, all geared towards delivering a robust and user-friendly experience.

Whether you’re exploring the code or dreaming up your own extensions, we hope this blog has sparked your interest in Chrome extension development.

So, why wait? Dive into the code on our GitHub repository and start building your own extensions.

Happy browsing and happy cricketing! 🏏

--

--