☰

HTML5 notifications on Spotify Web Player

Adds silent song notifications with title, artist and cover art

目前为 2015-11-14 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        HTML5 notifications on Spotify Web Player
  3. // @description Adds silent song notifications with title, artist and cover art
  4. // @namespace   https://greasyfork.org/users/4813-swyter
  5. // @match       https://play.spotify.com/*
  6. // @version     2015.11.14
  7. // @grant       none
  8. // @noframes
  9. // ==/UserScript==
  10.  
  11. /* run this just on the parent page, not in sub-frames */
  12. if (window.parent !== window)
  13.   throw "stop execution";
  14.  
  15. function when_external_loaded()
  16. {
  17.   /* request permission to show notifications, if needed */
  18.   if (Notification.permission !== 'granted')
  19.     Notification.requestPermission();
  20.  
  21.   /* create a listener mechanism for title changes using mutation observers,
  22.      let's be good citizens (http://stackoverflow.com/a/29540461) */
  23.   document.aptEventListener = document.addEventListener;
  24.   document.addEventListener = function(what, callback)
  25.   {
  26.     if (what !== 'title')
  27.       return document.aptEventListener.apply(this, arguments);
  28.  
  29.     console.log('title event listener =>', arguments);
  30.  
  31.     new MutationObserver(function(mutations)
  32.     {
  33.       console.log('mutation observer =>', mutations[0].target.nodeValue); callback();
  34.     }).observe(document.querySelector('title'), {subtree: true, childList: true, characterData: true});
  35.   };
  36.  
  37.   /* trigger a new notification every time the page title changes */
  38.   document.addEventListener('title', function()
  39.   {
  40.     /* feel free to customize the formatting and layout to your liking */
  41.     var track_name      = document.querySelector("iframe#app-player").contentWindow.document.querySelector("#track-name > a").textContent;
  42.     var track_artist    = document.querySelector("iframe#app-player").contentWindow.document.querySelector("#track-artist > a").textContent;
  43.     var track_coverart  = document.querySelector("iframe#app-player").contentWindow.document.querySelector(".sp-image-img").style.backgroundImage.replace(/"/g,'').split("(")[1].split(")")[0];
  44.  
  45.     /* show it! */
  46.     new Notification(track_name, {body: track_artist, icon: track_coverart, silent: true});
  47.   });
  48. }
  49.  
  50. /* inject this cleaning function right in the page to avoid silly sandbox-related greasemonkey limitations */
  51. window.document.head.appendChild(
  52.   inject_fn = document.createElement("script")
  53. );
  54.  
  55. inject_fn.innerHTML = '(' + when_external_loaded.toString() + ')()';