# atharvananavate/gfg-to-github architecture

> Architecture diagram of the GitHub repository atharvananavate/gfg-to-github, 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/atharvananavate/gfg-to-github
- Repository: https://github.com/atharvananavate/gfg-to-github

## Overview

GfG to GitHub is a Chrome extension that links a GitHub account and repository, then watches GeeksForGeeks submissions and commits successful solutions. The workflow captures problem metadata and code, writes organized README and language-specific files, and updates difficulty statistics shown in the popup. Onboarding supports creating or linking a repository; the homepage and popup also provide navigation and theme controls. The sampled scripts show the core message, storage, and API interactions; README-described capabilities are included where wiring was not sampled.

Main entry points: [`scripts/geeksForGeeks.js`](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/geeksForGeeks.js) (Submission detection), [`scripts/background.js`](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/background.js) (Extension message handler), [`popup.js`](https://github.com/atharvananavate/gfg-to-github/blob/main/popup.js) (Popup dashboard logic), [`index.html`](https://github.com/atharvananavate/gfg-to-github/blob/main/index.html) (Homepage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_onboard["Onboarding"]
  node_onboardlogic["Repository onboarding<br/>[index.js]"]
  node_oauthstart["OAuth launch"]
  node_oauthreturn["OAuth callback<br/>[localSetup.js]"]
end

subgraph group_submission["Submission workflow"]
  node_capture["Submission detection<br/>[geeksForGeeks.js]"]
  node_extract["Code extraction<br/>[extractCode.js]"]
  node_cleanup["Injected-node cleanup<br/>[nodeDeletion.js]"]
end

subgraph group_interface["Extension interface"]
  node_popup["Popup UI<br/>[popup.html]"]
  node_popuplogic["Popup dashboard logic<br/>[popup.js]"]
  node_home["Homepage<br/>[index.html]"]
  node_theme["Theme toggle<br/>[darkmode.js]"]
  node_particles["Interactive background<br/>[particle.js]"]
end

subgraph group_platform["Browser and services"]
  node_background["Extension message handler<br/>[background.js]"]
  node_storage[("Extension local storage")]
end

node_user(("Extension user"))
node_gfg["GeeksForGeeks site"]
node_github["GitHub API"]

node_user -->|"opens"| node_popup
node_popup -->|"runs"| node_popuplogic
node_popuplogic -->|"reads state"| node_storage
node_popuplogic -->|"validates token"| node_github
node_user -->|"starts login"| node_oauthstart
node_oauthstart -->|"opens authorization"| node_github
node_github -->|"redirects"| node_oauthreturn
node_oauthreturn -->|"exchanges code"| node_github
node_oauthreturn -->|"sends credentials"| node_background
node_background -->|"saves credentials"| node_storage
node_background -->|"opens after login"| node_home
node_user -->|"configures repository"| node_home
node_home -->|"runs"| node_onboardlogic
node_onboardlogic -->|"creates or checks repository"| node_github
node_onboardlogic -->|"saves repository link"| node_storage
node_user -->|"solves problem"| node_gfg
node_gfg -->|"reports submission"| node_capture
node_capture -->|"requests code extraction"| node_background
node_background -->|"injects script"| node_extract
node_extract -->|"exposes solution"| node_capture
node_capture -->|"commits solution and README"| node_github
node_capture -->|"reads upload state"| node_storage
node_capture -->|"updates statistics"| node_storage
node_capture -->|"requests cleanup"| node_background
node_background -->|"injects script"| node_cleanup
node_popuplogic -->|"initializes theme"| node_theme
node_theme -->|"persists preference"| node_storage
node_home -->|"renders canvas"| node_particles
node_popuplogic -->|"links to"| node_home

click node_popup "https://github.com/atharvananavate/gfg-to-github/blob/main/popup.html"
click node_popuplogic "https://github.com/atharvananavate/gfg-to-github/blob/main/popup.js"
click node_home "https://github.com/atharvananavate/gfg-to-github/blob/main/index.html"
click node_theme "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/darkmode.js"
click node_particles "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/particle.js"
click node_onboardlogic "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/index.js"
click node_oauthstart "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/githubAuthentication.js"
click node_oauthreturn "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/localSetup.js"
click node_background "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/background.js"
click node_capture "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/geeksForGeeks.js"
click node_extract "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/extractCode.js"
click node_cleanup "https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/nodeDeletion.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_onboardlogic,node_oauthstart,node_oauthreturn,node_user toneBlue
class node_capture,node_extract,node_cleanup toneAmber
class node_popup,node_popuplogic,node_home,node_theme,node_particles,node_github toneMint
class node_background,node_storage toneRose
class node_gfg toneIndigo
```

## Components

### Onboarding

- [Repository onboarding](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/index.js): `scripts/index.js`
- [OAuth launch](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/githubAuthentication.js): `scripts/githubAuthentication.js`
- [OAuth callback](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/localSetup.js): `scripts/localSetup.js`

### Submission workflow

- [Submission detection](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/geeksForGeeks.js): `scripts/geeksForGeeks.js`
- [Code extraction](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/extractCode.js): `scripts/extractCode.js`
- [Injected-node cleanup](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/nodeDeletion.js): `scripts/nodeDeletion.js`

### Extension interface

- [Popup UI](https://github.com/atharvananavate/gfg-to-github/blob/main/popup.html): `popup.html`
- [Popup dashboard logic](https://github.com/atharvananavate/gfg-to-github/blob/main/popup.js): `popup.js`
- [Homepage](https://github.com/atharvananavate/gfg-to-github/blob/main/index.html): `index.html`
- [Theme toggle](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/darkmode.js): `scripts/darkmode.js`
- [Interactive background](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/particle.js): `scripts/particle.js`

### Browser and services

- [Extension message handler](https://github.com/atharvananavate/gfg-to-github/blob/main/scripts/background.js): `scripts/background.js`
- **Extension local storage**

### Other components

- **Extension user**
- **GeeksForGeeks site**
- **GitHub API**

## Connections

- Extension user → Popup UI: opens
- Popup UI → Popup dashboard logic: runs
- Popup dashboard logic → Extension local storage: reads state
- Popup dashboard logic → GitHub API: validates token
- Extension user → OAuth launch: starts login
- OAuth launch → GitHub API: opens authorization
- GitHub API → OAuth callback: redirects
- OAuth callback → GitHub API: exchanges code
- OAuth callback → Extension message handler: sends credentials
- Extension message handler → Extension local storage: saves credentials
- Extension message handler → Homepage: opens after login
- Extension user → Homepage: configures repository
- Homepage → Repository onboarding: runs
- Repository onboarding → GitHub API: creates or checks repository
- Repository onboarding → Extension local storage: saves repository link
- Extension user → GeeksForGeeks site: solves problem
- GeeksForGeeks site → Submission detection: reports submission
- Submission detection → Extension message handler: requests code extraction
- Extension message handler → Code extraction: injects script
- Code extraction → Submission detection: exposes solution
- Submission detection → GitHub API: commits solution and README
- Submission detection → Extension local storage: reads upload state
- Submission detection → Extension local storage: updates statistics
- Submission detection → Extension message handler: requests cleanup
- Extension message handler → Injected-node cleanup: injects script
- Popup dashboard logic → Theme toggle: initializes theme
- Theme toggle → Extension local storage: persists preference
- Homepage → Interactive background: renders canvas
- Popup dashboard logic → Homepage: links to