# cherylx86/tab-out architecture

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

- Interactive diagram: https://gitdiagram.com/cherylx86/tab-out
- Repository: https://github.com/cherylx86/tab-out

## Overview

Tab Out is a local Chrome new-tab dashboard for organizing and acting on open tabs. The main workflow queries browser tabs, groups them by domain and recognized homepages, then presents controls to focus, close, or save tabs. Saved items persist locally; a separate service worker maintains the toolbar count. The README documents additional dashboard behaviors whose exact implementation details are not fully visible in the sampled excerpts.

Main entry points: [`extension/background.js`](https://github.com/cherylx86/tab-out/blob/main/extension/background.js) (Badge Worker), [`extension/app.js`](https://github.com/cherylx86/tab-out/blob/main/extension/app.js) (Dashboard App), [`extension/index.html`](https://github.com/cherylx86/tab-out/blob/main/extension/index.html) (New Tab Page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["Tab Dashboard"]
  node_newtab["New Tab Page<br/>[index.html]"]
  node_app["Dashboard App<br/>[app.js]"]
  node_tab_fetch["Open Tab Query<br/>[app.js]"]
  node_domain_groups["Domain Groups<br/>[app.js]"]
  node_dashboard_view["Dashboard Cards<br/>[app.js]"]
  node_tab_actions["Tab Actions<br/>[app.js]"]
  node_tab_controls["Focus / Close<br/>[app.js]"]
  node_close_effects["Close Effects<br/>[app.js]"]
end

subgraph group_saved["Saved Tabs"]
  node_saved_items["Saved Checklist<br/>[app.js]"]
  node_saved_ops["Saved Item Updates<br/>[app.js]"]
  node_local_storage[("Local Storage")]
end

subgraph group_browser["Browser Integration"]
  node_tabs_api["Chrome Tabs API"]
  node_worker["Badge Worker<br/>[background.js]"]
  node_toolbar["Toolbar Badge"]
end

node_user(("User"))

node_user -->|"opens"| node_newtab
node_newtab -->|"loads"| node_app
node_app -->|"starts query"| node_tab_fetch
node_tab_fetch -->|"queries tabs"| node_tabs_api
node_tab_fetch -->|"supplies tabs"| node_domain_groups
node_domain_groups -->|"groups tabs"| node_dashboard_view
node_dashboard_view -->|"offers actions"| node_tab_actions
node_tab_actions -->|"dispatches"| node_tab_controls
node_tab_controls -->|"focuses / closes"| node_tabs_api
node_tab_controls -->|"triggers"| node_close_effects
node_tab_actions -->|"saves / updates"| node_saved_ops
node_saved_ops -->|"reads / writes"| node_local_storage
node_saved_items -->|"loads saved tabs"| node_local_storage
node_app -->|"renders"| node_saved_items
node_worker -->|"queries tabs"| node_tabs_api
node_worker -->|"sets badge"| node_toolbar
node_user -->|"clicks action"| node_toolbar
node_worker -->|"opens dashboard"| node_newtab

click node_newtab "https://github.com/cherylx86/tab-out/blob/main/extension/index.html"
click node_app "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_tab_fetch "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_domain_groups "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_dashboard_view "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_tab_actions "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_tab_controls "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_close_effects "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_saved_items "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_saved_ops "https://github.com/cherylx86/tab-out/blob/main/extension/app.js"
click node_worker "https://github.com/cherylx86/tab-out/blob/main/extension/background.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_newtab,node_app,node_tab_fetch,node_domain_groups,node_dashboard_view,node_tab_actions,node_tab_controls,node_close_effects,node_user toneBlue
class node_saved_items,node_saved_ops,node_local_storage toneAmber
class node_tabs_api,node_worker,node_toolbar toneMint
```

## Components

### Tab Dashboard

- [New Tab Page](https://github.com/cherylx86/tab-out/blob/main/extension/index.html): `extension/index.html`
- [Dashboard App](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Open Tab Query](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Domain Groups](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Dashboard Cards](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Tab Actions](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Focus / Close](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Close Effects](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`

### Saved Tabs

- [Saved Checklist](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- [Saved Item Updates](https://github.com/cherylx86/tab-out/blob/main/extension/app.js): `extension/app.js`
- **Local Storage**

### Browser Integration

- **Chrome Tabs API**
- [Badge Worker](https://github.com/cherylx86/tab-out/blob/main/extension/background.js): `extension/background.js`
- **Toolbar Badge**

### Other components

- **User**

## Connections

- User → New Tab Page: opens
- New Tab Page → Dashboard App: loads
- Dashboard App → Open Tab Query: starts query
- Open Tab Query → Chrome Tabs API: queries tabs
- Open Tab Query → Domain Groups: supplies tabs
- Domain Groups → Dashboard Cards: groups tabs
- Dashboard Cards → Tab Actions: offers actions
- Tab Actions → Focus / Close: dispatches
- Focus / Close → Chrome Tabs API: focuses / closes
- Focus / Close → Close Effects: triggers
- Tab Actions → Saved Item Updates: saves / updates
- Saved Item Updates → Local Storage: reads / writes
- Saved Checklist → Local Storage: loads saved tabs
- Dashboard App → Saved Checklist: renders
- Badge Worker → Chrome Tabs API: queries tabs
- Badge Worker → Toolbar Badge: sets badge
- User → Toolbar Badge: clicks action
- Badge Worker → New Tab Page: opens dashboard