I like last.fm from since back when Pandora became geofenced. One thing, which is kind of annoying, is that you have to jump through hoops to get your favorite tag started. I exclusively want that one tag as station and instead of just setting a bookmark, I wanted to have a go with GreaseMonkey to have a seamless ‘built-in’ experience. And not just changing the window.location but having a button left of the ‘<<‘ (previous) at the always visible player.

With very little exposure to javascript before, I was pleasantly surprised about the ease of finding information. Sadly from multiple decades, different styles, versions, …

Right-click and “Inspect Element” on the player yielded:

developer console view of inspected player element

Aha, the player is an <ul> (unordered list) in HTML, and is of class ‘media-controls’. The button to play the tag is more interesting:

developer console view of inspected 'play alternative rock tag' button

Three classes, custom attributes.

It took about 30 min. to patchwork something together by searching the web for things like “greasemonkey button insertion” “javascript select by class” and the like. Debugging seems a lot easier today with the browser console, if it were available at the start of this millenium maybe I could’ve had a more thorough dip into JS.

New button visible in player

Now, on all pages at last.fm I have an extra button for my alternative-rock-tag. Nice.

// ==UserScript==
// @namespace aoe
// @name lastfm play Alternative tag
// @version 1.0
// @description Add button to play Alternative-tag
// @include https://www.last.fm/*
// @include http://www.last.fm/*
// @run-at document-start
// @grant none
// ==/UserScript==

//the above comments are interpreted by Greasemonkey, the 
//@include https://www.last.fm/* enables the script on all pages 

  'use strict'
   window.addEventListener('load', () => {

   function addButton() {
//create new button as list element
     let liel = document.createElement('li');
     let btn = document.createElement('button');
//add the details learned from inspecting, classes and attributes
//exchange button class with 'player-bar-btn' otherwise it looks
//weird, try yourself to see
//insert link of real button
     btn.setAttribute("data-station-url", "/player/station/tag/alternative+rock");
     btn.setAttribute("data-analytics-action", "StartStation");
     btn.setAttribute("data-analytics-label", "tag");
//grab the player element and put the created button first
     let controls = document.getElementsByClassName("media-controls")
     controls[0].insertBefore(liel, controls[0].childNodes[0]);