The latest articles on DEV Community by Abdulqodir Miraliyev (@almali). https://dev.to/almali https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4017852%2Fd20c5c2f-c3e0-432a-97e2-bd70e39cd0a3.png https://dev.to/almali en Abdulqodir Miraliyev Mon, 06 Jul 2026 13:20:30 +0000 https://dev.to/almali/i-built-a-chrome-extension-that-drag-and-drops-youtube-videos-into-playlists-using-ai-42d5 https://dev.to/almali/i-built-a-chrome-extension-that-drag-and-drops-youtube-videos-into-playlists-using-ai-42d5 <h2> The problem </h2> <p>I have hundreds of saved YouTube videos scattered across playlists. Every time I find something worth saving, I have to: open the video, click "Save", scroll through a list of playlists, find the right one, click it. Repeat dozens of times a day.</p> <p>I wanted something faster — ideally just <em>drag and drop</em>.</p> <h2> What I built </h2> <p>I built <strong>Tortma</strong> — a Chrome extension that puts a floating overlay on youtube.com. You drag any video thumbnail onto it, and the AI suggests which of your existing playlists it belongs to. You confirm with one click.</p> <p>The whole thing takes under 2 seconds per video.</p> <h2> How it works technically </h2> <p><strong>1. Drag-and-drop detection</strong><br> Content script listens for <code>dragstart</code> on video thumbnails. When a drop event hits the overlay, it extracts the video title and channel name from the DOM.</p> <p><strong>2. YouTube Data API v3</strong><br> The extension uses Google OAuth to fetch the user's actual playlists. This means AI suggestions are personalized — it knows your real playlist names and descriptions.</p> <p><strong>3. AI matching</strong><br> The video metadata + playlist list gets sent to a backend endpoint. An LLM does semantic matching and returns the best playlist match with a confidence score.</p> <p><strong>4. Manifest V3</strong><br> Built on MV3 for future Chrome compatibility. Service worker handles auth token refresh.</p> <h2> The tricky parts </h2> <ul> <li> <strong>OAuth flow in MV3</strong> — The <code>chrome.identity</code> API behaves differently than in MV2. Had to handle token refresh carefully in the service worker.</li> <li> <strong>Drag events on YouTube</strong> — YouTube's own drag handlers conflict. Had to use <code>capture: true</code> on event listeners and call <code>stopPropagation</code>.</li> <li> <strong>AI accuracy</strong> — First version just used the playlist name. Adding the playlist description and recent video history improved match accuracy significantly.</li> </ul> <h2> Stack </h2> <ul> <li>Chrome Extension (MV3) — content script, service worker, popup</li> <li>YouTube Data API v3</li> <li>Google OAuth 2.0</li> <li>Backend API for AI matching</li> </ul> <h2> Try it </h2> <p>It's live on the Chrome Web Store: <a href="https://chromewebstore.google.com/detail/fmjfpejhfgkehebmcjakjkkdhchdmpce" rel="noopener noreferrer">https://chromewebstore.google.com/detail/fmjfpejhfgkehebmcjakjkkdhchdmpce</a></p> <p>Free tier: 20 videos/day. Would love feedback on the UX or any edge cases you hit!</p> showdev javascript ai chrome