Developing a Spotify Player Web Extension

The goal of Spotify extension is to provide basic features that allow the user to quickly and easily control the Spotify app. 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.

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.

spotify chrome-extension web plugins typescript

Working with Chrome offers access to an immense repository of Chrome extensions and tools which make our daily tasks less of a chore. 11 Extremely Useful & Best Chrome Extensions for Web Developers 2020

In this series, we're going to cover everything related to browser extension development - from setup to deployment - by creating our own productivity website blocking extension. To start, today we'll cover all the general concepts you'll need to know, as well as set up our modern boilerplate that will use TypeScript for the more maintainable codebase.

Don’t build your own authentication system; leverage Google OAuth2 for your Google Chrome Extension. This is our unique Chrome Extension key. Copy and paste that into the “manifest.json” of the Chrome Extension you’re actually developing. (the folder you chose for the “Pack Extension” step)

whatsapp web-w app web-webs whatsapp-web.whatsapp.com-wsp web-web.whatsapp.com qr-whats up online-whatsappwebsite

Create a basic login system using NodeJS, Express, and Javascript This tutorial uses a boiler-plate Google Chrome Extension setup. If you want to know how to get that setup, Check out my write-up here: