# loluwafemi/wa_extra architecture

> Architecture diagram of the GitHub repository loluwafemi/wa_extra, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/loluwafemi/wa_extra
- Repository: https://github.com/loluwafemi/wa_extra

## Overview

This repository is a Chrome extension for monitoring WhatsApp Web groups, extracting member names and phone numbers, storing unique contacts locally, and exporting them. The main workflow runs from the popup toggle through content-script monitoring and extraction to browser storage; users can view status and download data. README documents per-group Excel export and live statistics; the background script also provides a CSV download fallback. No automatic UI-update or AI-model subsystem exists in the tree. Source excerpts are partial, so uncertain internal wiring is omitted.

Main entry points: [`whatsapp-extractor/content.js`](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js) (Content script), [`whatsapp-extractor/popup.js`](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.js) (Popup controller), [`whatsapp-extractor/background.js`](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/background.js) (Background worker), [`whatsapp-extractor/popup.html`](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.html) (Popup dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_extension_ui["Extension UI"]
  node_popup_ui["Popup dashboard<br/>[popup.html]"]
  node_popup_logic["Popup controller<br/>[popup.js]"]
  node_background["Background worker<br/>[background.js]"]
end

subgraph group_extraction["Group Extraction"]
  node_content["Content script<br/>[content.js]"]
  node_group_detection["Group detection<br/>[content.js]"]
  node_member_scan["Member scanning<br/>[content.js]"]
  node_contact_parse["Contact parsing<br/>[content.js]"]
end

subgraph group_local_data["Local Data"]
  node_storage[("Browser local storage")]
  node_duplicate_check["Duplicate tracking<br/>[content.js]"]
  node_stats_logs["Stats and activity<br/>[popup.js]"]
end

subgraph group_export["Contact Export"]
  node_excel_export["Excel export<br/>[content.js]"]
  node_xlsx_library["SheetJS library"]
  node_csv_fallback["CSV fallback<br/>[background.js]"]
end

node_user(("User"))
node_whatsapp["WhatsApp Web"]
node_downloads["Browser downloads"]

node_user -->|"uses"| node_popup_ui
node_popup_ui -->|"renders"| node_popup_logic
node_popup_logic -->|"reads and writes"| node_storage
node_popup_logic -->|"sends commands"| node_content
node_content -->|"sends status"| node_popup_logic
node_content -->|"reads and writes"| node_storage
node_content -->|"monitors"| node_group_detection
node_group_detection -->|"observes DOM"| node_whatsapp
node_content -->|"opens and scans"| node_member_scan
node_member_scan -->|"reads member panel"| node_whatsapp
node_member_scan -->|"provides rows"| node_contact_parse
node_content -->|"checks contacts"| node_duplicate_check
node_duplicate_check -->|"updates records"| node_storage
node_popup_logic -->|"updates display"| node_stats_logs
node_storage -->|"provides stats"| node_stats_logs
node_content -->|"handles download"| node_excel_export
node_excel_export -->|"reads contacts"| node_storage
node_excel_export -->|"creates workbook"| node_xlsx_library
node_excel_export -->|"writes file"| node_downloads
node_popup_logic -->|"requests fallback"| node_background
node_background -->|"reads contacts"| node_storage
node_background -->|"generates CSV"| node_csv_fallback
node_csv_fallback -->|"downloads file"| node_downloads

click node_popup_ui "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.html"
click node_popup_logic "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.js"
click node_background "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/background.js"
click node_content "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_group_detection "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_member_scan "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_contact_parse "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_duplicate_check "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_stats_logs "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.js"
click node_excel_export "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js"
click node_csv_fallback "https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/background.js"

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_popup_ui,node_popup_logic,node_background,node_user,node_downloads toneBlue
class node_content,node_group_detection,node_member_scan,node_contact_parse toneAmber
class node_storage,node_duplicate_check,node_stats_logs toneMint
class node_excel_export,node_xlsx_library,node_csv_fallback toneRose
class node_whatsapp toneIndigo
```

## Components

### Extension UI

- [Popup dashboard](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.html): `whatsapp-extractor/popup.html`
- [Popup controller](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.js): `whatsapp-extractor/popup.js`
- [Background worker](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/background.js): `whatsapp-extractor/background.js`

### Group Extraction

- [Content script](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`
- [Group detection](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`
- [Member scanning](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`
- [Contact parsing](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`

### Local Data

- **Browser local storage**
- [Duplicate tracking](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`
- [Stats and activity](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/popup.js): `whatsapp-extractor/popup.js`

### Contact Export

- [Excel export](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/content.js): `whatsapp-extractor/content.js`
- **SheetJS library**
- [CSV fallback](https://github.com/loluwafemi/wa_extra/blob/main/whatsapp-extractor/background.js): `whatsapp-extractor/background.js`

### Other components

- **User**
- **WhatsApp Web**
- **Browser downloads**

## Connections

- User → Popup dashboard: uses
- Popup dashboard → Popup controller: renders
- Popup controller → Browser local storage: reads and writes
- Popup controller → Content script: sends commands
- Content script → Popup controller: sends status
- Content script → Browser local storage: reads and writes
- Content script → Group detection: monitors
- Group detection → WhatsApp Web: observes DOM
- Content script → Member scanning: opens and scans
- Member scanning → WhatsApp Web: reads member panel
- Member scanning → Contact parsing: provides rows
- Content script → Duplicate tracking: checks contacts
- Duplicate tracking → Browser local storage: updates records
- Popup controller → Stats and activity: updates display
- Browser local storage → Stats and activity: provides stats
- Content script → Excel export: handles download
- Excel export → Browser local storage: reads contacts
- Excel export → SheetJS library: creates workbook
- Excel export → Browser downloads: writes file
- Popup controller → Background worker: requests fallback
- Background worker → Browser local storage: reads contacts
- Background worker → CSV fallback: generates CSV
- CSV fallback → Browser downloads: downloads file