2025-06-21 CodeMCP: Add Wiki/Insp Button with Wikitext Formatting

User Request

The popup menu has a button to "save channel", which opens a simple dialogue view, and copies some text to the system clipboard. Add a new button called "wiki/insp", which opens a similar dialogue view. This time, it copies some wikitext-formatted text to the clipboard, in this format:

!!! <today's date>
* [[<page title>|<page url]] (yt)
** <timestamp of video>

where:

"" is formatted as "YYYY-MM-DD"
"" has all pipes ("|") replaced with hyphens ("-")
the final line (with "") is only added by default if the video has not ended

Follow-up Requests

Make the textarea fill the full width of the view, and put the copy button below it.
Add a checkbox control between the textarea and the copy button to toggle the presence of the timestamp line.
The checked version should include the current timestamp of the video, not 0:00 (unless the video is at the beginning).
Add the appropriate styling to popup/popup.css.
Let the timestamp account for hours (as in "1:36:11" rather than "96:11"), but only if necessary (ie: the video is longer than an hour).

Implementation

Files Modified

popup/popup.js:
- Added new properties for wiki/insp functionality:
  - wikitextCommand: Generated wikitext
  - isCurrentVideoYoutube: Whether current video is YouTube
  - hasVideoEnded: Whether video has ended
  - currentVideoTimestamp: Current video timestamp (real time from video)
  - includeTimestamp: Whether to include timestamp line (default: true)
- Added showWikiInsp() method to switch to wiki/insp view with timestamp refresh
- Added updateWikitextCommand() method to generate the wikitext format
- Added copyWikitextCommand() method to copy text to clipboard
- Added toggleTimestamp() method to toggle timestamp inclusion
- Added getVideoTimestamp() method to get real video position via script execution
- Added refreshVideoTimestamp() method to manually update timestamp
- Updated getCurrentTab() to detect YouTube video pages and get initial timestamp
- Enhanced timestamp formatting: Now handles hours when video duration > 1 hour
- Added event handlers and CSP-compliant bindings:
  - wikiInspButton: Click handler for wiki/insp button
  - wikiInspHeader: Show/hide wiki/insp header
  - wikiInspContainer: Show/hide wiki/insp container
  - copyWikitextButton: Copy button with disabled state
  - timestampCheckbox: Checkbox for toggling timestamp inclusion
  - refreshTimestampButton: Button to refresh video timestamp
  - wikiInspNotice: Show notice when not on YouTube video
popup/popup.html:
- Added new header for wiki/insp view with back button
- Added wiki/insp container with:
  - Full-width readonly textarea showing generated wikitext
  - Controls section with checkbox and refresh button side by side
  - Copy button positioned below the controls
  - Notice text for non-YouTube pages
- Added "Wiki/Insp" button to the export container
popup/popup.css:
- Wiki/Insp Container: White background, rounded corners, shadow, consistent with other views
- Textarea: Full-width, monospace font, light gray background, minimum 120px height
- Timestamp Controls: Flexbox layout with space-between for checkbox on left, refresh button on right
- Checkbox: Custom styling with blue accent color, proper cursor and user-select behavior
- Refresh Button: Green background with hover effects, subtle animation on click
- Copy Button: Full-width blue button with hover animations and elevation effects
- Notice: Yellow warning background for non-YouTube pages
- Wiki/Insp Button: Purple background to distinguish from other action buttons
- Disabled States: Proper styling for disabled buttons with gray colors and no interactions

Features

Smart Timestamp Formatting:
- Short videos (< 1 hour): MM:SS format (e.g., "12:34")
- Long videos (≥ 1 hour): H:MM:SS format (e.g., "1:36:11")
- Detection: Automatically determines format based on video duration
Real Video Timestamps: Gets actual current playback position from YouTube video element
Wikitext Format: Generates properly formatted wikitext with today's date in YYYY-MM-DD format
Title Processing: Replaces pipe characters ("|") with hyphens ("-") to avoid wiki formatting conflicts
Timestamp Toggle: User can control whether to include the timestamp line via checkbox (checked by default)
Manual Refresh: Refresh button (🔄) to update timestamp without reopening the view
Video End Detection: Detects when video has ended to conditionally include timestamp
YouTube Detection: Only works on YouTube video pages (/watch)
CSP Compliance: All Alpine.js code follows CSP requirements with no JavaScript expressions in HTML attributes
Clipboard Integration: Copies generated wikitext to system clipboard with fallback support
Script Execution: Uses browser.tabs.executeScript to get real video data from YouTube page
Professional Styling: Consistent visual design with hover effects, transitions, and proper spacing

Timestamp Format Logic

const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const remainingSeconds = Math.floor(seconds % 60);

  if (hours > 0) {
    return hours + ':' + minutes.toString().padStart(2, '0') + ':' + remainingSeconds.toString().padStart(2, '0');
  } else {
    return minutes + ':' + remainingSeconds.toString().padStart(2, '0');
  }
};

Example Outputs

Short video (42 minutes):

!!! 2025-06-21
* [[Some YouTube Video Title|https://www.youtube.com/watch?v=abc123]] (yt)
** 12:34

Long video (2 hours):

!!! 2025-06-21
* [[Long YouTube Video Title|https://www.youtube.com/watch?v=def456]] (yt)
** 1:36:11

Technical Implementation

Script Execution: Injects code into YouTube page to access video element
Smart Time Formatting: Conditionally includes hours based on video duration
Real-time Data: Gets current playback position, video duration, and ended status
Error Handling: Graceful fallback to "0:00" if video data unavailable
Permissions: Uses existing activeTab, tabs, and <all_urls> permissions

Current Features

✅ Smart hour-aware timestamp formatting implemented
✅ Real video timestamp detection implemented
✅ Video ended status detection implemented
✅ Manual timestamp refresh functionality
✅ Full user control over timestamp inclusion
✅ Professional styling and visual design
✅ Consistent with existing UI patterns

Future Enhancements

Add visual feedback when text is copied to clipboard
Persist checkbox state across sessions
Add keyboard shortcuts for common actions
Show video duration alongside current timestamp

2025-06-21-codemcp-feat-add-wiki-insp-button-with-wikitext-formatting.md 6.9 KB Permalink History Raw