Now Playing Copy Button

For personal use.

Dovrai installare un'estensione come Tampermonkey, Greasemonkey o Violentmonkey per installare questo script.

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

Dovrai installare un'estensione come Tampermonkey o Violentmonkey per installare questo script.

Dovrai installare un'estensione come Tampermonkey o Userscripts per installare questo script.

Dovrai installare un'estensione come ad esempio Tampermonkey per installare questo script.

Dovrai installare un gestore di script utente per installare questo script.

(Ho già un gestore di script utente, lasciamelo installare!)

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione come ad esempio Stylus per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

Dovrai installare un'estensione per la gestione degli stili utente per installare questo stile.

(Ho già un gestore di stile utente, lasciamelo installare!)

// ==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 });
})();