HTML5 notifications on Spotify Web Player

Adds silent song notifications with title, artist and cover art

当前为 2015-11-14 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name        HTML5 notifications on Spotify Web Player
// @description Adds silent song notifications with title, artist and cover art
// @namespace   https://greasyfork.org/users/4813-swyter
// @match       https://play.spotify.com/*
// @version     2015.11.14
// @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.nodeValue); callback();
    }).observe(document.querySelector('title'), {subtree: true, childList: true, characterData: true});
  };

  /* trigger a new notification every time the page title changes */
  document.addEventListener('title', function()
  {
    /* 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() + ')()';