# voxyfy/radar-ext architecture

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

- Interactive diagram: https://gitdiagram.com/voxyfy/radar-ext
- Repository: https://github.com/voxyfy/radar-ext

## Overview

Radar is a Chrome extension for capturing Instagram follower and following snapshots, then comparing them over time. The user starts a capture from the toolbar popup; the content script uses the signed-in Instagram page session to fetch lists and saves snapshots locally. The panel compares snapshots and supports browsing, backup, and restore. Edges reflect the excerpts and README; unsampled UI and manifest wiring are not inferred beyond documented behavior.

Main entry points: [`content.js`](https://github.com/voxyfy/radar-ext/blob/main/content.js) (Capture message handler), [`panel.js`](https://github.com/voxyfy/radar-ext/blob/main/panel.js) (Snapshot panel), [`popup.js`](https://github.com/voxyfy/radar-ext/blob/main/popup.js) (Toolbar popup), [`_locales/en/messages.json`](https://github.com/voxyfy/radar-ext/blob/main/_locales/en/messages.json) (TR/EN messages)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_capture["Snapshot capture"]
  node_content["Capture message handler<br/>[content.js]"]
  node_profile["Profile resolution<br/>[content.js]"]
  node_listfetch["List pagination<br/>[content.js]"]
  node_snapshot["Snapshot assembly<br/>[content.js]"]
end

subgraph group_interface["Extension interface"]
  node_popup["Toolbar popup<br/>[popup.js]"]
  node_panel["Snapshot panel<br/>[panel.js]"]
  node_locales["TR/EN messages<br/>[messages.json]"]
end

subgraph group_data["Local snapshot data"]
  node_archive[("Snapshot archive<br/>[content.js]")]
  node_comparison["Snapshot comparison<br/>[panel.js]"]
  node_backup["Backup and restore<br/>[panel.js]"]
end

node_user(("User"))
node_instagram{{"Instagram web"}}

node_user -->|"starts capture"| node_popup
node_popup -->|"requests snapshot"| node_content
node_content -->|"resolves target"| node_profile
node_profile -->|"fetches profile"| node_instagram
node_content -->|"fetches lists"| node_listfetch
node_listfetch -->|"requests list pages"| node_instagram
node_content -->|"assembles result"| node_snapshot
node_snapshot -->|"writes snapshot"| node_archive
node_popup -->|"reads capture history"| node_archive
node_user -->|"opens panel"| node_panel
node_panel -->|"reads and updates"| node_archive
node_panel -->|"compares snapshots"| node_comparison
node_panel -->|"exports or restores"| node_backup
node_popup -->|"loads messages"| node_locales
node_panel -->|"loads messages"| node_locales
node_content -->|"loads messages"| node_locales

click node_popup "https://github.com/voxyfy/radar-ext/blob/main/popup.js"
click node_panel "https://github.com/voxyfy/radar-ext/blob/main/panel.js"
click node_content "https://github.com/voxyfy/radar-ext/blob/main/content.js"
click node_profile "https://github.com/voxyfy/radar-ext/blob/main/content.js"
click node_listfetch "https://github.com/voxyfy/radar-ext/blob/main/content.js"
click node_snapshot "https://github.com/voxyfy/radar-ext/blob/main/content.js"
click node_archive "https://github.com/voxyfy/radar-ext/blob/main/content.js"
click node_comparison "https://github.com/voxyfy/radar-ext/blob/main/panel.js"
click node_backup "https://github.com/voxyfy/radar-ext/blob/main/panel.js"
click node_locales "https://github.com/voxyfy/radar-ext/blob/main/_locales/en/messages.json"

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_content,node_profile,node_listfetch,node_snapshot,node_user toneBlue
class node_popup,node_panel,node_locales toneAmber
class node_archive,node_comparison,node_backup toneMint
class node_instagram toneIndigo
```

## Components

### Snapshot capture

- [Capture message handler](https://github.com/voxyfy/radar-ext/blob/main/content.js): `content.js`
- [Profile resolution](https://github.com/voxyfy/radar-ext/blob/main/content.js): `content.js`
- [List pagination](https://github.com/voxyfy/radar-ext/blob/main/content.js): `content.js`
- [Snapshot assembly](https://github.com/voxyfy/radar-ext/blob/main/content.js): `content.js`

### Extension interface

- [Toolbar popup](https://github.com/voxyfy/radar-ext/blob/main/popup.js): `popup.js`
- [Snapshot panel](https://github.com/voxyfy/radar-ext/blob/main/panel.js): `panel.js`
- [TR/EN messages](https://github.com/voxyfy/radar-ext/blob/main/_locales/en/messages.json): `_locales/en/messages.json`

### Local snapshot data

- [Snapshot archive](https://github.com/voxyfy/radar-ext/blob/main/content.js): `content.js`
- [Snapshot comparison](https://github.com/voxyfy/radar-ext/blob/main/panel.js): `panel.js`
- [Backup and restore](https://github.com/voxyfy/radar-ext/blob/main/panel.js): `panel.js`

### Other components

- **User**
- **Instagram web**

## Connections

- User → Toolbar popup: starts capture (evidence: `README.md`)
- Toolbar popup → Capture message handler: requests snapshot (evidence: `popup.js`)
- Capture message handler → Profile resolution: resolves target (evidence: `content.js`)
- Profile resolution → Instagram web: fetches profile (evidence: `content.js`)
- Capture message handler → List pagination: fetches lists (evidence: `content.js`)
- List pagination → Instagram web: requests list pages (evidence: `content.js`)
- Capture message handler → Snapshot assembly: assembles result (evidence: `content.js`)
- Snapshot assembly → Snapshot archive: writes snapshot (evidence: `content.js`)
- Toolbar popup → Snapshot archive: reads capture history (evidence: `popup.js`)
- User → Snapshot panel: opens panel (evidence: `README.md`)
- Snapshot panel → Snapshot archive: reads and updates (evidence: `panel.js`)
- Snapshot panel → Snapshot comparison: compares snapshots (evidence: `panel.js`)
- Snapshot panel → Backup and restore: exports or restores (evidence: `panel.js`)
- Toolbar popup → TR/EN messages: loads messages (evidence: `popup.js`)
- Snapshot panel → TR/EN messages: loads messages (evidence: `panel.js`)
- Capture message handler → TR/EN messages: loads messages (evidence: `content.js`)