Pukkelpop Lineup prelisten YouTube Spotify Google Music #pkp15 chrome extension


Since I am a pretty avid music fan, a regular Pukkelpop visitor and a web developer/ux designer, I like my music as my technology, new, exciting and innovative. And working in webdevelopment and UX and browsing the web 24/7 made me pretty critical too on how things should work (for me). And if they don’t, how I can make ’em work for me.

One thing that I missed on the Pukkelpop site is that I wanted to quickly listen to all the 200+ artists on the roster. And quickly, just from a click in the line-up overview.

So, I built a chrome extension which does exactly that. I had never built a chrome extension before, so thought this might make a nice use case. Scratching my own itch

Update 2016:
You can now install the extension directly from the Chrome Web Store



If you want to try it, you need the chrome browser, so make sure you use that (won’t work without)

  1. Download the chrome extension file here
  2. Visit chrome://extensions/ and drag and drop the file IN that page.
  3. A popup will ask to Add or Cancel. Click Add

You’re done. Just head over to the Pukkelpop site with the line-up, eg. http://www.pukkelpop.be/nl/line-up/vrijdag/ and click the name of an artist in the grid (make sure screen is wide enough, so you see the grid). In the popup there will be icons for YouTube, Spotify and Google Music for that specific artist. Click the music service of your choice. It’ll open in a new tab.

Vrijdag - Pukkelpop 2015

Voila, immediate listening. Enjoy !

The chrome extension just reads the contents of the Pukkelpop site you’re visiting, nothing more. I’ve published the source code to Github as well.

If you have any request or comment, please do. To learn more about building chrome extensions, I have ;)

For the Google Music users, there’s also this playlist I put together a few weeks ago. A list with all artists I could find (almost all, except for 2 or 3). with 3 of their tracks, or a few more for some.


XHTML: You can use these tags: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>