/spotify-extension

Spotify mini player Chrome's extension 🎧🎹🎸🎷🎡🎼🎢🧩

Primary LanguageTypeScript

Spotify Chrome Extension



Spotify mini player Chrome's exntesion

codecov Build Status

Motivation

When we are working or just browsing it is inconvenient to have to switch to another window to play/pause or jump to previous tracks or forward to upcoming tracks. Also, we lose focus or get distracted once we navigate away from our current window and open Spotify. With this simple extension we can eliminate the need to navigate away from your current window to control Spotify. This extension 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.

  • Avoid switching context while you're focusing on your browser by providing mini player which helps to control Spotify with ease from your browser.
  • Quick right click to search song by name on Spotify site.

How it looks like?

spotify-extension

Main screens

Screen Shot 2020-06-21 at 0 20 46

Screen Shot 2020-06-21 at 0 20 57

Screen Shot 2020-06-21 at 0 21 05

Login screen

dark

Screen Shot 2020-06-21 at 0 26 10

light

Screen Shot 2020-06-21 at 0 26 01

No device is opened

dark

Screen Shot 2020-06-21 at 0 25 21

light

Screen Shot 2020-06-21 at 0 25 39

Context menu

Search song by name with Chrome's context menu

Screen Shot 2020-05-21 at 23 45 34

Stores

Chrome

https://chrome.google.com/webstore/detail/mini-spotity-player/bhdjjppbnlpjpeicimhemencfgjeldoa

Firefox

https://addons.mozilla.org/en-US/firefox/addon/spotify-player/

Development

npm i

Chrome

npm run dev-chrome

Firefox

npm run dev-firefox

Production

npm i

Chrome

npm run chrome

Firefox

npm run firefox

Load package to Chrome

  1. On the browser's URL address bar
  2. Enter chrome://extensions/
  3. Switch to "Developer mode"
  4. Load "Load unpacked"
  5. Browse to dist/ in source code
  6. Done!

Check here for more detail: https://developer.chrome.com/extensions/getstarted

Load package to Firefox

  1. On the browser's URL address bar
  2. Enter about:debugging#/runtime/this-firefox
  3. Click Load Temporary Add-on...
  4. Browser to your manifest.json & click Open
  5. Done!

Check here for more detail: https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/