☰

Shazam YouTube Search Button for track pages

Adds a YouTube search button to Shazam track pages next to track name

  1. // ==UserScript==
  2. // @name        Shazam YouTube Search Button for track pages
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.shazam.com/song/*
  5. // @grant       none
  6. // @version     1.0
  7. // @author      raefraem
  8. // @description Adds a YouTube search button to Shazam track pages next to track name
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.   'use strict';
  14.  
  15.   // Function to create YouTube search URL
  16.   function createYouTubeSearchURL(track, artist) {
  17.     const searchQuery = encodeURIComponent(`${track} - ${artist}`);
  18.     return `https://www.youtube.com/results?search_query=${searchQuery}`;
  19.   }
  20.  
  21.   // Function to create YouTube button
  22.   function createYouTubeButton(track, artist) {
  23.     const button = document.createElement('button');
  24.     button.innerHTML = '▶ YouTube';
  25.     button.style.cssText = `
  26.             background-color: #FF0000;
  27.             color: white;
  28.             border: none;
  29.             border-radius: 4px;
  30.             padding: 5px 10px;
  31.             margin-left: 10px;
  32.             cursor: pointer;
  33.             font-size: 12px;
  34.             vertical-align: middle;
  35.         `;
  36.  
  37.     button.addEventListener('click', e => {
  38.       // Stop the event from bubbling up and triggering Shazam's click handler
  39.       e.preventDefault();
  40.       e.stopPropagation();
  41.  
  42.       // Open YouTube in a new tab
  43.       window.open(createYouTubeSearchURL(track, artist), '_blank');
  44.  
  45.       // Return false to ensure the event is completely stopped
  46.       return false;
  47.     });
  48.  
  49.     return button;
  50.   }
  51.  
  52.   function addYouTubeButton() {
  53.     const artistEl = document.querySelector('.TrackPageHeader_songDetail__I618J h1');
  54.     const artist = artistEl.textContent;
  55.     const track = document.querySelector('.TrackPageHeader_songDetail__I618J h2').textContent;
  56.  
  57.     console.log('artist', artist, 'track', track);
  58.  
  59.     const youtubeButton = createYouTubeButton(track, artist);
  60.     artistEl.appendChild(youtubeButton);
  61.   }
  62.  
  63.   setTimeout(addYouTubeButton, 300);
  64. })();