KPD Asistent – Smart Search + Auto-Fill + Bulk CSV Mapper

KPD Asistent is a high-performance Chrome Extension that helps Croatian entrepreneurs and accountants find and apply KPD classification codes (Klasifikacija proizvoda po djelatnostima) — directly inside invoicing portals and web forms.

Developed for Aning Usluge d.o.o. by Matija Radeljak.

👉 chromewebstore.google.com

✨ Features

🔍 Smart fuzzy search (synonyms + normalization)

• Searches by keywords, partial matches, real-world terms and synonyms (not only official names).
• Fast and smooth even with large datasets thanks to Web Worker processing.

👻 Ghost Icon field integration (in-page)

• Detects relevant input fields (code / description / item/service name).
• Shows a discreet “ghost icon” next to the active field.
• Click → opens a lightweight in-page modal search UI.

⚡ In-page modal (no tab switching)

• Opens on top of the current web app so users stay in context.
• Injected UI is isolated to avoid CSS conflicts (Shadow DOM + iframe approach).

✍️ Intelligent Auto-Fill (row-aware)

• Detects paired fields (KPD Code + Description) within the same row/table/form group.
• Can fill both code + description from a single selection.
• Avoids accidental overwrites by respecting existing data.

📋 Bulk CSV mapping (paste / upload)

• Paste or upload CSV data and get: Original | KPD Code | KPD Name
• Automatically detects the most likely “description/name” column.
• Includes preview + progress + ETA for large lists.

🧠 Background bulk processing

• Large batches can run via background (service worker) while UI stays responsive.
• Status feedback + completion result flow.

🖱️ Right-click lookup (Context Menu)

• Select any text on a page → right click → Find KPD code…
• Opens an instant lookup workflow.

🛠️ Per-site controls (Whitelist/Blacklist)

• Enable/disable the extension by website.
• Two modes:
  • Block selected sites (Blacklist)
  • Allow only selected sites (Whitelist)

🌗 Theme support

• Theme: Auto / Light / Dark.

🔒 Privacy-first

• Works locally in your browser.
• No invoice data or search queries are sent to external servers.

---

🛠️ Technical Stack

• Vanilla JavaScript (ES6+), HTML5, CSS3
• Manifest V3
• Web Worker search processing
• Shadow DOM / iframe UI isolation
• No runtime dependencies (zero npm packages required)

---

🚀 Installation (Developer Mode)

1. Clone this repository or download the source.
2. Open Chrome → chrome://extensions/
3. Enable Developer mode (top-right).
4. Click Load unpacked
5. Select the project root folder.

---

📖 Usage

In-page (recommended)

1. Open your invoicing portal / e-invoice web app.
2. Focus the relevant field (code/description/item).
3. Click the “ghost” icon.
4. Type your term and select a result.
5. The extension auto-fills code and/or description.

Context menu

1. Select any text on a page (e.g., an invoice item name).
2. Right click → Find KPD code…

Bulk CSV

1. Open the extension UI (popup).
2. Paste or upload a CSV list.
3. Get mapped results with progress + ETA.

---

🧩 Project Structure (typical)

/
├── background/ # Service Worker + context menus + bulk tasks
├── content/ # DOM injection + field detection + auto-fill logic
├── core/ # Search engine + worker + platform utilities
├── data/ # KPD dataset + synonyms
├── icons/ # Assets
├── popup/ # Popup UI (settings + bulk mapping)
└── manifest.json # Extension configuration

---

## © Credits

- **Client:** Aning Usluge d.o.o. — https://aning.hr
- **Development & Strategy:** Matija Radeljak