$ show mbnuqw/sidebery
Sidebery is a mature, feature-rich Firefox WebExtension that transforms the browser's sidebar into a highly customizable vertical tab manager. It provides tree-style tab management, integrated bookmarks and history panels, container-based tab isolation, session snapshots, search across tabs/bookmarks/history, context menus, keyboard shortcuts, drag-and-drop, custom CSS theming, and synchronization via Firefox Sync or Google Drive. The codebase is built with Vue 3, TypeScript, and Stylus, and follows a modular architecture with distinct background, sidebar, setup, and popup contexts communicating via a custom IPC framework. The source code reveals deep integration with Firefox's WebExtensions APIs and extensive use of reactive state patterns to maintain synchronized UI across multiple extension pages. The repository is actively maintained (latest commit August 2026) with frequent releases, a comprehensive issue tracker, and continuous integration via GitHub Actions. The code exhibits strong engineering practices: separation of foreground/background services, debounced storage operations, typed IPC actions, and a centralized utility module. However, some modules (notably `tabs.fg.ts` and `sidebar.fg.ts`) are large and tightly coupled, and there are minor signs of technical debt (deprecated settings, hardcoded error strings). Overall, the extension delivers on its promise of a powerful sidebar tab manager with an impressive degree of customization.
The LLM identified 4 files worth highlighting for reuse:
A self-contained module providing a set of general-purpose utility functions: unique ID generation (uid), debouncing, throttling, asynchronous queue (AsyncQueue), color conversion (hex to HSL, luminance), URL parsing and domain extraction, object normalization, and wait/timeout helpers. This module has no internal dependencies beyond standard TypeScript/browser types and can be extracted into any web project or WebExtension with minimal adaptation.
A typed, connection-aware IPC framework for communication between different WebExtension contexts (background, sidebar, popups, setup page). It handles port management, auto-reconnection, pending request queues, request-response matching, and broadcasting. The pattern is generic enough to be reused in any multi-context browser extension that requires reliable, typed message passing between scripts.
An alternative inter-page communication layer using BroadcastChannel for default containers and a URL-hash chunking mechanism for non-default containers (e.g., private windows). It provides a consistent async request/response API over these transports, with automatic transport selection and reconnection. This pattern is reusable for any WebExtension that needs to communicate between pages that cannot use direct port connections.
A reusable Vue 3 component that wraps content in a scrollable container with visual shadow indicators at the top and bottom to indicate scroll overflow. It tracks scroll position via a resize observer and emits events for scroll start/end. The component is self-contained, uses scoped styles, and can be extracted into any Vue 3 project for consistent scrollable panel UX.