☰

Add Spotify and YouTube Buttons to Shazam

Adds Spotify and YouTube buttons to Shazam track pages

  1. // ==UserScript==
  2. // @name         Add Spotify and YouTube Buttons to Shazam
  3. // @author       tanso
  4. // @description  Adds Spotify and YouTube buttons to Shazam track pages
  5. // @version      1.1
  6. // @license      MIT
  7. // @match        https://www.shazam.com/*
  8. // @grant        none
  9. // @namespace    https://greasyfork.org/users/1467885
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.     'use strict';
  14.  
  15.     const addSpotifyButton = () => {
  16.         const shareButton = document.querySelector('.TrackPageHeader_share__q1WWs');
  17.         if (!shareButton) return;
  18.  
  19.         const spotifyButton = shareButton.cloneNode(true);
  20.         const spotifyButtonLink = spotifyButton.querySelector('a');
  21.  
  22.         spotifyButtonLink.innerHTML = `<span class="Button-module_label__k1Dkf">
  23.             <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2023/05/Spotify_Primary_Logo_RGB_Green.png"
  24.             style="width: 40px; height: 40px; margin-right: 15px; vertical-align: middle;">Spotify</span>`;
  25.  
  26.         spotifyButtonLink.style.padding = "7px 30px 7px 7px";
  27.         spotifyButtonLink.querySelector('.Button-module_label__k1Dkf').style.cssText += 'color: white !important;';
  28.         spotifyButtonLink.style.backgroundColor = '#101218';
  29.  
  30.         const songTitle = document.querySelector('.TrackPageHeader_title__wGI_Q')?.textContent;
  31.         const artistName = document.querySelector('meta[itemprop="name"]')?.content;
  32.         if (!songTitle || !artistName) return;
  33.  
  34.         const encodedSearch = encodeURIComponent(`${artistName} ${songTitle}`);
  35.  
  36.         spotifyButtonLink.href = `https://open.spotify.com/search/${encodedSearch}`;
  37.         spotifyButtonLink.target = '_blank';
  38.  
  39.         shareButton.parentNode.insertBefore(spotifyButton, shareButton);
  40.     };
  41.  
  42.     const addYouTubeButton = () => {
  43.         const shareButton = document.querySelector('.TrackPageHeader_share__q1WWs');
  44.         if (!shareButton) return;
  45.  
  46.         const youtubeButton = shareButton.cloneNode(true);
  47.         const youtubeButtonLink = youtubeButton.querySelector('a');
  48.  
  49.         youtubeButtonLink.innerHTML = `<span class="Button-module_label__k1Dkf">
  50.             <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/YouTube_icon_%282013-2017%29.png/800px-YouTube_icon_%282013-2017%29.png"
  51.             style="width: 40px; height: 40px; margin-right: 15px; vertical-align: middle; border-radius: 50%;">YouTube</span>`;
  52.  
  53.         youtubeButtonLink.style.padding = "7px 30px 7px 7px";
  54.         youtubeButtonLink.querySelector('.Button-module_label__k1Dkf').style.cssText += 'color: white !important;';
  55.         youtubeButtonLink.style.backgroundColor = '#2E2E2E';
  56.  
  57.         const songTitle = document.querySelector('.TrackPageHeader_title__wGI_Q')?.textContent;
  58.         const artistName = document.querySelector('meta[itemprop="name"]')?.content;
  59.         if (!songTitle || !artistName) return;
  60.  
  61.         const encodedSearch = encodeURIComponent(`${artistName} ${songTitle}`);
  62.  
  63.         youtubeButtonLink.href = `https://www.youtube.com/results?search_query=${encodedSearch}`;
  64.         youtubeButtonLink.target = '_blank';
  65.  
  66.         shareButton.parentNode.insertBefore(youtubeButton, shareButton.nextSibling);
  67.     };
  68.  
  69.     window.addEventListener('load', () => {
  70.         addSpotifyButton();
  71.         addYouTubeButton();
  72.     });
  73. })();