afonsojramos / spotify-details-extractor

Simple browser extension to extract Spotify's information from album pages in a specific JSON object.

Home Page:https://afonsojramos.me/music

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Spotify Details Extractor 🎶

Simple browser extension to extract Spotify details from an album page in a specific JSON object. You can find it in any context menu/extension bar near you!

PS: This extension tries to be the least intrusive possible and will only show up in the context menu when you are in the Spotify Web App in the case of the Firefox browser. On Chromium, the extension will show as disabled on other websites. Additionally, in Firefox, since Spotify captures the user's Right Click, you need to press Shift + Right Click for it to show up. This does not work in Chromium, which is why the implementation is different.

Installation

Browser Download Usage Example

Spicetify Marketplace or manually.

Manual Installation

Firefox

Navigate to about:addons, select Install Add-on From File... and choose the .xpi extension that you've downloaded from the GitHub releases page.

Chromium

Navigate to chrome://extensions and drag the .crx extension that you've downloaded from the GitHub releases page.

Spicetify

Navigate to ~/.config/spicetify/Extensions and download extractor.js that can be found in the GitHub releases page. Then, using spicetify config extensions extractor.js, enable the extension.

Motivation

Currently, my personal website uses a JSON Database to store the details of my favorite albums of the year.

Each entry is constructed by the following JSON schema:

{
  "title": "For the first time",
  "artist": "Black Country, New Road",
  "image": "https://i.scdn.co/image/ab67616d00001e020ffaa4f75b2297d36ff1e0ad",
  "url": "https://open.spotify.com/album/2PfgptDcfJTFtoZIS3AukX"
}

The resulting page can be seen in afonsojramos.me/music.

However, the process of extracting the details from the album page is quite tedious as I have to manually copy the album's URL, and extract the album's title, artist and image URL. All of this requires the opening of the developer's console and makes the process rather slow.

Therefore, I decided to create a browser extension that will extract the details from the album page, store them in the desired JSON object, and automatically copy it to the clipboard.

Implementation

Initially, I was going to create an extension that would create an in-page button that would trigger the events. I was somewhat successful in this (it works perfectly on Spicetify), but on Spotify's Web App things are a bit more complicated as it meant interacting with the page's DOM, which I preferred not to do as it would be more prone to errors.

With this in mind, v2 shifted to a simple context menu on Firefox and the extension button on Chromium, due to the latter not supporting context menus. These proved to be way more reliable and faster than the previous approach.

More

🌟 Like it? Gimme some love!
Github Stars badge

If you find any bugs or places where podcasts are still showing up, please create a new issue on the GitHub repo.
https://github.com/afonsojramos/spotify-details-extractor/issues

About

Simple browser extension to extract Spotify's information from album pages in a specific JSON object.

https://afonsojramos.me/music


Languages

Language:JavaScript 100.0%