Simple browser extension to extract Spotify's information from album pages in a specific JSON object.
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.
Navigate to about:addons
, select Install Add-on From File... and choose the .xpi
extension that you've downloaded from the GitHub releases page.
Navigate to chrome://extensions
and drag the .crx
extension that you've downloaded from the GitHub releases page.
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.
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.
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.
Like it? Gimme some love!
If you find any bugs or places where podcasts are still showing up, please create a new issue on the GitHub repo.