BeatSaver preview

Preview BeatSaver with +1 Rabbit's BS Viewer (https://skystudioapps.com/bs-viewer/)
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         BeatSaver preview
// @namespace    http://ext.ccloli.com
// @version      0.1
// @description  Preview BeatSaver with +1 Rabbit's BS Viewer (https://skystudioapps.com/bs-viewer/)
// @author       864907600cc
// @match        *://beatsaver.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let lastId;
    const handle = document.createElement('div');
    handle.style.cssText = 'width: 720px; height: 20px; line-height: 20px; background: #ddd; color: #666; cursor: pointer; user-select: none; padding: 0 6px; font-size: 12px; position: absolute; right: 0; bottom: 0; z-index: 999';
    const iframe = document.createElement('iframe');
    iframe.name = 'foo';
    iframe.style.cssText = 'width: 720px; height: 405px; border: 2px solid #ddd; display: block; position: absolute; right: 0; bottom: 20px; background: rgba(255, 255, 255, 0.5); z-index: 999';
    handle.onclick = () => {
        iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none';
    };

    const load = () => {
        const id = location.pathname.split('/beatmap/').pop();
        if (!/^[0-9a-f]+$/i.test(id) || lastId === id) {
            return;
        }
        lastId = id;
        const src = `https://skystudioapps.com/bs-viewer/?id=${id}`;
        handle.innerHTML = `+1 Rabbit\'s BS Viewer | <a href="${src}" target="_blank">${src}</a>`;
        iframe.src = src;
        document.body.appendChild(iframe);
        document.body.appendChild(handle);
    };

    const history = window.history;
    const pushState = history.pushState;
    const replaceState = history.replaceState;
    window.addEventListener('popstate', load);
    window.history.pushState = (...args) => {
        pushState.apply(history, args);
        load();
    }
    window.history.replaceState = (...args) => {
        replaceState.apply(history, args);
        load();
    }
    load();
})();