Greasy Fork is available in English.

Add Spotify Button to Shazam

Adds a Spotify button to Shazam track pages

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