# themconquer/knowgap-extension architecture

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

- Interactive diagram: https://gitdiagram.com/themconquer/knowgap-extension
- Repository: https://github.com/themconquer/knowgap-extension

## Overview

KnowGap is presented here as a Chrome extension for Canvas courses. Its principal workflow is: the popup identifies the Canvas course and user role, then presents the instructor or student view; those views retrieve course performance data and use the backend for course updates and video recommendations. The README also describes risk prediction, cached recommendations, and risk-level mental-health videos. Backend implementation is not in this tree, so backend internals and their relationships are documented only at the service boundary; several extension pages appear to be boilerplate.

Main entry points: [`src/pages/Popup/Studentview.jsx`](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Studentview.jsx) (Student view), [`src/pages/Popup/InstructorView.jsx`](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/InstructorView.jsx) (Instructor view), [`src/pages/Popup/Popup.jsx`](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Popup.jsx) (Role and course router), [`src/pages/Background/background.js`](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Background/background.js) (API message relay)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_extension["Extension runtime"]
  node_popup["Role and course router<br/>[Popup.jsx]"]
  node_background["API message relay<br/>[background.js]"]
  node_content["Content script<br/>[content.js]"]
  node_newtab["New tab page<br/>[Newtab.jsx]"]
  node_options["Options page<br/>[Options.tsx]"]
  node_panel["Devtools panel<br/>[Panel.tsx]"]
end

subgraph group_course_ui["Course experience"]
  node_instructor["Instructor view<br/>[InstructorView.jsx]"]
  node_student["Student view<br/>[Studentview.jsx]"]
end

subgraph group_recommendations["Recommendations and risk"]
  node_risk["Risk calculation<br/>[Studentview.jsx]"]
  node_recommendations_api["Video and support APIs"]
  node_result_cache[("Cached video data")]
end

node_user(("Extension user"))
node_canvas["Canvas LMS"]
node_backend["KnowGap backend"]

node_popup -->|"renders instructor"| node_instructor
node_popup -->|"renders student"| node_student
node_popup -->|"validates token and fetches enrollment"| node_canvas
node_instructor -->|"fetches course data"| node_canvas
node_student -->|"fetches assignments and quizzes"| node_canvas
node_instructor -->|"sends API message"| node_background
node_student -->|"requests videos"| node_background
node_background -->|"forwards API request"| node_backend
node_instructor -->|"updates course context and video links"| node_backend
node_student -->|"updates course and token data"| node_backend
node_student -->|"computes risk score"| node_risk
node_backend -.->|"provides recommendations"| node_recommendations_api
node_recommendations_api -.->|"stores results for reuse"| node_result_cache

click node_popup "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Popup.jsx"
click node_background "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Background/background.js"
click node_content "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Content/content.js"
click node_newtab "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Newtab/Newtab.jsx"
click node_options "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Options/Options.tsx"
click node_panel "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Panel/Panel.tsx"
click node_instructor "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/InstructorView.jsx"
click node_student "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Studentview.jsx"
click node_risk "https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Studentview.jsx"

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,node_background,node_content,node_newtab,node_options,node_panel,node_user toneBlue
class node_instructor,node_student toneAmber
class node_risk,node_recommendations_api,node_result_cache toneMint
class node_canvas,node_backend toneIndigo
```

## Components

### Extension runtime

- [Role and course router](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Popup.jsx): `src/pages/Popup/Popup.jsx`
- [API message relay](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Background/background.js): `src/pages/Background/background.js`
- [Content script](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Content/content.js): `src/pages/Content/content.js`
- [New tab page](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Newtab/Newtab.jsx): `src/pages/Newtab/Newtab.jsx`
- [Options page](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Options/Options.tsx): `src/pages/Options/Options.tsx`
- [Devtools panel](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Panel/Panel.tsx): `src/pages/Panel/Panel.tsx`

### Course experience

- [Instructor view](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/InstructorView.jsx): `src/pages/Popup/InstructorView.jsx`
- [Student view](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Studentview.jsx): `src/pages/Popup/Studentview.jsx`

### Recommendations and risk

- [Risk calculation](https://github.com/themconquer/knowgap-extension/blob/main/src/pages/Popup/Studentview.jsx): `src/pages/Popup/Studentview.jsx`
- **Video and support APIs**
- **Cached video data**

### Other components

- **Extension user**
- **Canvas LMS**
- **KnowGap backend**

## Connections

- Role and course router → Instructor view: renders instructor (evidence: `src/pages/Popup/Popup.jsx`)
- Role and course router → Student view: renders student (evidence: `src/pages/Popup/Popup.jsx`)
- Role and course router → Canvas LMS: validates token and fetches enrollment (evidence: `src/pages/Popup/Popup.jsx`)
- Instructor view → Canvas LMS: fetches course data (evidence: `src/pages/Popup/InstructorView.jsx`)
- Student view → Canvas LMS: fetches assignments and quizzes (evidence: `src/pages/Popup/Studentview.jsx`)
- Instructor view → API message relay: sends API message (evidence: `src/pages/Popup/InstructorView.jsx`)
- Student view → API message relay: requests videos (evidence: `src/pages/Popup/Studentview.jsx`)
- API message relay → KnowGap backend: forwards API request (evidence: `src/pages/Background/background.js`)
- Instructor view → KnowGap backend: updates course context and video links (evidence: `src/pages/Popup/InstructorView.jsx`)
- Student view → KnowGap backend: updates course and token data (evidence: `src/pages/Popup/Studentview.jsx`)
- Student view → Risk calculation: computes risk score (evidence: `src/pages/Popup/Studentview.jsx`)
- KnowGap backend → Video and support APIs: provides recommendations (evidence: `README.md`)
- Video and support APIs → Cached video data: stores results for reuse (evidence: `README.md`)