SpotOn, a browser extension for Spotify. Including full custom toggles and user settings! For more info check out the README.md! Happy Spotting!
OTHER License
Improve your Spotify Web Player experience with SpotOn! This browser extension offers a customizable UX/UI redesign, enhancing your listening sessions with new features and themes.
Now for some fun SpotOn stats!
CODE SIZE
.The notes section will be updated with patch notes and additional information about SpotOn with each update. Visit here when you notice a new version or request; it might be helpful!
Today, on March 18, 2024, this repository has undergone a significant update. Every file, except SpotOn itself, has been changed. Moving forward, only the latest version, v3.0.2, will be supported. Consequently, all userscripts are now deprecated. The repository has been transformed from a large collection to a more streamlined view of SpotOn, which can be read in about 10 minutes. Previous Resources have been replaced with an image folder. We have fully transitioned to SpotOnThemes for all theme repository needs. The previous reports and feature requests have been updated, giving the repository a fresh look. Additionally, some interesting statistics have been added at the top.
This update is pretty small, so no massive version jump.
Freya
to Vesper
I've noticed that in Spotify, the Seek Forwards
& Seek Backwards
commands are broken. This is actually an issue with Spotify, and I cannot fix it. So, until Spotify releases a fix, it will sadly remain broken.
font-face
directive0.80ms
, which may only be a 10% decrease in its best cases, but it took a little to achieve!SettingsExtra
, SettingsDown
SettingsDown
, users will now have one button to lock/unlock SpotOn's theme, it will show its current state if it's locked, providing more feedback.scrollbar
and logging
inside of development
Issues & Ideas
to GitHub and Extra
to Chromium Web Storebackground.js
and optimized how SpotOn loads its options into the pageRemove the "Open In App" button in the context menu
css
path in settings.css
as it was not pointed correctly, but still loaded? StrangeSignificant optimizations and bug fixes have been implemented. Detailed changes are as follows:
options
folder has been removed; settingsDown.js
is now located in the settings
folder.toggle.js
and contents of the shared
folder into a single file themeToggles.js
within the settings
folder.import.js
to ensure reliable importing of user settings.settingsOptions.js
, settings.js
, search.js
, locals.js
, and background.js
.28/3/2024: Removed declarativeContent
as indicated in the below email (thanks, Chrome); fixed some minor padding issues and corrected some minor coloring issues as well.
Violation(s): Use of Permissions:
The notes section: When I release a new update, I'll post it here. Most of the time, you can check the Releases. There will be a detailed write-up to guide you through the new version.
Would you like to view SpotOn pictures without going through the whole repository? Click here!
TL;DR: SpotOn enhances your Spotify experience with 61 customizable toggles, allowing for a personalized UI including full custom CSS support, simple color changes without coding, and import/export functionality. Or enjoy your album art being your background!
Here's a more detailed look at what SpotOn offers:
a. SpotOn (on by default) toggle one, this has your album art be made into your background
Image
b. Translation (disabled by default). Currently, you can translate the lyrics into the following languages:
If you want more languages added, please make a request.
You can also modify the Lyrics color!
Image:
Image two:
c. Custom CSS
Here, you can make whatever you want. I suggest turning off SpotOn before editing a theme or making it support SpotOn.
By default, we'll have a few themes you can pick from. These are the defaults. Then you have your controls.
(Refer to image two.) The Save & Load Theme
button will do as stated: it will save the current theme and load it into the page without needing to reload. Now, a big note here is that this version of the Custom CSS does not have any sort of syntax highlighting or linting. This is a bare-bones lightweight CSS theme creator. If you need to lint and correct your CSS, you can do it in VSCode or any IDE.
d. Non-codeable themes Here, you can change the lyrics color, lyrics font size, or (with SpotOn, which makes this feature actually useful), change the color of the navigation bar (NB), and now playing bar (NPB).
e. Hotkeys
SpotOn comes with full customisable hotkeys, Play/Pause and Skip/Reverse with your Media Keys! All changeable at chrome://extensions/shortcuts
Name | Hotkey | Defaults |
---|---|---|
Activate the extension | N/A | N/A |
Hide the Now Playing Bar | ⌃⌘A | N/A |
Hide the Sidebar | ⌃⌘S | N/A |
Like/Dislike | ⌘⇧B | N/A |
Next Track | Media Next Track | Yes |
Open Spotify | ⌘⇧O | N/A |
Play/Pause | Media Play/Pause | Yes |
Previous Track | Media Previous Track | Yes |
Toggle Repeat | ⌥R | N/A |
Seek Backward | N/A | N/A |
Seek Forward | N/A | N/A |
Toggle Shuffle | ⌥S | N/A |
Volume Down | N/A | N/A |
Toggle Mute | N/A | N/A |
Volume Up | N/A | N/A |
What I mean by "hotkey" are suggested and used hotkeys (those used by me). The only three set by default and cannot be reset (if changed) are the media keys, which can be made global (works outside of the browser) or only inside the browser.
For more information on how to create a custom hotkey, it's pretty simple: click the hotkey box, then on your keyboard, press the combination you want. Let go, and voilà! If there are no conflicts, you'll see that your keybind is ready to use! The keen-eyed among you might have noticed that the list includes macOS keybinds. However, this doesn't matter as Chrome will detect your system and adjust accordingly. (This repository won't; I use a Mac, so there will be Mac keybinds :0)
Honestly, this may seem minimal for now, but that's okay. I plan to enhance it further with each update. Currently, it's the lightest and fastest Spotify enhancer online, aligning with my goals for all extensions. While apps like Spcitify enhance the app directly, mine is based on Chrome extensions. (Maybe an FF version soon?)
The Chrome extension store lags in releases because Chrome's review process can take up to a month. Changes should go live within a few hours ideally. If you install from the source and seek quicker updates than Chrome's Web Store, go for it!
Install SpotOn Extension:
Get Started with SpotOn:
When installing SpotOn (from the chrome web store), you'll be prompted to grant certain permissions. Here's why they are necessary:
Read and Change Your Data on open.spotify.com:
Read Your Browsing History:
SpotOn is committed to full transparency and privacy. Being an open-source project, we invite everyone to explore our codebase to see exactly how it functions and ensures user privacy. We encourage a deeper look into our practices and the mechanics behind SpotOn by visiting our repository. For more insights into our approach to privacy and the principles guiding our development, please check out our License and Privacy Policy.
Clone the Source Repository:
gh repo clone SenpaiHunters/SpotOn
or git clone https://github.com/SenpaiHunters/SpotOn.git
Set Up the Extension in Chrome:
chrome://extensions
in your browser.SpotOn/SpotOn
folder.enter
or return
on your keyboard, and customize SpotOn settings as required.SpotOn thrives on community contributions! Whether it's submitting bug reports, feature requests, or contributing to the code, check out our CONTRIBUTING.md for guidelines on how to get involved.
SpotOn is released under the MIT (Modified) License by @senpaihunters. See the LICENSE file for more details.
For support or inquiries, reach out to me via discord at Kami.