Architecture Breakdown of IPL Live Score Chrome Extension

Architecture Overview

The architecture of our IPL live score Chrome extension is divided into key components that handle specific responsibilities. These components work together to ensure real-time updates, an intuitive user interface, and efficient performance.

The application architecture looks like this below

1. Manifest File

The manifest.json file is the backbone of any Chrome extension. It defines the metadata, permissions, and structure of the extension, such as which files serve as the popup, background script, and content scripts.

Key responsibilities:

• Declares the permissions needed to access certain Chrome APIs (e.g., tabs, storage).

"permissions": ["activeTab", "storage", "tabs"]

• Specifies which scripts (content scripts, background workers) will run and how they will interact.

"content_scripts": [
    {
      "all_frames": true,
      "matches": ["<all_urls>"],
      "js": ["contentScripts.js"],
      "css": ["live-score.css"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }

• Links to the popup file for the UI.

"action": {
    "default_popup": "index.html"
  }

2. Chrome Tabs and Content Scripts

• Each Chrome tab where the extension operates has an injected content script. This content script is responsible for interacting with the DOM of the tab, displaying the live scorecard, and responding to user interactions like drag-and-drop.
• Only the active tab displays live scores, while the content scripts in inactive tabs are on standby.

Key responsibilities:

• Display the live scores by injecting the scorecard into the DOM.
• Listen for messages from the background script to update or clear the scoreboard.
• Handle the user interaction within the tab, such as dragging and repositioning the scoreboard.

3. Background Script

• The background script serves as the central coordinator for all tabs. It runs continuously in the background, independent of individual tabs.
• It periodically fetches the live match scores from the external IPL scores API and maintains the global state of the extension, such as whether the scoreboard is toggled on or off.
• The background script broadcasts updated score data to the content script of the active tab, ensuring real-time updates without reloading the page.

Key responsibilities:

• Fetch live match scores every 5 seconds from the external API.
• Store and manage the extension's global state (e.g., scoreboard on/off status).
• Communicate with content scripts via messages to push live score updates or clear the scoreboard.

4. Popup Interface

• The popup is the user interface that opens when the user clicks on the extension’s icon in the toolbar. It provides controls for toggling the score display on or off.
• The popup sends the user's action (toggle on/off) to the background script, which then updates the content script in the active tab.

Key responsibilities:

• Allow the user to control the extension’s behavior (e.g., turning the scoreboard on or off).
• Serve as an interaction point between the user and the background script.

5. Flow of Communication

The diagrams provided illustrate the flow of communication between these components:

• Initialization:

  • When the extension is loaded, the background script checks Chrome’s storage to restore the last saved state (scoreboard on or off).
  • If the scoreboard is on, the background script fetches match scores and sends the data to the content script in the active tab to display the scoreboard in the DOM.

• Toggle On/Off:

  • When the user toggles the scoreboard on or off via the popup, the popup sends this toggle action to the background script.
  • If toggled on, the background script starts fetching live scores and sends the data to the active tab’s content script to display the scoreboard.
  • If toggled off, the background script clears the set interval for fetching scores and sends a message to the content script to remove the scoreboard from the DOM.

• Polling:

  • Every 5 seconds, the background script fetches the latest match scores and pushes this data to the content script in the active tab, ensuring the scoreboard is updated in real-time.

6. Efficient Performance Management

• The background script fetches match scores only once, regardless of the number of open tabs. The content script is injected only into the active tab to reduce overhead.
• By isolating DOM manipulations to a single active tab and using efficient messaging between scripts, the architecture minimizes the number of API calls and ensures smooth performance even when multiple tabs are open.

That covers the architectural aspects. Next, we'll explore various implementation strategies for different workflows. Click here ->