IRCEP WCMS AutoFill Extension

A lightweight, robust Manifest V3 Chrome/Chromium extension designed to automate measurement sheet data entry on the Indian Railways E-Procurement System (IRCEP) Works Contract Management System (WCMS) vendor portal.

---

🌟 Overview & Use Case

In civil and construction contracts under Indian Railways, contractors use the IRCEP WCMS vendor portal to submit bills. This process requires entering detailed measurements (Particulars, N1, N2, N3, L, B, H) row by row into an HTML form.

Entering dozens or hundreds of measurement rows manually is:

• Time-consuming: Translating tabular measurement books to web forms takes hours.
• Prone to Human Error: Typographical errors in parameters (Length, Breadth, Height) directly impact billing and audit compliance.
• Tiresome: Interacting with web pages that dynamically add rows with custom DOM structures is tedious.

IRCEP WCMS AutoFill solves these problems by allowing users to upload a spreadsheet-derived CSV file, map the columns, and let the extension fill the measurement table automatically.

---

🛠️ Project Structure

The project conforms to the Manifest V3 browser extension architecture:

• manifest.json: Declares extension metadata, popup UI resources, required permissions (activeTab, storage, scripting), content script configuration, and host matches (https://*.ircep.gov.in/*).
• popup/: The visual UI matching modern design aesthetics:
  • popup.html: Structure of the popup container including upload drop-zone, mapping grid, execution panel, and the real-time activity log.
  • popup.css: Sleek modern design featuring tailored dark backgrounds, clear state badges, interactive hover effects, and clean grid layouts.
  • popup.js: Orchestrates CSV upload, line-by-line parsing (supporting double-quoted strings), dynamic column mapping setup, chrome local storage binding, and cross-context messaging.
• content/: Script injected into the active IRCEP tab:
  • content.js: Runs in the context of the IRCEP page. Selects the target table, handles dynamic page modifications, triggers "Add Row" button clicks, enters data, highlights filled fields, and manages the execution timer.
  • content.css: Overlay styling for injected logs/elements on the target tab.
• background/: The extension service worker:
  • background.js: Listens for installation events (sets default configurations) and shows tab badge labels on active matches (ON when active on IRCEP portal).

---

⚙️ How It Works

sequenceDiagram
    autonumber
    actor User
    participant Popup as Extension Popup
    participant Content as Content Script (IRCEP Tab)
    participant Page as WCMS Webpage (DOM)

    User->>Popup: Upload CSV & Map Columns
    User->>Popup: Click "Start Filling Rows"
    Popup->>Content: Send "runAutomation" action + Row Data + Config
    Note over Content: Locates Measurement Table & "Add Row" Button
    loop For each CSV Row
        Content->>Page: Click "Add Row" Button
        Content->>Page: Wait for new input cells to appear in DOM
        Content->>Page: Auto-detect field indices & placeholders
        Content->>Page: Set values & dispatch events (input/change/blur)
        Content->>Page: Highlight input element borders (visual feedback)
        Content->>Popup: Send progress log message
        Popup->>User: Update Live Activity Log
        Content->>Content: Wait for configured delay (ms)
    end
    opt To be Paid (%) specified
        Content->>Page: Find "To be Paid" input & fill percentage
    end
    Content->>Popup: Send "automationDone" message
    Popup->>User: Display completion status

Loading

1. Host Verification: The popup checks if you are on ircep.gov.in and alerts you if you need to navigate there.
2. Dynamic DOM Auto-Detection: Instead of relying on fragile, hardcoded element IDs that might change across software updates, the content script scans the table dynamically using heuristics:
   • It scans for buttons containing Add Row, addrow, or with onclick actions matching addRow.
   • It looks for input fields with placeholders or name attributes like disc (Particulars), num1/num2/num3 (N1, N2, N3), and param1/param2/param3 or l/b/h (L, B, H).
3. Framework Compatibility: The script updates fields by grabbing the native input value descriptors (window.HTMLInputElement.prototype) and triggering the sequence: focus → input → change → blur → keyup. This ensures pages built on frontend frameworks like React, Angular, or jQuery properly bind and persist the auto-filled values.
4. Visual Highlights: Whenever a cell is populated, it highlights in green (2px solid #22c55e) for 1.2 seconds, allowing the user to watch the fill progress live on the screen.

---

📊 CSV Format Specification

Prepare your spreadsheet with descriptive column headers. The extension auto-maps matching names, but you can select custom associations if needed.

Recommended Schema

Particulars	N1	N2	N3	L	B	H
Excavation in soil	1	2.5	1	12.4	1.2	0.9
Cement Concrete 1:3:6	1	1.0	1	12.4	1.2	0.1

• Particulars: Text description of the item/measurement row.
• N1, N2, N3: Numerical quantity multipliers.
• L, B, H: Length, Breadth, and Height measurements.
• Empty cells or unmapped columns will simply be skipped.

---

🚀 Installation & Usage

1. Load the Extension into your Browser

1. Download or clone this repository to a local directory.
2. Open Chrome (or any Chromium-based browser like Edge or Brave) and navigate to chrome://extensions/.
3. In the top-right corner, toggle the Developer mode switch to ON.
4. Click the Load unpacked button in the top-left.
5. Select the root directory containing manifest.json.

2. Run the Automation

1. Navigate to the IRCEP WCMS Vendor portal measurement entry page.
2. Click the IRCEP WCMS AutoFill icon in the extension toolbar.
3. Click the upload zone and select your prepared CSV file.
4. Verify the column mapping (it auto-detects columns, but you can override mapping for each field or set them to — Skip —). Click Save Mapping to store your setup for future sessions.
5. Set your parameters:
   • Row delay (ms): The time (in milliseconds) the extension waits between adding rows (default is 500ms). Increase this if the site runs slowly or fails to register inputs.
   • To be Paid (%): Optional percentage value to be filled in the overall page summary field at the end of the run.
6. Click Start Filling Rows.
7. Keep the tab active. You can monitor progress in the Activity Log panel inside the popup or watch the green highlighted fields fill up on the target page.
8. Click Stop at any point to halt execution.