Add Spotify Button to Shazam

Adds a Spotify button to Shazam track pages

当前为 2024-06-18 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Add Spotify Button to Shazam
// @author       NWP
// @description  Adds a Spotify button to Shazam track pages
// @namespace    https://greasyfork.org/users/877912
// @version      0.1
// @license      MIT
// @match        https://www.shazam.com/*
// @grant        none
// ==/UserScript==

(() => {
    'use strict';

    const addSpotifyButton = () => {
        const shareButton = document.querySelector('.TrackPageHeader_share__q1WWs');
        const spotifyButton = shareButton.cloneNode(true);
        const spotifyButtonLink = spotifyButton.querySelector('a');

        spotifyButtonLink.innerHTML = `<span class="Button-module_label__k1Dkf">
            <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png"
            style="width: 40px; height: 40px; margin-right: 15px; vertical-align: middle;">Spotify</span>`;
        spotifyButtonLink.style.padding = "7px 30px 7px 7px";
        spotifyButtonLink.querySelector('.Button-module_label__k1Dkf').style.cssText += 'color: #22ff83 !important;';

        const songTitle = document.querySelector('.TrackPageHeader_title__wGI_Q').textContent;
        const artistName = document.querySelector('meta[itemprop="name"]').content;
        const encodedSearch = encodeURIComponent(`${artistName} ${songTitle}`);

        spotifyButtonLink.href = `https://open.spotify.com/search/${encodedSearch}`;
        spotifyButtonLink.target = '_blank';

        const playButtonColor = document.querySelector('div.TrackPageHeader_parts__85FAC.TrackPageHeader_grid__EPCjO.TrackPageHeader_gridVertTop__yD4OZ').style.backgroundColor;
        spotifyButton.style.backgroundColor = playButtonColor;

        shareButton.parentNode.insertBefore(spotifyButton, shareButton);
    };

    const handleMutations = (mutationsList, observer) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList' && document.querySelector('.FloatingShazamButton_buttonContainer__DZGwL')) {
                addSpotifyButton();
                observer.disconnect();
                break;
            }
        }
    };

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