# holynova/chatgpt-page-reader architecture

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

- Interactive diagram: https://gitdiagram.com/holynova/chatgpt-page-reader
- Repository: https://github.com/holynova/chatgpt-page-reader

## Overview

回答成书 is a Chrome extension that turns ChatGPT answers into paginated book pages. The main workflow starts when a user opens the reader from the extension or ChatGPT page, then extracts and paginates answer content for reading; the reader also supports navigation, typography, and follow-up prompts through ChatGPT’s native composer. The README documents additional catalog and history-loading capabilities. Some wiring is in omitted portions of the content script, so uncertain relationships are left out or marked unverified.

Main entry points: [`extension/content.js`](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js) (Book reader), [`extension/background.js`](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/background.js) (Action handler), [`extension/catalog.js`](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js) (Catalog model), [`extension/composer.js`](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/composer.js) (Native prompt composer)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_launch["Launch and integration"]
  node_background["Action handler<br/>[background.js]"]
  node_content["Reader controller<br/>[content.js]"]
end

subgraph group_reading["Reading experience"]
  node_styles["Reader styles<br/>[styles.js]"]
  node_paginator["Content paginator<br/>[paginator.js]"]
  node_reader["Book reader<br/>[content.js]"]
  node_pageflow["Page navigation<br/>[content.js]"]
end

subgraph group_navigation["Catalog and history"]
  node_catalog["Catalog model<br/>[catalog.js]"]
  node_catalogui["Catalog panel<br/>[content.js]"]
  node_history["Session history loading<br/>[catalog.js]"]
  node_earlier["Earlier turn loading<br/>[catalog.js]"]
end

subgraph group_interaction["Reading preferences and prompts"]
  node_settings["Typography settings<br/>[content.js]"]
  node_composer["Native prompt composer<br/>[composer.js]"]
  node_followup["In-book follow-up<br/>[content.js]"]
  node_theme["Themes and immersion<br/>[content.js]"]
end

node_user(("Reader"))
node_chrome["Chrome extension"]
node_chatgpt["ChatGPT page"]
node_localstorage[("Browser local storage")]

node_user -->|"clicks action"| node_chrome
node_chrome -->|"dispatches click"| node_background
node_background -->|"checks host"| node_chatgpt
node_background -->|"sends open request"| node_content
node_background -->|"injects scripts"| node_content
node_content -->|"applies styles"| node_styles
node_user -->|"opens reader"| node_chatgpt
node_chatgpt -->|"provides answer"| node_reader
node_reader -->|"paginates content"| node_paginator
node_reader -->|"navigates pages"| node_pageflow
node_catalog -->|"extracts headings"| node_paginator
node_reader -.->|"builds navigation"| node_catalog
node_reader -->|"opens directory"| node_catalogui
node_user -->|"loads sessions"| node_history
node_user -->|"loads earlier turns"| node_earlier
node_catalogui -->|"shows hierarchy"| node_catalog
node_settings -->|"stores preferences"| node_localstorage
node_user -->|"adjusts layout"| node_settings
node_user -->|"asks follow-up"| node_followup
node_followup -.->|"submits natively"| node_composer
node_composer -->|"uses native send"| node_chatgpt
node_user -->|"changes appearance"| node_theme

click node_background "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/background.js"
click node_content "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_styles "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/styles.js"
click node_paginator "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/paginator.js"
click node_reader "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_pageflow "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_catalog "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js"
click node_catalogui "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_history "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js"
click node_earlier "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js"
click node_settings "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_composer "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/composer.js"
click node_followup "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js"
click node_theme "https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.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_background,node_content toneBlue
class node_styles,node_paginator,node_reader,node_pageflow,node_localstorage toneAmber
class node_catalog,node_catalogui,node_history,node_earlier toneMint
class node_settings,node_composer,node_followup,node_theme toneRose
class node_user,node_chrome,node_chatgpt toneIndigo
```

## Components

### Launch and integration

- [Action handler](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/background.js): `extension/background.js`
- [Reader controller](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`

### Reading experience

- [Reader styles](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/styles.js): `extension/styles.js`
- [Content paginator](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/paginator.js): `extension/paginator.js`
- [Book reader](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`
- [Page navigation](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`

### Catalog and history

- [Catalog model](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js): `extension/catalog.js`
- [Catalog panel](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`
- [Session history loading](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js): `extension/catalog.js`
- [Earlier turn loading](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/catalog.js): `extension/catalog.js`

### Reading preferences and prompts

- [Typography settings](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`
- [Native prompt composer](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/composer.js): `extension/composer.js`
- [In-book follow-up](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`
- [Themes and immersion](https://github.com/holynova/chatgpt-page-reader/blob/main/extension/content.js): `extension/content.js`

### Other components

- **Reader**
- **Chrome extension**
- **ChatGPT page**
- **Browser local storage**

## Connections

- Reader → Chrome extension: clicks action (evidence: `README.md`)
- Chrome extension → Action handler: dispatches click (evidence: `extension/background.js`)
- Action handler → ChatGPT page: checks host (evidence: `extension/background.js`)
- Action handler → Reader controller: sends open request (evidence: `extension/background.js`)
- Action handler → Reader controller: injects scripts (evidence: `extension/background.js`)
- Reader controller → Reader styles: applies styles (evidence: `extension/content.js`)
- Reader → ChatGPT page: opens reader (evidence: `README.md`)
- ChatGPT page → Book reader: provides answer (evidence: `README.md`)
- Book reader → Content paginator: paginates content (evidence: `README.md`)
- Book reader → Page navigation: navigates pages (evidence: `README.md`)
- Catalog model → Content paginator: extracts headings (evidence: `extension/catalog.js`)
- Book reader → Catalog model: builds navigation
- Book reader → Catalog panel: opens directory (evidence: `README.md`)
- Reader → Session history loading: loads sessions (evidence: `README.md`)
- Reader → Earlier turn loading: loads earlier turns (evidence: `README.md`)
- Catalog panel → Catalog model: shows hierarchy (evidence: `README.md`)
- Typography settings → Browser local storage: stores preferences (evidence: `extension/content.js`)
- Reader → Typography settings: adjusts layout (evidence: `README.md`)
- Reader → In-book follow-up: asks follow-up (evidence: `README.md`)
- In-book follow-up → Native prompt composer: submits natively
- Native prompt composer → ChatGPT page: uses native send (evidence: `README.md`)
- Reader → Themes and immersion: changes appearance (evidence: `README.md`)