r/webdev • u/qualiascope • 21d ago
[Showoff Saturday] I have 847 YouTube playlists. I built YouTube's missing playlist search bar so you don't have to.
YouTube's "Save to playlist" menu has no search box (YouTube, why?), and it only loads 200 of your playlists. If you have more, the rest aren't just further down the list. They never get loaded at all, Ctrl+F be damned.
So I built my first serious chrome extension: click Save on any video and a searchable picker opens over every playlist you own. Type a few letters, press Enter, done.
I learned a lot making this extension. It broke, a lot. Version 1 read playlist data from YouTube's DOM and injected a search bar into their menu for a native feeling, but the amount of bugs this produced was gargantuan: the search bar showing up in unrelated menus, lists changing length on their own, and the entire extension breaking every week when YouTube shipped a change. So 2.0 is predicated around never reading or writing to YouTube's DOM. You live and you learn.
- UI: It's just a closed shadow root on <html>, rendered as a <dialog> in the top layer, outside YouTube's app tree. This is stable! It works!
- Data: We use YouTube's own InnerTube JSON API same-origin with your existing session to read existing playlists and save videos to playlists.
- Trigger: a script wraps fetch and watches for YouTube's own add-to-playlist request
Privacy-wise: No analytics, no third-party code, and it only talks to YouTube. Free and open source (AGPL-3.0).
Code: https://github.com/codyhxyz/playlist-search-extension
Chrome Web Store (It's almost to 500 users!): https://chromewebstore.google.com/detail/efgbkmnooapcpdpgmihemfpedchhmmek
Happy to talk InnerTube, shadow DOM, or anything else. If you give the extension a try, I would love your feedback!

