Now Playing Copy Button

For personal use.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

You will need to install an extension such as Tampermonkey to install this script.

Tendrás que instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Tendrás que instalar una extensión como Tampermonkey antes de poder instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Tendrás que instalar una extensión como Stylus antes de poder instalar este script.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

Para poder instalar esto tendrás que instalar primero una extensión de estilos de usuario.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         Now Playing Copy Button
// @namespace    http://tampermonkey.net/
// @version      v1.1
// @description  For personal use.
// @author       MeteorVE
// @match        https://open.spotify.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=spotify.com
// @grant        GM_setClipboard
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    function renderCopyButton() {
        try {
            const nowPlayingWidget = document.querySelector('[data-testid="now-playing-widget"]');
            if (!nowPlayingWidget) {
                // 只在 debug 時開啟,避免刷屏:console.log("[CopyBtn] 找不到 now-playing-widget");
                return;
            }

            const mainDivs = nowPlayingWidget.querySelectorAll(':scope > div');
            if (mainDivs.length < 3) {
                // console.log("[CopyBtn] 找不到第三個主要 div");
                return;
            }

            const thirdDiv = mainDivs[2];
            if (thirdDiv.querySelector('.my-copy-button')) {
                // console.log("[CopyBtn] 按鈕已存在");
                return;
            }

            // 直接插入「兩張紙」SVG icon
            const btn = document.createElement('button');
            btn.className = 'my-copy-button';
            btn.style.background = 'none';
            btn.style.border = 'none';
            btn.style.cursor = 'pointer';
            btn.style.padding = '0 0 0 8px';
            btn.title = "Copy song name";
            btn.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 20 20">
  <rect x="7" y="7" width="9" height="9" rx="2" fill="#888"/>
  <rect x="4" y="4" width="9" height="9" rx="2" stroke="#888" stroke-width="2" fill="none"/>
</svg>
            `;

            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                try {
                    // 動態取得歌名
                    const songTitle = nowPlayingWidget.querySelector('[data-testid="context-item-info-title"]')?.textContent.trim() || '';
                    console.log('[CopyBtn] 提取歌曲名稱:' + songTitle);

                    if (songTitle) {
                        if (typeof GM_setClipboard === 'function') {
                            GM_setClipboard(songTitle);
                        } else if (navigator.clipboard) {
                            navigator.clipboard.writeText(songTitle);
                        } else {
                            const textarea = document.createElement('textarea');
                            textarea.value = songTitle;
                            document.body.appendChild(textarea);
                            textarea.select();
                            document.execCommand('copy');
                            textarea.remove();
                        }
                        btn.title = "已複製!";
                        setTimeout(() => btn.title = "Copy song name", 1000);
                    } else {
                        btn.title = "找不到歌名";
                        setTimeout(() => btn.title = "Copy song name", 1000);
                        console.warn('[CopyBtn] 歌名為空');
                    }
                } catch (err) {
                    console.error('[CopyBtn] 複製按鈕點擊時發生錯誤:', err);
                }
            });

            thirdDiv.appendChild(btn);
            console.log('[CopyBtn] 複製按鈕已渲染');
        } catch (err) {
            console.error('[CopyBtn] renderCopyButton 發生錯誤:', err);
        }
    }

    window.addEventListener('load', renderCopyButton);

    const observer = new MutationObserver(() => {
        renderCopyButton();
    });
    observer.observe(document.body, { childList: true, subtree: true });
})();