playlist-extension/2025-05-29-codemcp-feat-add-current-page-to-playlist-button-in-popup.md

2025-05-29 - codemcp - Add Current Page to Playlist Button in Popup

User Request

in the individual playlist view of the popup menu (not the main view), add a button at the bottom that will add the current page (in the active tab) to the playlist. use the website's title (html tag) as the video title and the url as the url. disable the button (and grey it out) if the url's host is not youtube.com.

Implementation

Files Modified

popup/popup.html

• Added a new button container at the bottom of the individual playlist view
• Added add-current-page-container div with add-current-page-btn button
• Button uses Alpine.js bindings for click handler, disabled state, and text content

popup/popup.js

• Added new data properties:
  • currentTab: stores current active tab info
  • isCurrentTabYoutube: boolean for YouTube detection
  • addCurrentPageButtonText: dynamic button text
• Added getCurrentTab() method to fetch current tab info and check if it's YouTube
• Added updateAddCurrentPageButtonText() method to set appropriate button text
• Added addCurrentPageToPlaylist() method to add current page to the selected playlist
• Added Alpine.js binding addCurrentPageButton with click handler, disabled state, and CSS classes
• Called getCurrentTab() in the init() method

popup/popup.css

• Added comprehensive styling for the new button:
  • .add-current-page-container: container styling with border separator
  • .add-current-page-btn: main button styling with hover effects
  • Disabled state styling with grey colors and no-cursor

Key Features

1. YouTube Detection: Button is only enabled when current tab is on youtube.com
2. Dynamic Text: Button text changes based on current tab state:
   • "Add Current Page to Playlist" (YouTube tab)
   • "Add Current Page (YouTube only)" (non-YouTube tab)
   • "Unable to get current page" (no tab access)
3. CSP Compliance: All Alpine.js code follows CSP requirements with no JavaScript expressions in HTML
4. Visual Feedback: Button is visually disabled (greyed out) when not usable
5. Integration: Uses existing playlist management system and storage

Technical Details

• Uses browser.tabs.query() to get current active tab
• Checks URL hostname for YouTube detection
• Creates video object with current tab's URL and title
• Adds video to end of current playlist
• Updates display after adding video
• Respects existing Alpine.js patterns and CSP compliance

2025-05-29 - codemcp - Add Current Page to Playlist Button in Popup + Shared Utils

User Request

background.js has a function called addLinkToPlaylist, which adds a video to a playlist so long as it is not already present in a playlist. move that function to a shared file (like "playlist utils" or something) along with any of its dependent functions (like findPlaylist and findVideoInPlaylist). then have the new popup menu button call this function instead.

Implementation

New Files Created

shared/playlist-utils.js

• PlaylistUtils global object containing shared functions
• extractVideoId(): Extract YouTube video ID from URL
• findVideoInPlaylists(): Find video in all playlists, returns [playlistName, index, isLast] or false
• findPlaylist(): Find which playlist contains a video (wrapper for findVideoInPlaylists)
• addVideoToPlaylist(): Add video to playlist with duplicate checking
• addLinkToPlaylist(): Legacy function for context menu compatibility

Files Modified

manifest.json

• Added shared/playlist-utils.js to background scripts array
• Scripts load in order: shared utils first, then background.js

popup/popup.html

• Added <script src="../shared/playlist-utils.js"></script> before popup.js
• Ensures shared utilities are available to popup code

background.js

• Removed duplicate functions: findVideoInPlaylists, findPlaylist, addLinkToPlaylist
• Updated function calls to use PlaylistUtils:
  • updateTracking() now uses PlaylistUtils.findVideoInPlaylists()
  • findNext() now uses PlaylistUtils.findVideoInPlaylists()
  • Context menu handler uses PlaylistUtils.addLinkToPlaylist()

popup/popup.js

• Replaced custom addCurrentPageToPlaylist() with call to shared utils
• Benefits of shared function:
  • Automatic duplicate checking (won't add if video exists in any playlist)
  • Consistent video object structure
  • Better error handling and logging
  • Returns boolean indicating if video was actually added
• Improved user experience:
  • Only refreshes display if video was actually added
  • Logs when video already exists (could show user notification later)

Key Improvements

1. Code Deduplication: Removed ~65 lines of duplicate code from background.js
2. Consistent Logic: Both popup and context menu use same duplicate-checking logic
3. Better UX: Popup button now prevents adding duplicates (context menu already did this)
4. Maintainable: Single source of truth for playlist operations
5. No Build Tools: Pure vanilla JavaScript with global objects pattern

Technical Details

• Loading Order: shared/playlist-utils.js loads before both popup.js and background.js
• Global Scope: PlaylistUtils object available in both contexts
• Browser API Usage: Uses browser.storage.local consistently
• Error Handling: Graceful handling of malformed URLs and missing data
• Backward Compatibility: Context menu functionality unchanged

Architecture Benefits

• Separation of Concerns: UI logic vs business logic clearly separated
• Reusability: Playlist functions can be used by any future components
• Testing: Shared functions could be unit tested independently
• Consistency: Same validation and storage patterns everywhere