How keleus/bewlycat works
BewlyCat is a browser extension that customizes Bilibili’s website with redesigned pages, navigation, settings, and playback enhancements. The main user workflow is: visit Bilibili, load the extension’s content-script experience, browse home/search and other content pages, and use API-backed controls and persistent preferences. Separate branches cover the top bar, settings and cloud synchronization, and player/page enhancements. The tree and README establish these capabilities; some subsystem links are documented rather than confirmed from sampled implementation, so those edges are marked dashed with no evidence path.
Main entry points: App.vue Extension app shell · contentScripts/index.ts Content-script host · api.ts API client · inject/index.ts Player enhancements
Components 21
Page experience
- Content-script host
src/contentScripts/index.ts - Extension app shell
src/contentScripts/views/App.vue - Home feed
src/contentScripts/views/Home/Home.vue - Search pages
src/contentScripts/views/SearchResults - Moments feed
src/contentScripts/views/Moments/Moments.vue - Video cards
src/components/VideoCard/VideoCard.vue
Navigation
- Custom top bar
src/components/TopBar/TopBar.vue - Top-bar state
src/stores/topBarStore.ts
Data services
- API client
src/utils/api.ts - Background worker
src/background/index.ts - API handlers
src/background/messageListeners/api
Settings and state
- Settings screens
src/components/Settings/Settings.vue - Settings storage
src/logic/storage.ts - Settings persistence
src/composables/useSettingsStorage.ts - Storage coordinator
src/background/settingsStorageCoordinator.ts - Cloud sync protocol
src/utils/settingsCloudSyncProtocol.ts
Site enhancements
- Player enhancements
src/inject/index.ts - Page enhancements
src/contentScripts/features - Local loudness
src/inject/audio/localLoudness.ts
Other components
- Bilibili visitor
- Bilibili website
Connections 21
- Bilibili visitor → Bilibili website: visits
README.md - Bilibili website → Content-script host: hosts extension
- Content-script host → Extension app shell: mounts
- Extension app shell → Home feed: shows pages
src/contentScripts/views/App.vue - Extension app shell → Search pages: shows pages
src/contentScripts/views/App.vue - Extension app shell → Moments feed: shows pages
src/contentScripts/views/App.vue - Home feed → Video cards: renders
- Extension app shell → Custom top bar: shows navigation
- Custom top bar → Top-bar state: uses state
- Video cards → API client: requests data
- API client → Background worker: sends messages
- Background worker → API handlers: registers handlers
src/background/index.ts - Search pages → API client: requests results
src/contentScripts/views/SearchResults/composables/useSearchRequest.ts - Settings screens → Settings storage: configures
- Settings storage → Settings persistence: persists settings
src/logic/storage.ts - Settings persistence → Storage coordinator: sends patches
src/composables/useSettingsStorage.ts - Storage coordinator → Cloud sync protocol: uses sync protocol
src/background/settingsStorageCoordinator.ts - Content-script host → Page enhancements: enables enhancements
src/contentScripts/index.ts - Content-script host → Player enhancements: integrates player controls
- Player enhancements → Local loudness: uses audio module
src/inject/index.ts - Bilibili website → Player enhancements: receives playback changes