https://github.com/afonsojramos/spotify-details-extractor
Simple browser extension to extract Spotify's information from album pages in a specific JSON object.
https://github.com/afonsojramos/spotify-details-extractor
chrome-extension extension firefox-addon spicetify-extensions spotify
Last synced: 3 months ago
JSON representation
Simple browser extension to extract Spotify's information from album pages in a specific JSON object.
- Host: GitHub
- URL: https://github.com/afonsojramos/spotify-details-extractor
- Owner: afonsojramos
- Created: 2021-11-21T20:03:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-23T19:44:02.000Z (about 2 years ago)
- Last Synced: 2025-04-06T05:56:46.317Z (3 months ago)
- Topics: chrome-extension, extension, firefox-addon, spicetify-extensions, spotify
- Language: JavaScript
- Homepage: https://afonsojramos.me/music
- Size: 651 KB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://github.com/afonsojramos/spotify-details-extractor/releases/latest).
### Chromium
Navigate to `chrome://extensions` and drag the `.crx` extension that you've downloaded from the [GitHub releases page](https://github.com/afonsojramos/spotify-details-extractor/releases/latest).
### Spicetify
Navigate to `~/.config/spicetify/Extensions` and download `extractor.js` that can be found in the [GitHub releases page](https://github.com/afonsojramos/spotify-details-extractor/releases/latest). Then, using `spicetify config extensions extractor.js`, enable the extension.
## Motivation
Currently, my personal website uses a [JSON Database](https://github.com/afonsojramos/afonsojramos.me/blob/main/data/music.json) to store the details of my favorite albums of the year.
Each entry is constructed by the following JSON schema:
```json
{
"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](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!
[](https://github.com/afonsojramos/spotify-details-extractor/)
If you find any bugs or places where podcasts are still showing up, please [create a new issue](https://github.com/afonsojramos/spotify-details-extractor/issues/new/choose) on the GitHub repo.
