playlist-extension/2025-06-06-codemcp-feat-add-save-channel-functionality-with-curl-comm.md

Save Channel Functionality Implementation

User Request

Add a "save channel" button at the bottom of the popup that switches to a new view. The view is only active if the currently open tab's URL contains youtube.com.*/videos. The view contains:

1. A text-editable field with a copy button that copies the contents to clipboard
2. An interval number input to modify the checkInterval field
3. A list of categories that modify the field contents when clicked
4. The field is populated with a curl command template

Template string:

curl -X POST -H 'content-type: application/json' -d '{"query": "mutation add{ addChannel(details: {category: \"<category>\", checkInterval: <interval>, name: \"<title>\", url: \"<url>\"}){name} } "}' localhost:8543/data | jq '.'

Where:

• <category> is the currently selected category (defaulting to "FOR BOTH")
• <interval> is the check interval in days (defaulting to 14)
• <title> is the page title with trailing " - YouTube" removed
• <url> is the URL of the currently active tab

Categories: "FOR BOTH", "CHANNELS", "CREATIVE"

Implementation Details

1. Manifest Changes

• Added clipboardWrite permission for copy functionality

2. HTML Structure

• Added new save channel header with back button
• Added save channel container with:
  • Curl command textarea (readonly)
  • Copy button with active state styling
  • Interval number input (defaulting to 14 days)
  • Category selection buttons
  • Notice for non-YouTube videos pages
• Added "Save Channel" button to the export container

3. JavaScript Functionality

• Extended currentView to include "saveChannel" state

• Added properties:

  • isCurrentTabChannelPage: Detects YouTube /videos pages (renamed from isCurrentTabYoutubeVideos)
  • selectedCategory: Tracks selected category (default "FOR BOTH")
  • availableCategories: Array of category options
  • curlCommand: Generated curl command string
  • checkInterval: Check interval in days (default 14)

• Added methods:

  • updateCurlCommand(): Generates curl command based on current tab, category, and interval
  • copyCurlCommand(): Copies command to clipboard with fallback
  • selectCategory(category): Updates selected category and regenerates command
  • updateCheckInterval(interval): Updates check interval with validation and regenerates command
  • showSaveChannel(): Switches to save channel view

• Added event bindings (CSP-compliant):

  • saveChannelButton: Click handler for main save channel button
  • saveChannelContainer: View visibility binding
  • saveChannelHeader: Header visibility binding
  • copyCurlButton: Copy button click handler with disabled state for non-channel pages
  • categoryButton: Category selection with active state styling
  • intervalInput: Two-way binding for interval number input
  • saveChannelNotice: Notice visibility for non-YouTube videos pages

4. CSS Styling

• Save channel container with proper spacing and shadow
• Monospace textarea for curl command display
• Copy button with hover, active, and disabled states
• Interval input section with label and validation styling
• Category buttons with hover and active states
• Notice styling for YouTube videos page requirement
• Orange-themed save channel button

5. YouTube Videos Page Detection

The feature only activates when the current tab URL contains /videos, which typically corresponds to YouTube channel video listing pages (e.g., https://www.youtube.com/@channel/videos).

6. Copy Functionality

Implements both modern clipboard API and fallback for older browsers using document.execCommand. The copy button is disabled when not on a valid YouTube channel page.

7. Interval Input

• Number input with minimum value of 1 day
• Default value of 14 days
• Real-time updates to curl command as user types
• Input validation with fallback to default value for invalid inputs

Files Modified

• manifest.json: Added clipboardWrite permission
• popup/popup.html: Added save channel view, button, and interval input
• popup/popup.js: Added save channel functionality, interval handling, and bindings
• popup/popup.css: Added styling for save channel components and interval input

Usage

1. Navigate to a YouTube channel's videos page (URL contains /videos)
2. Click "Save Channel" button in the extension popup
3. Optionally adjust the check interval (defaults to 14 days)
4. Select desired category from the buttons
5. Click "Copy" to copy the generated curl command to clipboard
6. Use the curl command to add the channel to your external system

The feature gracefully handles non-YouTube pages by showing an informational notice and disabling the copy button.

Future Enhancement Consideration: Editable Textarea

Current State

The textarea field is currently readonly and auto-generated based on user selections (category and interval).

Potential Enhancement

Making the textarea user-editable would provide additional flexibility. Implementation considerations:

Required Changes:

1. HTML: Remove readonly attribute from textarea
2. JavaScript: Switch from x-text to x-model for two-way binding
3. Update Logic: Handle conflicts between manual edits and automatic updates

Implementation Options:

1. Template-based: Store template and regenerate only dynamic parts
2. Parsing approach: Parse existing command to update specific fields
3. Hybrid: Allow manual edits with "Reset to Template" button

UX Considerations:

• Conflict resolution: Behavior when user edits manually, then changes category/interval
• Validation: Validate edited commands for JSON/GraphQL correctness
• Visual indicators: Show when command is manually modified vs auto-generated
• Reset functionality: Button to return to auto-generated version

This enhancement would balance user flexibility with automatic generation convenience, but requires careful consideration of the user experience and conflict resolution strategies.