# sterilitzia02/bewly_nocturne architecture

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

## Overview

Bewly Nocturne is a Bilibili browser extension that adds customized content views, account-aware state, page enhancements, and a distinct visual system. The principal workflow is user navigation in a Bilibili tab, extension-rendered content views and interactions, then requests through extension messaging to Bilibili services. The README documents additional settings, Dock, theme, compatibility, and synchronization capabilities. Sampled source confirms storage coordination and selected feature behavior; unsampled subsystem wiring is represented conservatively.

Main entry points: [`src/background/index.ts`](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/index.ts) (Background coordinator), [`src/components/TopBar/TopBar.vue`](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/components/TopBar/TopBar.vue) (Dock and top bar), [`src/contentScripts/index.ts`](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/index.ts) (Content script entry), [`src/contentScripts/views/Notifications/Notifications.vue`](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Notifications/Notifications.vue) (Notifications and chat)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_content["Content experience"]
  node_content_entry["Content script entry<br/>[index.ts]"]
  node_home["Home and feeds<br/>[Home.vue]"]
  node_search["Search experience<br/>[SearchResults.vue]"]
  node_moments["Moments feed<br/>[Moments.vue]"]
  node_notifications["Notifications and chat<br/>[Notifications.vue]"]
  node_watchlater["Watch Later<br/>[WatchLater.vue]"]
  node_page_shell["Dock and top bar<br/>[TopBar.vue]"]
end

subgraph group_messaging["Extension messaging"]
  node_background["Background coordinator<br/>[index.ts]"]
  node_api_handlers["Bilibili API handlers<br/>[index.ts]"]
  node_private_api["Private message transport<br/>[index.ts]"]
end

subgraph group_settings["Settings and appearance"]
  node_settings_ui["Settings interface<br/>[Settings.vue]"]
end

subgraph group_enhancements["Page enhancements"]
  node_page_features["Player and page features"]
  node_visual_system["Visual adaptations<br/>[index.ts]"]
end

subgraph group_state["State and storage"]
  node_settings_storage["Settings storage"]
  node_storage_coordinator["Settings coordinator"]
  node_local_storage[("Extension local storage<br/>[useStorageLocal.ts]")]
  node_storage_logic["Settings definitions<br/>[storage.ts]"]
end

node_user(("Bilibili user"))
node_bilibili(("Bilibili services"))
node_tab["Bilibili tab"]

node_user -->|"uses"| node_tab
node_tab -->|"hosts"| node_content_entry
node_content_entry -->|"renders"| node_page_shell
node_page_shell -->|"opens"| node_home
node_page_shell -->|"opens"| node_search
node_page_shell -->|"opens"| node_moments
node_page_shell -->|"opens"| node_notifications
node_page_shell -->|"opens"| node_watchlater
node_home -->|"requests data"| node_background
node_search -->|"requests data"| node_background
node_moments -->|"requests data"| node_background
node_notifications -->|"requests data"| node_background
node_watchlater -->|"requests data"| node_background
node_background -->|"dispatches"| node_api_handlers
node_api_handlers -->|"calls APIs"| node_bilibili
node_notifications -->|"uses messaging"| node_private_api
node_private_api -->|"exchanges messages"| node_bilibili
node_settings_ui -->|"reads and writes"| node_settings_storage
node_settings_storage -->|"sends patches"| node_storage_coordinator
node_storage_coordinator -->|"reads and writes"| node_local_storage
node_storage_coordinator -->|"handles messages"| node_background
node_storage_logic -->|"defines settings"| node_settings_storage
node_settings_ui -->|"stores local preferences"| node_local_storage
node_content_entry -->|"activates"| node_page_features
node_content_entry -->|"applies styles"| node_visual_system

click node_content_entry "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/index.ts"
click node_home "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Home/Home.vue"
click node_search "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/SearchResults/SearchResults.vue"
click node_moments "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Moments/Moments.vue"
click node_notifications "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Notifications/Notifications.vue"
click node_watchlater "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/WatchLater/WatchLater.vue"
click node_background "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/index.ts"
click node_api_handlers "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/messageListeners/api/index.ts"
click node_private_api "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/privateMessage/index.ts"
click node_page_shell "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/components/TopBar/TopBar.vue"
click node_settings_ui "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/components/Settings/Settings.vue"
click node_settings_storage "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/composables/useSettingsStorage.ts"
click node_storage_coordinator "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/settingsStorageCoordinator.ts"
click node_local_storage "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/composables/useStorageLocal.ts"
click node_storage_logic "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/logic/storage.ts"
click node_page_features "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/features/watchLaterAutoRemove.ts"
click node_visual_system "https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/styles/adaptedStyles/index.ts"

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_content_entry,node_home,node_search,node_moments,node_notifications,node_watchlater,node_page_shell,node_user toneBlue
class node_background,node_api_handlers,node_private_api toneAmber
class node_settings_ui toneMint
class node_page_features,node_visual_system toneRose
class node_settings_storage,node_storage_coordinator,node_local_storage,node_storage_logic,node_bilibili,node_tab toneIndigo
```

## Components

### Content experience

- [Content script entry](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/index.ts): `src/contentScripts/index.ts`
- [Home and feeds](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Home/Home.vue): `src/contentScripts/views/Home/Home.vue`
- [Search experience](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/SearchResults/SearchResults.vue): `src/contentScripts/views/SearchResults/SearchResults.vue`
- [Moments feed](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Moments/Moments.vue): `src/contentScripts/views/Moments/Moments.vue`
- [Notifications and chat](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/Notifications/Notifications.vue): `src/contentScripts/views/Notifications/Notifications.vue`
- [Watch Later](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/views/WatchLater/WatchLater.vue): `src/contentScripts/views/WatchLater/WatchLater.vue`
- [Dock and top bar](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/components/TopBar/TopBar.vue): `src/components/TopBar/TopBar.vue`

### Extension messaging

- [Background coordinator](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/index.ts): `src/background/index.ts`
- [Bilibili API handlers](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/messageListeners/api/index.ts): `src/background/messageListeners/api/index.ts`
- [Private message transport](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/privateMessage/index.ts): `src/background/privateMessage/index.ts`

### Settings and appearance

- [Settings interface](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/components/Settings/Settings.vue): `src/components/Settings/Settings.vue`

### Page enhancements

- [Player and page features](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/contentScripts/features/watchLaterAutoRemove.ts): `src/contentScripts/features/watchLaterAutoRemove.ts`
- [Visual adaptations](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/styles/adaptedStyles/index.ts): `src/styles/adaptedStyles/index.ts`

### State and storage

- [Settings storage](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/composables/useSettingsStorage.ts): `src/composables/useSettingsStorage.ts`
- [Settings coordinator](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/background/settingsStorageCoordinator.ts): `src/background/settingsStorageCoordinator.ts`
- [Extension local storage](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/composables/useStorageLocal.ts): `src/composables/useStorageLocal.ts`
- [Settings definitions](https://github.com/sterilitzia02/bewly_nocturne/blob/main/src/logic/storage.ts): `src/logic/storage.ts`

### Other components

- **Bilibili user**
- **Bilibili services**
- **Bilibili tab**

## Connections

- Bilibili user → Bilibili tab: uses
- Bilibili tab → Content script entry: hosts
- Content script entry → Dock and top bar: renders
- Dock and top bar → Home and feeds: opens
- Dock and top bar → Search experience: opens
- Dock and top bar → Moments feed: opens
- Dock and top bar → Notifications and chat: opens
- Dock and top bar → Watch Later: opens
- Home and feeds → Background coordinator: requests data
- Search experience → Background coordinator: requests data
- Moments feed → Background coordinator: requests data
- Notifications and chat → Background coordinator: requests data
- Watch Later → Background coordinator: requests data
- Background coordinator → Bilibili API handlers: dispatches
- Bilibili API handlers → Bilibili services: calls APIs
- Notifications and chat → Private message transport: uses messaging
- Private message transport → Bilibili services: exchanges messages
- Settings interface → Settings storage: reads and writes
- Settings storage → Settings coordinator: sends patches
- Settings coordinator → Extension local storage: reads and writes
- Settings coordinator → Background coordinator: handles messages
- Settings definitions → Settings storage: defines settings
- Settings interface → Extension local storage: stores local preferences
- Content script entry → Player and page features: activates
- Content script entry → Visual adaptations: applies styles