Motivation

When we are working or just browsing the web it is inconvenient to have to toggle between windows in order to control the music that is playing. Furthermore, we can lose focus or get distracted once we navigate away from our current window and open Spotify. However, using the simple extension that we created, we can eliminate the need to navigate away from your current window to control Spotify. This extension also has another nifty feature; with a quick right-click on the widget, you can search a song by name. So for example, if you hear a tune on Youtube you can quickly search it on Spotify without navigating away from your current window. Then you can maybe add it to a playlist later.

UX / UI

How many features does it support?

The goal of the Spotify extension is to provide basic features that allow the user to quickly and easily control the Spotify app. Below is the list of basic features:

  • Play / Pause
  • Next / Previous
  • Like
  • Right-click & search song in Spotify

Right-click to search a song

Sometimes, we unintentionally find a good melody on youtube or some other websites and we want to find that song in Spotify to add to a playlist. We usually:

  • Highlight & copy song title
  • Go to Spotify desktop app or web player
  • Search by song name
  • Add it to a playlist

As you can see, it takes a few steps and we have to switch context (open the web player with a new tab or switch to the desktop app) to achieve the goal. Finding an optimal way to do this is required so as to reduce switching context (which can lead to lost focus). So the questions begin:

  • Is it possible to find a song in Spotify while I am on the current page (where I found the song)?
  • If it is possible, how can I make it natural for users?

Here are the steps that I found optimal & natural:

  • Highlight the song title
  • Right-click on the song, select item search in Spotify
  • Navigate to the Spotify web player with that song name

From there I can add the song to my playlist. Everything is done in the browser.

Image for post

#spotify #chrome-extension #web #plugins #typescript

Developing a Spotify Player Web Extension
1.40 GEEK