Userscript to update Youtube's Save to Playlist with a hotkey, sorting and filtering of available playlists.

README.md

YouTube “Save to Playlist” Enhancer

This userscript adds a convenient hotkey p to YouTube, which opens the Save to Playlist dialog on the currently playing video. It also sorts and filters your playlists in a more useful way. Just the way it should have been fron the start.

Features

1. Hotkey: p

• Press p (without Ctrl, Alt, or Meta) on any YouTube watch page to open the Save to Playlist dialog.

2. Sorting

• Any playlists that the current video is already in will be shown at the top.
• All other playlists are displayed in alphabetical order (0-9,A–Z).

3. Filter Input

• Just below the “Save video to…” text, the script adds an input box (in focus automatically).
• If empty: all playlists are shown (with already-added ones on top).
• If any text is typed: only those playlists whose name contains the typed letters are displayed.

4. ESC Key

• Pressing Escape closes (exits) the Save to Playlist dialog.

How It Works

1. Auto-Injection

• When the “Save to Playlist” dialog appears, the script automatically inserts a small input field right below the text “Save video to…”.

2. Immediate Focus

• The script focuses that new input field so you can start typing to filter playlists immediately.

3. Filtering

• As soon as you type text into the input, the list updates in real-time, showing only matching playlist titles.

4. Sorting Only Once

• Each time the dialog is opened, the script sorts the list. It does not attempt to re-sort if you check/uncheck a playlist; however, closing and reopening the dialog will re-sort.

Installation

• Install a userscript manager such as Install Tampermonkey (https://www.tampermonkey.net) or Violentmonkey.
• Create a new script and copy/paste the code from this repository - or follow this link to install.
• Go to YouTube and verify you see the userscript log messages in the console (optional).
• Press p while watching any video to open the “Save to Playlist” dialog!

Version history

1.0 Initial version. 
1.1 Added license, shortened description.4
1.2 Modified to avoid accidentally opening when typing in a text field. Thanks @karimawi

YoutubeSaveToPlaylistHotkeyAndFilter.user.js

// ==UserScript==
// @name         Youtube Save To Playlist Hotkey And Filter
// @namespace    https://gist.github.com/f-steff
// @version      1.2
// @description  Adds a P hotkey to Youtube, to bring up the Save to Playlist dialog. Playlists will be displayed alfabetically sorted, any any playlist the current video belongs to, will be shown at the top. Also adds a focuced filter input field. If nothing is written into the filter input, all playlists will be shown, alternatively only the playlists where the name containes the sequence of letters typed in the input field, will be displayed. Press escape to exit the dialog.
// @author       Flemming Steffensen
// @license MIT
// @match        http://www.youtube.com/*
// @match        https://www.youtube.com/*
// @include      http://www.youtube.com/*
// @include      https://www.youtube.com/*
// @grant        none
// @homepageURL  https://gist.github.com/f-steff/4d765eef037e9b751c58d43490ebad62
// @updateURL    https://gist.githubusercontent.com/f-steff/4d765eef037e9b751c58d43490ebad62/raw/YoutubeSaveToPlaylistHotkeyAndFilter.user.js
// @downloadURL  https://gist.githubusercontent.com/f-steff/4d765eef037e9b751c58d43490ebad62/raw/YoutubeSaveToPlaylistHotkeyAndFilter.user.js
// @run-at       document-start
// ==/UserScript==

(function (d) {

  /**
   * Pressing 'p' simulates a click on YouTube's "Save" button to open the dialog.
   */
  function openSaveToPlaylistDialog() {
    // Commonly, there's a button with aria-label="Save" or aria-label^="Save"
    // near the Like/Dislike/Share row on the watch page.
    const saveButton = d.querySelector('button[aria-label^="Save"]');
    if (saveButton) {
      saveButton.click();
    } else {
      console.log("Could not find 'Save' button. Adjust the selector if needed.");
    }
  }
  
 // Listen for the 'p' key at the document level
d.addEventListener('keydown', evt => {
  // Avoid capturing if user holds Ctrl/Alt/Meta, or if in a text field, etc.
  if (
      evt.key === 'p' &&
      !evt.ctrlKey &&
      !evt.altKey &&
      !evt.metaKey &&
      evt.target.tagName !== 'INPUT' &&
      evt.target.tagName !== 'TEXTAREA' && evt.target.contentEditable !== "true"
  ) {
      // Prevent YouTube from interpreting 'p' in any other way
      evt.preventDefault();
      evt.stopPropagation();

      // Attempt to open the "Save to playlist" dialog
      openSaveToPlaylistDialog();
  }
}, true);

  /**
   * Sort playlists such that:
   *   - checked items (aria-checked="true") come first,
   *   - then everything else in alphabetical (0-9,A→Z).
   */
  function sortPlaylist(playlist) {
    let options = query(playlist, 'ytd-playlist-add-to-option-renderer');
    let optionsMap = new Map();

    // Collect items by playlist title
    options.forEach(op => {
      let formattedString = query(op, 'yt-formatted-string')[0];
      let title = formattedString?.getAttribute('title') || '';
      if (!optionsMap.has(title)) {
        optionsMap.set(title, []);
      }
      optionsMap.get(title).push(op);
    });

    // Sort so "checked" groups come first, then A→Z
    let sortedEntries = [...optionsMap.entries()].sort(([titleA, groupA], [titleB, groupB]) => {
      const checkedA = groupA.some(
        op => query(op, 'tp-yt-paper-checkbox[aria-checked="true"]').length
      );
      const checkedB = groupB.some(
        op => query(op, 'tp-yt-paper-checkbox[aria-checked="true"]').length
      );

      if (checkedA && !checkedB) return -1;
      if (checkedB && !checkedA) return 1;

      // Otherwise alphabetical
      const upA = titleA.toUpperCase();
      const upB = titleB.toUpperCase();
      if (upA < upB) return -1;
      if (upA > upB) return 1;
      return 0;
    });

    // Re-insert items in sorted order
    for (const [, group] of sortedEntries) {
      for (const opNode of group) {
        playlist.appendChild(opNode);
      }
    }
  }

  /**
   * Filter all playlist entries based on user-typed substring.
   * If the filter is blank, show everything; otherwise hide non-matches.
   */
  function filterPlaylist(playlist, filterText) {
    let options = query(playlist, 'ytd-playlist-add-to-option-renderer');
    const text = filterText.trim().toLowerCase();

    options.forEach(op => {
      let formattedString = query(op, 'yt-formatted-string')[0];
      let title = (formattedString?.getAttribute('title') || '').toLowerCase();
      op.style.display = (text && !title.includes(text)) ? 'none' : 'block';
    });
  }

  /**
   * When the dialog closes, re-attach the observer so we see the next open event.
   */
  function observePaperDialogClose(paperDialog, onCloseDialog) {
    let ob = new MutationObserver((mutations, me) => {
      mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'aria-hidden') {
          me.disconnect();
          onCloseDialog();
        }
      });
    });
    ob.observe(paperDialog, { attributes: true });
  }

  /**
   * Main logic: watch for the "Add to Playlist" dialog, then
   * Insert input, sort once, filter, focus the input, etc.
   * Added a small setTimeout to avoid first-time invocation timing issues.
   */
  function handlePopupContainer(popupContainer) {
    let currentFilter = '';
    const popupObserverConfig = { subtree: true, childList: true };

    const popupContainerObserver = new MutationObserver(function (mut, me) {
      // Defer so the DOM has time to settle on first invocation
      setTimeout(() => {
        const paperDialog = query(popupContainer, 'tp-yt-paper-dialog')[0];
        if (paperDialog) {
          // Sort/insert only once per open
          me.disconnect();

          // Re-attach after closing
          observePaperDialogClose(paperDialog, function () {
            popupContainerObserver.observe(popupContainer, popupObserverConfig);
          });

          // Look for "Save video to..."
          const headingSpan = query(
            paperDialog,
            'span.yt-core-attributed-string[role="text"]'
          ).find(el => el.textContent.trim() === 'Save video to...');

          // Grab #playlists container
          const playlistContainer = query(paperDialog, '#playlists')[0];

          if (headingSpan && playlistContainer) {
            // If we haven't inserted our input yet, do it now
            const existingFilterInput = d.getElementById('filterText');
            if (!existingFilterInput) {
              // Create <input> and <br>
              const filterInput = d.createElement('input');
              filterInput.id = 'filterText';
              filterInput.type = 'text';
              filterInput.placeholder = 'Filter';

              const br = d.createElement('br');

              headingSpan.parentNode.appendChild(filterInput);
              headingSpan.parentNode.appendChild(br);

              // On typing => filter
              filterInput.addEventListener('input', evt => {
                currentFilter = evt.target.value;
                filterPlaylist(playlistContainer, currentFilter);
              });
            }

            // Sort once for this session
            sortPlaylist(playlistContainer);

            // Re-apply current filter (if any)
            filterPlaylist(playlistContainer, currentFilter);

            // Focus
            const input = d.getElementById('filterText');
            if (input) {
              input.focus();
            }
          }
        }
      }, 10); // 10ms delay
    });

    // Start observing
    popupContainerObserver.observe(popupContainer, popupObserverConfig);
  }

  /**
   * A top-level observer that waits for <ytd-popup-container> to show up,
   * then calls handlePopupContainer() exactly once.
   */
  const documentObserver = new MutationObserver(function (mutations, me) {
    const popupContainer = query(d, 'ytd-popup-container')[0];
    if (popupContainer) {
      console.log("Found ytd-popup-container");
      handlePopupContainer(popupContainer);
      me.disconnect(); // stop once found
    }
  });
  documentObserver.observe(d, { childList: true, subtree: true });

  /**
   * Helper: safely do querySelectorAll, returns an Array
   */
  function query(startNode, selector) {
    try {
      return Array.prototype.slice.call(startNode.querySelectorAll(selector));
    } catch (e) {
      return [];
    }
  }

})(document);

@karimawi.

Modified to avoid accidentally opening when typing in a text field

Seems like I didn't test it properly before release to the world. Sorry!
Thank you for the fix - i've integrated it 1:1 now.

No worries, Steff thank you <3

Thanks @f-steff. Very useful script. Would you consider to add an option to disable the alphabetical order ? By default, youtube lists by recent order and I like it because the most recent and frequently used lists are at the top. It could be a checkbox named alphabetical sorting next to the input that would use GM_setValue and GM_getValue to store user choice.