# alanrk/tabmark-bookmark-new-tab architecture

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

- Interactive diagram: https://gitdiagram.com/alanrk/tabmark-bookmark-new-tab
- Repository: https://github.com/alanrk/tabmark-bookmark-new-tab

## Overview

TabMark is a Chrome/Edge extension that turns bookmarks into a customizable new-tab dashboard, with search and browser-navigation features. The main user workflow is opening a new tab, browsing bookmark folders or quick links, and launching a destination or search. The README also documents sidebar access, floating-ball shortcuts, bookmark context actions, wallpaper and theme customization, and browser shortcuts. Several of these capabilities are represented by their apparent source modules; unsampled implementation details and wiring are not asserted.

Main entry points: [`src/script.js`](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/script.js) (Bookmark Dashboard), [`src/quick-links.js`](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/quick-links.js) (Quick Links), [`src/search-engine-dropdown.js`](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/search-engine-dropdown.js) (Search Engine Picker), [`src/sidepanel-manager.js`](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel-manager.js) (Sidebar Manager)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_dashboard["New-Tab Dashboard"]
  node_newtab["Bookmark Dashboard<br/>[script.js]"]
  node_bookmark_data["Browser Bookmarks<br/>[script.js]"]
  node_quicklinks["Quick Links<br/>[quick-links.js]"]
  node_gestures["Gesture Navigation"]
end

subgraph group_search["Search and Shortcuts"]
  node_search_ui["Search Engine Picker"]
  node_search_services["Search Destinations"]
  node_floating_ball["Floating Shortcuts<br/>[content.js]"]
end

subgraph group_sidebar["Sidebar Navigation"]
  node_sidebar_panel["Bookmark Sidebar<br/>[sidepanel.html]"]
  node_sidebar_manager["Sidebar Manager"]
  node_sidebar_navigation["Sidebar Navigation"]
  node_iframe_navigation["Embedded Navigation"]
end

subgraph group_preferences["Settings and Appearance"]
  node_settings["Settings Manager<br/>[settings.js]"]
  node_wallpaper["Wallpaper Controls<br/>[wallpaper.js]"]
  node_onboarding["Welcome Setup<br/>[onboarding.js]"]
end

subgraph group_extension["Extension Services"]
  node_browser_shortcuts["Browser Shortcuts<br/>[quick-links.js]"]
  node_background["Background Worker<br/>[background.js]"]
  node_tips["Feature Tips<br/>[feature-tips.js]"]
  node_icons["Icon Utilities<br/>[icons.js]"]
end

node_user(("User"))
node_browser["Browser APIs"]
node_websites["Websites and Search Engines"]

node_user -->|"opens"| node_newtab
node_newtab -->|"reads bookmarks"| node_bookmark_data
node_newtab -->|"initializes"| node_search_ui
node_newtab -->|"initializes"| node_gestures
node_newtab -->|"initializes"| node_tips
node_newtab -.->|"displays"| node_quicklinks
node_newtab -->|"uses bookmark API"| node_browser
node_user -->|"opens shortcuts"| node_quicklinks
node_quicklinks -->|"uses icons"| node_icons
node_quicklinks -->|"loads destination"| node_sidebar_manager
node_search_ui -->|"uses icons"| node_icons
node_user -->|"searches"| node_search_ui
node_search_ui -.->|"opens search"| node_websites
node_user -->|"opens sidebar"| node_sidebar_panel
node_sidebar_panel -.->|"manages content"| node_sidebar_manager
node_sidebar_manager -->|"reads preferences"| node_browser
node_sidebar_navigation -->|"stores navigation state"| node_browser
node_iframe_navigation -.->|"updates history"| node_sidebar_manager
node_user -->|"opens shortcuts"| node_floating_ball
node_user -->|"customizes"| node_settings
node_settings -->|"stores preferences"| node_browser
node_user -->|"chooses wallpaper"| node_wallpaper
node_user -->|"opens tools"| node_browser_shortcuts
node_user -.->|"starts setup"| node_onboarding
node_background -.->|"handles extension events"| node_browser

click node_newtab "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/script.js"
click node_bookmark_data "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/script.js"
click node_quicklinks "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/quick-links.js"
click node_gestures "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/gesture-navigation.js"
click node_search_ui "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/search-engine-dropdown.js"
click node_floating_ball "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/content.js"
click node_sidebar_panel "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel.html"
click node_sidebar_manager "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel-manager.js"
click node_sidebar_navigation "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel-navigation.js"
click node_iframe_navigation "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/navigation-handler.js"
click node_settings "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/settings.js"
click node_wallpaper "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/wallpaper.js"
click node_onboarding "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/onboarding.js"
click node_browser_shortcuts "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/quick-links.js"
click node_background "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/background.js"
click node_tips "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/feature-tips.js"
click node_icons "https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/icons.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_bookmark_data,node_quicklinks,node_gestures,node_user,node_browser toneBlue
class node_search_ui,node_search_services,node_floating_ball toneAmber
class node_sidebar_panel,node_sidebar_manager,node_sidebar_navigation,node_iframe_navigation toneMint
class node_settings,node_wallpaper,node_onboarding toneRose
class node_browser_shortcuts,node_background,node_tips,node_icons,node_websites toneIndigo
```

## Components

### New-Tab Dashboard

- [Bookmark Dashboard](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/script.js): `src/script.js`
- [Browser Bookmarks](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/script.js): `src/script.js`
- [Quick Links](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/quick-links.js): `src/quick-links.js`
- [Gesture Navigation](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/gesture-navigation.js): `src/gesture-navigation.js`

### Search and Shortcuts

- [Search Engine Picker](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/search-engine-dropdown.js): `src/search-engine-dropdown.js`
- **Search Destinations**
- [Floating Shortcuts](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/content.js): `src/content.js`

### Sidebar Navigation

- [Bookmark Sidebar](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel.html): `src/sidepanel.html`
- [Sidebar Manager](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel-manager.js): `src/sidepanel-manager.js`
- [Sidebar Navigation](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/sidepanel-navigation.js): `src/sidepanel-navigation.js`
- [Embedded Navigation](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/navigation-handler.js): `src/navigation-handler.js`

### Settings and Appearance

- [Settings Manager](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/settings.js): `src/settings.js`
- [Wallpaper Controls](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/wallpaper.js): `src/wallpaper.js`
- [Welcome Setup](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/onboarding.js): `src/onboarding.js`

### Extension Services

- [Browser Shortcuts](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/quick-links.js): `src/quick-links.js`
- [Background Worker](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/background.js): `src/background.js`
- [Feature Tips](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/feature-tips.js): `src/feature-tips.js`
- [Icon Utilities](https://github.com/alanrk/tabmark-bookmark-new-tab/blob/master/src/icons.js): `src/icons.js`

### Other components

- **User**
- **Browser APIs**
- **Websites and Search Engines**

## Connections

- User → Bookmark Dashboard: opens (evidence: `README.md`)
- Bookmark Dashboard → Browser Bookmarks: reads bookmarks (evidence: `src/script.js`)
- Bookmark Dashboard → Search Engine Picker: initializes (evidence: `src/script.js`)
- Bookmark Dashboard → Gesture Navigation: initializes (evidence: `src/script.js`)
- Bookmark Dashboard → Feature Tips: initializes (evidence: `src/script.js`)
- Bookmark Dashboard → Quick Links: displays
- Bookmark Dashboard → Browser APIs: uses bookmark API (evidence: `src/script.js`)
- User → Quick Links: opens shortcuts (evidence: `README.md`)
- Quick Links → Icon Utilities: uses icons (evidence: `src/quick-links.js`)
- Quick Links → Sidebar Manager: loads destination (evidence: `src/quick-links.js`)
- Search Engine Picker → Icon Utilities: uses icons (evidence: `src/search-engine-dropdown.js`)
- User → Search Engine Picker: searches (evidence: `README.md`)
- Search Engine Picker → Websites and Search Engines: opens search
- User → Bookmark Sidebar: opens sidebar (evidence: `README.md`)
- Bookmark Sidebar → Sidebar Manager: manages content
- Sidebar Manager → Browser APIs: reads preferences (evidence: `src/sidepanel-manager.js`)
- Sidebar Navigation → Browser APIs: stores navigation state (evidence: `src/sidepanel-navigation.js`)
- Embedded Navigation → Sidebar Manager: updates history
- User → Floating Shortcuts: opens shortcuts (evidence: `README.md`)
- User → Settings Manager: customizes (evidence: `README.md`)
- Settings Manager → Browser APIs: stores preferences (evidence: `src/settings.js`)
- User → Wallpaper Controls: chooses wallpaper (evidence: `README.md`)
- User → Browser Shortcuts: opens tools (evidence: `README.md`)
- User → Welcome Setup: starts setup
- Background Worker → Browser APIs: handles extension events