osu-beatmap-preview-plugin

Cross-browser Manifest V3 extension popup for previewing osu! beatmaps.

The plugin consumes osu-beatmap-preview for canvas rendering and owns browser-extension concerns such as active-tab detection, .osu fetching, playback controls, mod selection, and popup UI.

Development

Install and run the plugin:

npm install
npm run dev

To test an unpublished local version of the library, temporarily change the dependency in package.json:

"osu-beatmap-preview": "file:../osu-beatmap-preview"

Build the local library before installing plugin dependencies:

cd ../osu-beatmap-preview
npm install
npm run build

cd ../osu-beatmap-preview-plugin
npm install

Build

npm run build

The built extension is emitted to dist/.

Load The Extension

Chrome or Edge

1. Open chrome://extensions or edge://extensions.
2. Enable Developer mode.
3. Choose Load unpacked.
4. Select this repo's dist/ folder.

Firefox

1. Open about:debugging#/runtime/this-firefox.
2. Choose Load Temporary Add-on.
3. Select dist/manifest.json.

Usage

Open an osu! beatmap page such as:

https://osu.ppy.sh/beatmapsets/...#osu/...

Then open the extension popup. The plugin reads the active tab URL, extracts the beatmap id, fetches https://osu.ppy.sh/osu/{beatmapId}, and renders the beatmap through osu-beatmap-preview.