Adds silent song notifications with title, artist and cover art
// ==UserScript==
// @name HTML5 notifications on Spotify Web Player
// @description Adds silent song notifications with title, artist and cover art
// @namespace https://greatest.deepsurf.us/users/4813-swyter
// @match https://play.spotify.com/*
// @version 2015.11.14.01
// @grant none
// @noframes
// ==/UserScript==
/* run this just on the parent page, not in sub-frames */
if (window.parent !== window)
throw "stop execution";
function when_external_loaded()
{
/* request permission to show notifications, if needed */
if (Notification.permission !== 'granted')
Notification.requestPermission();
/* create a listener mechanism for title changes using mutation observers,
let's be good citizens (http://stackoverflow.com/a/29540461) */
document.aptEventListener = document.addEventListener;
document.addEventListener = function(what, callback)
{
if (what !== 'title')
return document.aptEventListener.apply(this, arguments);
console.log('title event listener =>', arguments);
new MutationObserver(function(mutations)
{
console.log('mutation observer =>', mutations[0].target); setTimeout(callback, 1500);
}).observe(document.querySelector('title'), {subtree: true, childList: true, characterData: true});
};
/* trigger a new notification every time the page title changes */
document.addEventListener('title', function()
{
/* trigger it only if we are actually playing songs */
if (!document.title.match('▶'))
{
console.log('returning without showing it up', document.title);
return;
}
console.log('showing it up', document.title);
/* feel free to customize the formatting and layout to your liking */
var track_name = document.querySelector("iframe#app-player").contentWindow.document.querySelector("#track-name > a").textContent;
var track_artist = document.querySelector("iframe#app-player").contentWindow.document.querySelector("#track-artist > a").textContent;
var track_coverart = document.querySelector("iframe#app-player").contentWindow.document.querySelector(".sp-image-img").style.backgroundImage.replace(/"/g,'').split("(")[1].split(")")[0];
/* show it! */
new Notification(track_name, {body: track_artist, icon: track_coverart, silent: true});
});
}
/* inject this cleaning function right in the page to avoid silly sandbox-related greasemonkey limitations */
window.document.head.appendChild(
inject_fn = document.createElement("script")
);
inject_fn.innerHTML = '(' + when_external_loaded.toString() + ')()';