# jlp-009/meesho-supplier-autofill architecture

> Architecture diagram of the GitHub repository jlp-009/meesho-supplier-autofill, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-05). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jlp-009/meesho-supplier-autofill
- Repository: https://github.com/jlp-009/meesho-supplier-autofill

## Overview

#### Purpose and Runtime
This repository is a browser extension that automates filling Meesho supplier catalog listing forms. It runs entirely in the browser: a background extension context, a popup UI, and a content script injected into Meesho pages. The extension stores reusable field profiles locally and can export/import them as JSON.

Key entry configuration: `meesho-supplier-autofill/manifest.json`.

#### Extension Entry Points
- Background lifecycle and extension-level messaging: `meesho-supplier-autofill/background.js`
- Popup interface for initiating autofill and managing saved profiles: `meesho-supplier-autofill/popup.html`, `meesho-supplier-autofill/popup.js`
- Page-side automation against the supplier listing DOM: `meesho-supplier-autofill/content.js`
- Shared form-targeting utilities: `meesho-supplier-autofill/selector-utils.js`

The manifest determines script injection, permissions, popup registration, and the separation between privileged extension APIs and page DOM access.

#### Popup and Profile Management
The popup is the user control plane. It collects or selects reusable listing-field profiles, triggers fill operations in the active Meesho tab, and supports JSON profile export/import.

`meesho-supplier-autofill/popup.html` provides the UI shell; `meesho-supplier-autofill/popup.js` owns UI events, persistence interactions, and commands sent to the content script.

#### Content-Side Form Automation
`meesho-supplier-autofill/content.js` is the primary execution engine. It observes or scans the Meesho listing page, locates catalog controls, applies saved values, and drives browser events needed for the page application to recognize changes. It covers ordinary fields, dropdowns, and size-variant inputs.

This is the main boundary with the external Meesho supplier UI: selectors and event behavior must tolerate DOM changes and dynamically rendered controls.

#### Selector and DOM Adaptation Layer
`meesho-supplier-autofill/selector-utils.js` centralizes DOM lookup and selector behavior used to identify fields reliably. It isolates site-specific targeting logic from higher-level profile replay, making it the likely maintenance point when Meesho changes its listing UI.

Related page styling or injected visual affordances are in `meesho-supplier-autofill/styles.css`.

#### Control and Data Flow
1. User opens the extension popup and selects, creates, imports, or exports a profile.
2. Popup code persists profile data through browser extension storage and sends an action/profile payload to the active tab.
3. The content script receives the request, scans the rendered supplier listing form, and resolves relevant controls through selector utilities.
4. It writes values and dispatches interaction events; dynamic dropdown and variant sections may require staged scanning/retry behavior.
5. Background code supports extension lifecycle or cross-context coordination where popup-to-tab messaging cannot directly complete the operation.

#### Infrastructure and Boundaries
No backend service is indicated. Material dependencies are browser extension APIs—especially tab messaging, local extension storage, and content-script injection—and the third-party Meesho supplier portal DOM. Static extension assets include `meesho-supplier-autofill/icons` and `meesho-supplier-autofill/screenshots`.

Main entry points: [`meesho-supplier-autofill/content.js`](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/content.js) (Form Automation Engine), [`meesho-supplier-autofill/popup.js`](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/popup.js) (Popup Controller), [`meesho-supplier-autofill/manifest.json`](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/manifest.json) (Extension Manifest), [`meesho-supplier-autofill/background.js`](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/background.js) (Background Context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_extension["Browser Extension"]
  node_manifest["Extension Manifest<br/>[manifest.json]"]
  node_popup_ui["Popup UI<br/>popup view<br/>[popup.html]"]
  node_popup_controller["Popup Controller<br/>popup runtime<br/>[popup.js]"]
  node_extension_storage[("Local Profile Storage<br/>browser storage")]
  node_background{{"Background Context<br/>background runtime<br/>[background.js]"}}
  node_json_profiles["Profile JSON<br/>import/export format"]
end

subgraph group_page["Meesho Page Integration"]
  node_content_script["Form Automation Engine<br/>content script<br/>[content.js]"]
  node_selector_utils["Selector Utilities<br/>DOM adaptation<br/>[selector-utils.js]"]
  node_meesho_dom["Supplier Listing DOM<br/>third-party page"]
  node_page_events(("Browser Interaction Events<br/>DOM events"))
  node_styles["Injected Styles<br/>page styling<br/>[styles.css]"]
end

node_manifest -->|"registers popup"| node_popup_ui
node_manifest -->|"starts"| node_background
node_manifest -->|"injects into Meesho"| node_content_script
node_manifest -->|"injects"| node_styles
node_popup_ui -->|"user events"| node_popup_controller
node_popup_controller -->|"save/load profiles"| node_extension_storage
node_popup_controller -->|"import/export"| node_json_profiles
node_popup_controller -->|"active-tab action + profile"| node_content_script
node_popup_controller -.->|"extension coordination"| node_background
node_background -.->|"cross-context messaging"| node_content_script
node_content_script -->|"resolves controls"| node_selector_utils
node_selector_utils -->|"queries dynamic fields"| node_meesho_dom
node_content_script -->|"writes profile values"| node_meesho_dom
node_content_script -->|"dispatches changes"| node_page_events
node_page_events -->|"updates page state"| node_meesho_dom
node_styles -->|"applies affordances"| node_meesho_dom

click node_manifest "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/manifest.json"
click node_popup_ui "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/popup.html"
click node_popup_controller "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/popup.js"
click node_background "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/background.js"
click node_content_script "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/content.js"
click node_selector_utils "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/selector-utils.js"
click node_styles "https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/styles.css"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_manifest,node_popup_ui,node_popup_controller,node_extension_storage,node_background,node_json_profiles toneBlue
class node_content_script,node_selector_utils,node_meesho_dom,node_page_events,node_styles toneAmber
```

## Components

### Browser Extension

Privileged extension contexts and packaged entry configuration.

- [Extension Manifest](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/manifest.json): manifest · Registers popup, permissions, background context, and content injection. · `meesho-supplier-autofill/manifest.json`
- [Popup UI](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/popup.html): popup view · User control plane for autofill and profile management. · `meesho-supplier-autofill/popup.html`
- [Popup Controller](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/popup.js): popup runtime · Manages profiles and sends active-tab actions. · `meesho-supplier-autofill/popup.js`
- **Local Profile Storage**: browser storage · Stores reusable profiles and imported JSON data.
- [Background Context](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/background.js): background runtime · Handles lifecycle and cross-context coordination. · `meesho-supplier-autofill/background.js`
- **Profile JSON**: import/export format · Portable saved-profile data.

### Meesho Page Integration

Automation running against the supplier portal DOM.

- [Form Automation Engine](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/content.js): content script · Receives fill actions and drives the rendered listing form. · `meesho-supplier-autofill/content.js`
- [Selector Utilities](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/selector-utils.js): DOM adaptation · Centralizes Meesho-specific field lookup behavior. · `meesho-supplier-autofill/selector-utils.js`
- **Supplier Listing DOM**: third-party page · Dynamic external form controls, dropdowns, and variants.
- **Browser Interaction Events**: DOM events · Events dispatched so the page application recognizes updates.
- [Injected Styles](https://github.com/jlp-009/meesho-supplier-autofill/blob/nifty/meesho-supplier-autofill/styles.css): page styling · Visual affordances for page-side integration. · `meesho-supplier-autofill/styles.css`

## Connections

- Extension Manifest → Popup UI: registers popup
- Extension Manifest → Background Context: starts
- Extension Manifest → Form Automation Engine: injects into Meesho
- Extension Manifest → Injected Styles: injects
- Popup UI → Popup Controller: user events
- Popup Controller → Local Profile Storage: save/load profiles
- Popup Controller → Profile JSON: import/export
- Popup Controller → Form Automation Engine: active-tab action + profile
- Popup Controller → Background Context: extension coordination
- Background Context → Form Automation Engine: cross-context messaging
- Form Automation Engine → Selector Utilities: resolves controls
- Selector Utilities → Supplier Listing DOM: queries dynamic fields
- Form Automation Engine → Supplier Listing DOM: writes profile values
- Form Automation Engine → Browser Interaction Events: dispatches changes
- Browser Interaction Events → Supplier Listing DOM: updates page state
- Injected Styles → Supplier Listing DOM: applies affordances