☰

Add Spotify Button to Shazam

Adds a Spotify button to Shazam track pages

  1. // ==UserScript==
  2. // @name         Add Spotify Button to Shazam
  3. // @author       NWP
  4. // @description  Adds a Spotify button to Shazam track pages
  5. // @namespace    https://greasyfork.org/users/877912
  6. // @version      0.1
  7. // @license      MIT
  8. // @match        https://www.shazam.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.     'use strict';
  14.  
  15.     const addSpotifyButton = () => {
  16.         const shareButton = document.querySelector('.TrackPageHeader_share__q1WWs');
  17.         const spotifyButton = shareButton.cloneNode(true);
  18.         const spotifyButtonLink = spotifyButton.querySelector('a');
  19.  
  20.         spotifyButtonLink.innerHTML = `<span class="Button-module_label__k1Dkf">
  21.             <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png"
  22.             style="width: 40px; height: 40px; margin-right: 15px; vertical-align: middle;">Spotify</span>`;
  23.         spotifyButtonLink.style.padding = "7px 30px 7px 7px";
  24.         spotifyButtonLink.querySelector('.Button-module_label__k1Dkf').style.cssText += 'color: #22ff83 !important;';
  25.  
  26.         const songTitle = document.querySelector('.TrackPageHeader_title__wGI_Q').textContent;
  27.         const artistName = document.querySelector('meta[itemprop="name"]').content;
  28.         const encodedSearch = encodeURIComponent(`${artistName} ${songTitle}`);
  29.  
  30.         spotifyButtonLink.href = `https://open.spotify.com/search/${encodedSearch}`;
  31.         spotifyButtonLink.target = '_blank';
  32.  
  33.         const playButtonColor = document.querySelector('div.TrackPageHeader_parts__85FAC.TrackPageHeader_grid__EPCjO.TrackPageHeader_gridVertTop__yD4OZ').style.backgroundColor;
  34.         spotifyButton.style.backgroundColor = playButtonColor;
  35.  
  36.         shareButton.parentNode.insertBefore(spotifyButton, shareButton);
  37.     };
  38.  
  39.     const handleMutations = (mutationsList, observer) => {
  40.         for (let mutation of mutationsList) {
  41.             if (mutation.type === 'childList' && document.querySelector('.FloatingShazamButton_buttonContainer__DZGwL')) {
  42.                 addSpotifyButton();
  43.                 observer.disconnect();
  44.                 break;
  45.             }
  46.         }
  47.     };
  48.  
  49.     const observer = new MutationObserver(handleMutations);
  50.     observer.observe(document.body, { childList: true, subtree: true });
  51. })();