jiuyang5354/bilibili-margin

Overview

MARGIN (映间) is an open-source Manifest V3 extension for Edge, Chrome and Firefox that redesigns Bilibili's homepage, search, video, reading and account pages. It changes layout and visual presentation rather than the playback stack: the native Bilibili player, danmaku, comments, quality selection and fullscreen controls remain in place. The project is written in TypeScript and CSS with Shadow DOM, and uses Vite to split page modules by route.

It is aimed at regular Bilibili viewers who find the default interface noisy and want a calmer layout with light/dark themes, animated backgrounds, keyword/UP/play-count/duration filters for recommendations, a glass-style favorites drawer, a local viewing-activity heatmap and a command palette. The README states the extension is not an official Bilibili product and is not affiliated with Bilibili.

Quick start

1. Download margin.zip from the latest release and unzip it to a fixed folder.
2. Open edge://extensions or chrome://extensions and enable Developer mode.
3. Click Load unpacked and select the folder containing manifest.json.
4. Open or refresh Bilibili.

For Firefox 140 and later, download margin-firefox.zip, open about:debugging#/runtime/this-firefox, click Load Temporary Add-on and choose the zip. Temporary extensions are removed when Firefox restarts.

To temporarily return to the native Bilibili interface, choose 原版 in the top-bar menu, add ?margin=off to the page URL, or disable MARGIN from the extension popup. Manually loaded builds update by unzipping the new version into the same folder, clicking Reload in the extension manager and refreshing Bilibili.

Build from source

Building requires Node.js 22:

npm ci
npm run build

The build output is in dist/ and can be loaded as an unpacked extension. npm run pack produces margin.zip in environments that provide the zip command.

Constraints

• Other Chromium browsers such as Brave, Opera, Vivaldi and Arc may follow the Chrome steps, but the README says they are untested. Safari is not supported.
• Some account functions require a Bilibili login, and availability also depends on Bilibili's own APIs, permissions and regional restrictions.
• Settings, activity records and custom backgrounds are stored locally. The weather feature sends IP, city or coordinate information to ipwho.is and Open-Meteo; the full data flow is described in the privacy policy.
• Animated backgrounds pause when the tab is hidden and respect the system's reduced-motion setting. Frame rate depends on the device and page load and is not guaranteed to be a fixed 60fps; see the performance notes.
• The project is MIT licensed. Third-party components, fonts and design references have their own licenses.

HotRepo's take

The project was recorded once on HotRepo's new-project list for TypeScript on 2026-11-02, gaining 13 stars over an observed growth window of roughly five hours that day, with 113 stars and 7 forks at the latest sample. A single snapshot is not enough to establish a trend. What it does show is steady interest during that short window for a niche utility that restyles one specific video site. The README's emphasis on keeping the native player, local-only data storage, export/import backups and explicit weather-service disclosure gives readers concrete things to check before installing, rather than relying on the screenshots alone.