Forem: sanketmunot

Dynamic Template Injection in Angular: Clean & Scalable

sanketmunot — Wed, 21 Jan 2026 13:18:58 +0000

Discover how to inject feature-specific templates into a parent layout using ng-template, RxJS, and a slot service — no inputs or outputs needed.

I’m new to Angular.

I come from React.

So when I needed a layout with dynamic footer actions, my first solution was… chaos.

The setup

1 LayoutComponent
3 feature components
A shared footer area
Each feature needs different buttons & info

The bad way 👎

Passing configs, callbacks, and flags up and down:

<feature-a (footerChange)="setFooter($event)"></feature-a>
<feature-b (footerChange)="setFooter($event)"></feature-b>

setFooter(config: FooterConfig) {
  this.footerButtons = config;
}

It works… but the layout becomes a dumping ground.

The idea: make the footer a slot

Instead of sending data up,
let the feature inject UI into the layout.

Think: React portals + refs, but Angular style.

Step 1: a tiny slot service

@Injectable({ providedIn: 'root' })
export class SlotService {
  private slots = new Map<string, BehaviorSubject<TemplateRef<any> | null>>();

  slot$(key: string) {
    return this.getSlot(key).asObservable();
  }

  setTemplate(key: string, tpl: TemplateRef<any>) {
    this.getSlot(key).next(tpl);
  }

  clear(key: string) {
    this.getSlot(key).next(null);
  }

  private getSlot(key: string) {
    if (!this.slots.has(key)) {
      this.slots.set(key, new BehaviorSubject<TemplateRef<any> | null>(null));
    }
    return this.slots.get(key)!;
  }
}

Step 2: the layout renders whatever it gets

<!-- layout.component.html -->
<div class="footer">
  <ng-container *ngTemplateOutlet="footerTpl"></ng-container>
</div>

// layout.component.ts
footerTpl!: TemplateRef<any> | null;

ngOnInit() {
  this.slotService.slot$('footer').subscribe(tpl => {
    this.footerTpl = tpl;
  });
}

The layout has no idea who owns the footer.

Step 3: a feature plugs in its footer

<!-- feature.component.html -->
<ng-template #footerTemplate>
  <button (click)="save()">Save</button>
  <button (click)="cancel()">Cancel</button>
</ng-template>

// feature.component.ts
@ViewChild('footerTemplate') footerTemplate!: TemplateRef<any>;

ngAfterViewInit() {
  this.slotService.setTemplate('footer', this.footerTemplate);
}

ngOnDestroy() {
  this.slotService.clear('footer');
}

What just happened?

Your feature registered UI.
Your layout rendered it.

No props.
No events.
No tight coupling.

The takeaway

If Angular feels awkward, it’s often because we try to use React patterns directly.

Translate the idea, not the code —
and Angular suddenly becomes powerful 🚀

Using Webpack for Easy Development in a Chrome Extension

sanketmunot — Tue, 24 Sep 2024 13:14:31 +0000

Developing a Chrome extension requires constant building after every change, which can be a tedious process. To streamline this, we set up Webpack to automate the build process, making development faster and easier. Here's how Webpack helps:

Automated Builds:

Webpack bundles our JavaScript, CSS, and other assets into a single output directory (dist). Every time we make changes to our code, Webpack automatically builds the project, generating the necessary files for the Chrome extension.
Entry Point:

In this setup, Webpack starts from the index.js file, which serves as the entry point to bundle the React code and other scripts.
```
  entry: './index.js',
```
Babel Transpiling:

Webpack uses babel-loader to transpile modern JavaScript (ES6+) and JSX (React) into browser-compatible code. This ensures our code works across different browsers, including older ones.
```
  use: {
  loader: 'babel-loader',
  options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
  }
  }
```
CSS Handling:

With the MiniCssExtractPlugin, Webpack extracts CSS into a separate file (styles.css), allowing us to keep the styling modular and separate from JavaScript.
```
  new MiniCssExtractPlugin({
  filename: "styles.css",
  }),
```
HTML File Generation:

Webpack generates an HTML file with the HtmlWebpackPlugin that links the bundled JavaScript (bundle.js). This is useful for dynamically inserting the scripts required for the React-based popup.
```
  new HtmlWebpackPlugin({
  template: "./index.html",
  }),
```

Copying Static Assets:

The copy-webpack-plugin is used to copy essential files like manifest.json, background.js, contentScripts.js, live-score.css, and the extension icon to the dist folder. This ensures all the necessary files for the Chrome extension are ready in one place after every build.

  new CopyPlugin({
  patterns: [
     { from: 'manifest.json', to: path.resolve(__dirname, 'dist') },
     { from: 'contentScripts.js', to: path.resolve(__dirname, 'dist') },
     { from: 'background.js', to: path.resolve(__dirname, 'dist') },
     { from: 'live-score.css', to: path.resolve(__dirname, 'dist') },
     { from: 'icon128.png', to: path.resolve(__dirname, 'dist') }
  ],
  }),

Source Maps for Debugging:

The devtool: 'cheap-module-source-map' option generates source maps, which help in debugging by mapping the minified code back to the original source code, making it easier to trace errors during development.
```
  devtool: 'cheap-module-source-map',
```

Summary

By using Webpack, we automate the entire build process of the extension, handle JavaScript and CSS bundling, and ensure that all static assets are moved into the final dist directory. This approach significantly speeds up development and eliminates the need to manually rebuild the extension after every code change.

Implementing a Message-Driven Architecture for Live IPL Scores in a Chrome Extension

sanketmunot — Tue, 24 Sep 2024 13:13:21 +0000

As discussed in the previous architecture flow, our extension relies on message passing between the background worker and the content script. The background script fetches live scores from an external API, while the content script renders the data into the DOM of the active tab. Let’s break down how this works step by step:

Step-by-Step Flow

Initialization

Upon loading, the content script checks whether the scoreboard display is enabled. It sends an initialization message ("init") to the background script to determine if it should start fetching and displaying scores.
```
const init = async () => {
  let { isEnabled } = await chrome.storage.sync.get("isEnabled");
  chrome.runtime.sendMessage({
  action: "init",
  isEnabled: isEnabled,
  });
};
init();
```

Fetching Live Scores

The background script listens for messages, and when triggered, it begins polling an API every 5 seconds to fetch live IPL scores.

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  const { isEnabled } = message;
  if (message.action === "init" && isEnabled) {
  getLatestScoresAndRender();
  }
  if (message.action === "toggleLogging") {
  if (isEnabled) {
    startCricket(); // Runs getLatestScoresAndRender every 5 seconds
  } else {
    stopCricket();
  }
  }
});

Rendering Data

When the background script receives the latest scores, it sends the data to the active tab's content script, which then updates the DOM dynamically with the latest match data.

//background.js
chrome.tabs.sendMessage(tabId, { action: "polling", data: allIplMatches });

And in the content script:

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.action === "polling") {
  // Use match data from the message to update the DOM
  }
});

User Interaction (Toggle On/Off)

Users can toggle the scoreboard on or off with a single click. This toggle sends a "toggleLogging" message to the background script, which starts or stops the polling accordingly.

chrome.runtime.onMessage.addListener(function (message) {
  if (message.action === "toggleLogging") {
  if (isEnabled) {
    startCricket();
  } else {
    stopCricket();
  }
  }
});

Yes we had to use react for our popup, here's how -

We need to specify an HTML file in the manifest that will serve as our extension's popup. For the extension's control interface, we developed it as a React component and linked the corresponding script in the index.html.

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

  <script src="bundle.js"></script> //bundle.js is the built react file

While at it you can also give a read to Medium article from Neha Malvia which explains bits of repository

Conclusion

By leveraging Chrome's message-passing APIs, we split the responsibilities between background workers (handling API requests) and content scripts (handling DOM updates). This event-driven architecture ensures smooth, real-time updates across multiple tabs, creating a seamless user experience without unnecessary refreshes or interruptions.

This modular approach allows the extension to be highly efficient, responsive, and user-friendly, with the ability to toggle the score display on or off easily.

Dont miss the extras webpack for chrome extension where we defined a webpack config to streamline our build.

Architecture Breakdown of IPL Live Score Chrome Extension

sanketmunot — Tue, 24 Sep 2024 13:07:56 +0000

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 ->

Gathering Requirements and Introducing IPL Score Tracker Chrome Extension

sanketmunot — Tue, 24 Sep 2024 13:07:48 +0000

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 ->

Sharing State Between Vanilla and React Apps with Redux

sanketmunot — Wed, 14 Aug 2024 12:03:41 +0000

The problem statement

I want to share a common data state between vanilla js and react app.

What is in this POC

We will create two similar counter apps in vanilla and react.
The count should be stored in a common state
If we update the count in vanilla, it should be reflected in react and vice-verse

Project Structure

Our project is divided into two main sections:

Root Directory: Contains core files for the vanilla JavaScript portion of the app.
react-mf Directory: Houses the React micro-frontend which interacts with the vanilla JavaScript part.

The architecture of the app can be checked at link here

Key Files and Their Roles

Root Directory

index.html: This is the entry point of our app, setting up the HTML structure and including links to stylesheets and JavaScript files. It features two key div elements with id="app" and id="root", which are used to mount the vanilla JS app and the React micro-frontend, respectively.
main.js: Acts as the main JavaScript file for initializing the vanilla JS part of the app. It handles the core logic and interacts with the shared state.
counter.js: Contains the code responsible for dispatching actions to the Redux store. For instance, it dispatches an INCREMENT action to update the counter.
store.js: Sets up the Redux store, which manages the application's state and ensures consistency between the vanilla JS and React parts of the app.

`react-mf` Directory

App.jsx: The main React component of our micro-frontend. It utilizes the useState hook for local state management and subscribes to the Redux store to reflect the global state. It renders a button to dispatch an INCREMENT action and displays the current count from the store.
main.jsx: The entry point for the React micro-frontend, where the React app is initialized and rendered.

How does it work

Create a basic vanilla js website using redux store.
Expose the created store to window element.

const store = createStore(reducer);
window.customStore = store

Make use of store.dispatch function in react to fire a store action.

<button onClick={() => store.dispatch({type: 'INCREMENT'})}>

Listen to changes in store using store.subscribe

store.subscribe(() => {
    setCount(store.getState().counter)
  })

You can find the full code in the GitHub repository.

Smart meal tracking on whatsapp [POC]

sanketmunot — Wed, 19 Jun 2024 18:01:48 +0000

This is a submission for Twilio Challenge v24.06.12

What I Built

I developed a proof-of-concept WhatsApp bot that accepts an image of the meal you're having. In return, it provides the calorie intake along with detailed nutrition information such as carbohydrates, fats, and proteins.

This is just a proof of concept; we can significantly enhance it by incorporating a database to store user data and generate regular reports. Use background workers for image saving and calorie estimation from AI, and employing another worker to send the messages.

Read more about functionality and flow on github readme

Demo

I cannot provide a demo because I used ngrok to route WhatsApp webhook requests to localhost. But here are some screenshots ->

Positive case I send an image of Indian thali

Positive case I send an image of burger meal

Negative case Naruto, When he is kept away from Ramen (IYKYK)

Twilio and AI

Twilio's API is used to receive images of food sent by users via WhatsApp.
Google's Generative AI model - Gemeni analyzes the received images to estimate the caloric content and nutritional breakdown.
Twilio sends back the detailed nutritional information to the user on WhatsApp.
The integration of Twilio and AI enhances user interaction by providing instant and informative responses.

Additional Prize Categories

Twilio Times Two
Impactful Innovators

Thanks for reading my post, connect me on Linkedin @ Sanket Munot

Forem: sanketmunot

Dynamic Template Injection in Angular: Clean & Scalable

Discover how to inject feature-specific templates into a parent layout using ng-template, RxJS, and a slot service — no inputs or outputs needed.

The setup

The idea: make the footer a slot

Step 1: a tiny slot service

Step 2: the layout renders whatever it gets

Step 3: a feature plugs in its footer

What just happened?

The takeaway

Using Webpack for Easy Development in a Chrome Extension

Summary

Implementing a Message-Driven Architecture for Live IPL Scores in a Chrome Extension

Step-by-Step Flow

Yes we had to use react for our popup, here's how -

Conclusion

Architecture Breakdown of IPL Live Score Chrome Extension

Architecture Overview

1. Manifest File

2. Chrome Tabs and Content Scripts

3. Background Script

4. Popup Interface

5. Flow of Communication

6. Efficient Performance Management

Gathering Requirements and Introducing IPL Score Tracker Chrome Extension

Defining the problem: User’s point of view

Introduction

Sharing State Between Vanilla and React Apps with Redux

The problem statement

What is in this POC

Project Structure

Key Files and Their Roles

Root Directory

react-mf Directory

How does it work

Smart meal tracking on whatsapp [POC]

What I Built

Demo

Twilio and AI

Additional Prize Categories

`react-mf` Directory