# asheroto/extension-exporter architecture

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

- Interactive diagram: https://gitdiagram.com/asheroto/extension-exporter
- Repository: https://github.com/asheroto/extension-exporter
- Video tour (about a minute): https://gitdiagram.com/asheroto/extension-exporter/video

## Overview

Extension Exporter is a local browser extension that turns installed-extension metadata into a downloadable offline HTML report. The main workflow starts when the user clicks the extension button: the background script opens the exporter page, which reads installed extensions, builds enabled/disabled and text-only listings, fills a template, and downloads the result. The report also offers copy/print controls and links to extension statistics and security reports. Source excerpts are partial, so details of page markup and UI wiring are represented only where documented or directly supported.

Main entry points: [`src/page.js`](https://github.com/asheroto/extension-exporter/blob/main/src/page.js) (Export logic), [`src/background.js`](https://github.com/asheroto/extension-exporter/blob/main/src/background.js) (Launch handler), [`src/page.html`](https://github.com/asheroto/extension-exporter/blob/main/src/page.html) (Exporter page), [`src/template.html`](https://github.com/asheroto/extension-exporter/blob/main/src/template.html) (Copy and print)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_launch["Launch and UI"]
  node_browser_button["Extension button"]
  node_background["Launch handler<br/>[background.js]"]
  node_export_page["Exporter page<br/>[page.html]"]
end

subgraph group_export["Export workflow"]
  node_exporter["Export logic<br/>[page.js]"]
  node_browser_management["Extension management"]
  node_catalog["Labels and URLs<br/>[strings.js]"]
  node_html_template["Report template<br/>[template.html]"]
end

subgraph group_report["Report capabilities"]
  node_download["Downloaded report"]
  node_report_controls["Copy and print<br/>[template.html]"]
  node_stats_service["Stats sites"]
  node_security_service["CRXcavator"]
end

node_user(("User"))

node_user -->|"clicks"| node_browser_button
node_browser_button -->|"dispatches click"| node_background
node_background -->|"opens tab"| node_export_page
node_export_page -->|"loads script"| node_exporter
node_exporter -->|"reads extensions"| node_browser_management
node_browser_management -->|"returns metadata"| node_exporter
node_exporter -->|"reads labels and URLs"| node_catalog
node_exporter -->|"loads template"| node_html_template
node_exporter -->|"generates and downloads"| node_download
node_user -->|"opens report"| node_download
node_download -->|"provides controls"| node_report_controls
node_user -->|"copies or prints"| node_report_controls
node_user -.->|"opens stats link"| node_stats_service
node_user -.->|"opens report link"| node_security_service

click node_background "https://github.com/asheroto/extension-exporter/blob/main/src/background.js"
click node_export_page "https://github.com/asheroto/extension-exporter/blob/main/src/page.html"
click node_exporter "https://github.com/asheroto/extension-exporter/blob/main/src/page.js"
click node_catalog "https://github.com/asheroto/extension-exporter/blob/main/src/strings.js"
click node_html_template "https://github.com/asheroto/extension-exporter/blob/main/src/template.html"
click node_report_controls "https://github.com/asheroto/extension-exporter/blob/main/src/template.html"

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_browser_button,node_background,node_export_page,node_user toneBlue
class node_exporter,node_browser_management,node_catalog,node_html_template toneAmber
class node_download,node_report_controls,node_stats_service,node_security_service toneMint
```

## Components

### Launch and UI

- **Extension button**
- [Launch handler](https://github.com/asheroto/extension-exporter/blob/main/src/background.js): `src/background.js`
- [Exporter page](https://github.com/asheroto/extension-exporter/blob/main/src/page.html): `src/page.html`

### Export workflow

- [Export logic](https://github.com/asheroto/extension-exporter/blob/main/src/page.js): `src/page.js`
- **Extension management**
- [Labels and URLs](https://github.com/asheroto/extension-exporter/blob/main/src/strings.js): `src/strings.js`
- [Report template](https://github.com/asheroto/extension-exporter/blob/main/src/template.html): `src/template.html`

### Report capabilities

- **Downloaded report**
- [Copy and print](https://github.com/asheroto/extension-exporter/blob/main/src/template.html): `src/template.html`
- **Stats sites**
- **CRXcavator**

### Other components

- **User**

## Connections

- User → Extension button: clicks
- Extension button → Launch handler: dispatches click
- Launch handler → Exporter page: opens tab
- Exporter page → Export logic: loads script
- Export logic → Extension management: reads extensions
- Extension management → Export logic: returns metadata
- Export logic → Labels and URLs: reads labels and URLs
- Export logic → Report template: loads template
- Export logic → Downloaded report: generates and downloads
- User → Downloaded report: opens report
- Downloaded report → Copy and print: provides controls
- User → Copy and print: copies or prints
- User → Stats sites: opens stats link
- User → CRXcavator: opens report link