🔗 Artwork Extractor for Genius 🟨

One-click cover art extraction for 12 music platforms — built for the Genius community.

Description   |   Installation   |   Usage & General Information   |   Troubleshooting   |   Project Roadmap

 

 

📝 Description

A browser extension that adds “Copy Cover” / “Save Cover” helpers on Genius and popular music platforms.
It's primarily built to quickly grab cover artwork URLs (and optionally convert/host/download them) while working with genius.com.
Compatible with Chrome, Firefox, Edge, and all other Chromium web browsers!

🎵 Features

• Adds UI buttons on supported sites (see below) with four output modes: Copy URL · Download file · Convert to PNG · Host image (ImgBB / ImageKit / Genius S3)
  • Genius: genius.com (+ genius-staging.com)
  • Apple Music: *.apple.com
  • Spotify: *.spotify.com
  • Deezer: *.deezer.com
  • Tidal: *.tidal.com
  • YouTube Music: music.youtube.com
  • SoundCloud: *.soundcloud.com
  • Bandcamp: *.bandcamp.com
  • Yandex Music: *.yandex.ru
  • 45cat / 45worlds / 45spaces
  • DistroKid: *.distrokid.com
• Adds a popup UI to enable/disable each supported site script per-browser.
• Adds a settings page with lots of per-site toggles (copy cover, copy tracklist, popups, conversions, hosting options, etc.).
• On Genius pages, it can also add various editing/utility helpers (song/album/artist tools).

🚀 Installation

Either install the extension from the Chrome Web Store or the Mozilla Add-ons site.
If you want to install it manually (for local build or development), follow these instructions:

1. Open your browser's extensions page.
   • Chrome: chrome://extensions
   • Edge: edge://extensions
2. Enable Developer mode.
3. Click Load unpacked.
4. Select the folder: Artwork-Extractor-for-Genius/

Hosting & API keys

This extension supports multiple “outputs” when you click Copy/Save:

• Copy image URL (default)
• Download/save image (writes a file via a programmatic download)
• Convert to PNG (client-side canvas conversion for JPG sources)
• Host image (upload and then copy the hosted URL)

ImgBB

If you enable ImgBB hosting, you must provide an ImgBB API key:

• Set it in the settings page (stored in browser cache).

ImageKit

If you enable ImageKit hosting, provide your ImageKit private key:

• Set IMAGEKIT_PRIVATE_KEY in the settings page (stored in browser cache).

Genius / Filestack (Genius S3)

Some hosting modes use Filestack endpoints with Genius credentials (GENIUS_API, GENIUS_POLICY, GENIUS_SIGNATURE).
If hosting fails with a “Hosting Error”, open a Genius page where the Filestack uploader appears (e.g., an image upload flow) so the extension can capture the credentials.

Spotify / Tidal API credentials

Some features fetch artwork via official APIs and require client credentials:

• Spotify: SPOTIFY_CLIENT_ID / SPOTIFY_CLIENT_SECRET
• Tidal: TIDAL_CLIENT_ID / TIDAL_CLIENT_SECRET

These are currently defined in Services/secrets.js as empty strings.
For local development, you will need to populate them.

Keep your credentials private. Don't commit real keys.

📖 Usage & General Information

Note: Most supported sites are single-page applications (SPAs). If injected buttons don't appear, reload the tab after enabling the site in the popup.

1. Navigate to a supported site (e.g. Spotify album page, Genius song page).
2. Click the extension icon to open the popup.
3. Ensure the site you're on is enabled (icon should not look “inactive”).
4. Reload the tab (some sites are single-page applications; reload helps scripts attach).
5. Use the injected buttons (e.g. Copy Cover / Save Cover).

Dark mode: Click the extension popup header to toggle dark/light mode. The preference is saved per-browser.

📝 Development notes

There is no build pipeline; edits are plain HTML/CSS/JS. Key files:

• manifest.json: MV3 manifest + content script registration
• Popup/popup.html: popup UI
• Popup/popup.js: per-site enable/disable toggles
• Popup/settings_guides.html: settings UI
• Popup/settings_guides.js: settings logic (stored in browser cache)
• Services/streaming_utils.js: shared image processing (convert/download/upload/copy)
• Services/secrets.js: API key placeholders + local storage wiring

Typical workflow:

1. Load unpacked extension.
2. Make changes.
3. Go to chrome://extensions and click Reload on the extension.
4. Reload the target website tab.
5. Add new work, and document your core code to make it easily understandable by all.

🐛 Troubleshooting

Buttons don't appear

• Ensure the site is enabled in the popup.
• Reload the page (many supported sites are SPAs).
• Try interacting once (some scripts attach on click).

“Hosting Error” / Filestack hosting doesn't work

• The required Genius/Filestack credentials may not be captured yet. Trigger a Genius flow that opens the Filestack upload dialog so the extension can extract and store them.

ImgBB upload fails

• Verify you saved an ImgBB API key in settings.

Spotify/Tidal artwork fetch fails

• Populate API credentials in Services/secrets.js.
• Confirm your credentials allow the client_credentials flow.

Any other problem

• Check the developer console (F12) for errors
• Try refreshing the page

If the issue persists, open an issue with details about your web browser and the page URL.

🤝 Contributing

Contributions are welcome! To add support for a new streaming service:

1. Create Services/[new_site].js following the pattern of an existing service (e.g. Services/deezer.js).
2. Register the content script in manifest.json under content_scripts and host_permissions.
3. Add the site to all four maps in Popup/popup.js: files, displayNames, icons, urls.
4. Drop a matching icon PNG into Popup/.
5. Document any site-specific behaviour in the code.

For bugs or feature ideas, open an issue first. PRs that add a new site or fix a bug are always appreciated.

🗃️ Project Roadmap

Find detailed versioning in the CHANGELOG.md file.

🔮 Possible future improvements

All of them are listed in the issues.
Those with the 🚀 emoji are new features, those with the ↗️ emoji are improvements!
Don't hesitate to suggest new ideas by opening an issue yourself!

---

Developed with ❤️ by the Genius community to enhance the Genius experience.

Back to top