Sidetrack — Now Playing for Spotify
See what's playing on Spotify and control it from a section in VS Code's Explorer, next to Outline and Timeline.
- Album art, track, artist and album; click any of them to open it in Spotify
- Play/pause, previous/next, seek, volume, shuffle and repeat
- Switch playback between your devices (computer, phone, speakers)
- The current track in the status bar; click it to play or pause
- Podcasts get 15-second back and forward buttons
- Adapts to the sidebar's width, down to a one-line player when the section is short
- Uses your theme's colours, including high contrast
Sidetrack is a remote control: the music plays in the Spotify app on your computer or phone, or in the web player. VS Code can't play Spotify audio itself.
Playback control needs Spotify Premium. Spotify refuses control requests from Free accounts, so for those Sidetrack shows what's playing and disables the buttons.
Set up
Click Connect Spotify in the Explorer's Spotify section and approve access in the browser.
Sidetrack's Spotify app is in Spotify's Development Mode, which only lets people the app's owner has allowlisted sign in. If Spotify says your account isn't registered for the app, connect through a Spotify app of your own instead. It's free and takes about two minutes:
- Open the Spotify developer dashboard and create an app.
- Under Redirect URIs add
http://127.0.0.1:43821/callback, and under Which API/SDKs are you planning to use? tick Web API.
- In VS Code, run Sidetrack: Use Your Own Spotify Client ID and paste the app's Client ID.
- Click Connect Spotify in the Explorer's Spotify section and approve access in the browser.
Sidetrack uses the Authorization Code flow with PKCE, so there's no client secret. Tokens are kept in VS Code's secret storage (your OS keychain) and never leave your machine except to talk to Spotify.
Commands and keys
| Command |
macOS |
Windows / Linux |
| Sidetrack: Play/Pause |
⌥⌘P |
Ctrl+Alt+P |
| Sidetrack: Next Track |
⌥⌘] |
Ctrl+Alt+] |
| Sidetrack: Previous Track |
⌥⌘[ |
Ctrl+Alt+[ |
| Sidetrack: Choose Device, Toggle Shuffle, Change Repeat Mode, Refresh, Open Spotify, Show Player, Connect/Disconnect Spotify |
|
|
Settings
| Setting |
Default |
|
sidetrack.clientId |
empty |
Client ID of your Spotify app |
sidetrack.redirectPort |
43821 |
Port for the sign-in callback; register http://127.0.0.1:<port>/callback to match |
sidetrack.statusBar.enabled |
true |
Show the track in the status bar |
sidetrack.statusBar.alignment |
right |
Status bar side |
sidetrack.pollInterval |
3 |
Seconds between updates while the player is visible and playing |
The Web API doesn't push changes, so Sidetrack asks Spotify for the current state: every few seconds while you can see the player, every 15 seconds while it's hidden, and every 30 seconds when nothing is playing and you're not looking.
Remote workspaces
Sidetrack always runs on your own computer (it's a UI extension), so it works the same over Remote-SSH, WSL, Dev Containers and Codespaces.
Develop
npm install
npm run check # typecheck, unit tests, build
npm run test:integration # starts VS Code with the extension (needs a display; use xvfb-run on Linux)
npm run package # sidetrack-<version>.vsix
Press F5 in VS Code to run the extension in a development window.
Release
Pull requests run CI (typecheck, unit tests, integration tests in VS Code, packaging). Merging to main runs CI again and, if version in package.json hasn't been released yet, publishes that tested .vsix to the VS Code Marketplace and Open VSX, tags v<version> and creates a GitHub release with the .vsix and the version's CHANGELOG notes. Merges that don't change the version only run CI.
The Spotify app needs http://127.0.0.1:43821/callback as a Redirect URI and Web API enabled, and each person who should be able to sign in added under User Management in the Spotify developer dashboard while the app is in Development Mode.
To release: bump version in package.json (npm version minor --no-git-tag-version), add a ## <version> section to CHANGELOG.md, and merge.
One-time setup, in the repository's Settings › Secrets and variables › Actions:
VSCE_PAT: an Azure DevOps personal access token with the Marketplace › Manage scope, for the ashinberish publisher (create the publisher first).SPOTIFY_CLIENT_ID: the Client ID of Sidetrack's Spotify app, built into the published extension. It isn't really secret (anyone can read it in the .vsix); a secret just keeps it out of the repo and lets you change it without a commit. A release fails without it. Local builds read it from the environment too: SPOTIFY_CLIENT_ID=… npm run build.OVSX_PAT (optional): an Open VSX access token. Run npx ovsx create-namespace ashinberish -p <token> once. Without it, Open VSX is skipped. The design and plan are in docs/DESIGN.md.
Sidetrack isn't affiliated with or endorsed by Spotify.
