Add duration sorting options to YouTube playlists.
< Feedback on YouTube Playlist Duration Sort
Go into a playlist that you are able to sort (like "Watch Later") and click the "Sort" menu at the top. You should have two new options in that list.
See attached screenshot.
If it's not working can you tell me which browser, script engine and what you do/don't see?
Firefox 81.0.1 (64-bit) for macOS. The script is v0.2. TamperMonkey 4.11.6117. Not sure about the JS engine. Those items do not appear for regular playlists or Watch Later. I'm going to try Safari and Chrome and I'll report back.
Chrome for macOS Version 85.0.4183.121 (Official Build) (64-bit). TamperMonkey v4.10. Script version 0.3. Same deal, no duration sort in the list.
Safari Version 13.1.2 (15609.3.5.1.3). TamperMonkey 4.11.6117. Script v0.3. Same deal, no duration sort. It seems like the script isn't even enabled on youtube for some reason. Including screenshot.
Thank you so much for those details Jason!
I'm on Windows and developed this script for personal use under Tampermonkey on Chrome.
It was working under Firefox on Violentmonkey and Tampermonkey (I think) until yesterday morning's update... At which time both stopped working.
It looks like your preference if Tampermonkey on Firefox so I will prioritize fixing it on that platform before looking at the others.
Thanks again for your feedback and the details above - I hope to have it fixed in the near future.
Awesome. Thank you!
OK I've spent quite a lot of time on this and it looks like Firefox won't let me simulate drag-n-drop in Youtube - which is how I have been sorting the lists. It may also be that the drag-n-drop works differently in Chrome on Mac.
I've debugged the events behind the scenes in an attempt to emulate the messages Youtube uses and have been able to reconstruct the messages in question. Unfortunately there's one component that's used in the page that I can't reliably access (it's called SAPISIDHASH). I can generate this but Youtube is very picky about that variable and if I can't use the one the browser page is currently using it simply won't work.
Using the Youtube API from within the page won't work because OAUTH and keys are required to access that part of the API.
So my only recourse is to build a full-blown web app and then have my userscript interact with it. I've made a start but it's going to take a little while to get there.
I will post a patched version during the week, but I expect this will only put the menu items in the menu but that they won't actually do anything in your case.
Thanks for your patience and help so far. I will get us there (and it'll be a better result for it), but it's going to take a bitmore time.
So I just learnt that the YouTube API prevents access to both Watch Later and Watch History. This means an API solution also will not work.
At this point the options seem very limited indeed. Unless I can find a reliable way of getting SAPISIDHASH mentioned above I'll probably have to abandon a generic solution and write a Chrome plugin.
After a lot of hours researching, debugging and testing I've implemented a new reorder method that synthesizes the internal YouTube commands.
Tested successfully on...
Windows
I hope it works for you. If you could let me know how you go I'd greatly appreciate it.
Thank you! Unfortunately, for me, it's not even showing up in the sort drop down. I tried just now on macOS Firefox 81.0.1 (64-bit). Script v0.5. I tried a regular playlist as well as the WatchLater playlist.
I've been doing a little more work on this script, however this hasn't been in the area of the actual menu item appearing. I just can't find any good reason why the menu items aren't appearing for you.
My suspicion is that maybe YouTube actually structures some parts of page differently on Mac. If I was to send you some diagnostic javascript commands to execute in the developer console would you be comfortable doing that? I'd be happy to send them publicly on here or privately in direct-messages - whichever suits you best.
I have no problem running some JS in the developer console. I'm not sure there's any reason not to post the commands or the results here, right? Anyone else who's following along at home might like to see our research (just like in a Github pull request).
Ah good. For purposes of transparency I would definitely prefer to post the commands publicly. If for some reason the output could contain personal information I might ask you to send the result to me privately in order to protect your privacy.
To start with it would be great if you could send me the results of executing these two...
console.log(document.querySelector("#sort-filter-menu"));
console.log(document.querySelector("#sort-filter-menu").querySelector("#menu"));
Sorry for the late reply.
<div id="sort-filter-menu" class="style-scope ytd-playlist-video-list-renderer"><yt-sort-filter-sub-menu-renderer class="style-scope ytd-playlist-video-list-renderer"><!--css-build:shady--><paper-tooltip class="style-scope yt-sort-filter-sub-menu-renderer" role="tooltip" tabindex="-1"><!--css-build:shady-->
<div id="tooltip" class="hidden style-scope paper-tooltip">
</div>
</paper-tooltip>
<yt-dropdown-menu class="style-scope yt-sort-filter-sub-menu-renderer has-items"><!--css-build:shady--><paper-menu-button dynamic-align="" class="style-scope yt-dropdown-menu" role="group" aria-haspopup="true" horizontal-align="left" vertical-align="top" aria-disabled="false"><!--css-build:shady-->
<div id="trigger" class="style-scope paper-menu-button">
<paper-button id="label" class="dropdown-trigger style-scope yt-dropdown-menu" slot="dropdown-trigger" aria-expanded="false" role="button" tabindex="0" animated="" elevation="0" aria-disabled="false" aria-label="Ordering"><!--css-build:shady-->
<yt-icon id="label-icon" class="style-scope yt-dropdown-menu"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;" class="style-scope yt-icon"><g class="style-scope yt-icon"><path d="M3 18h6v-2H3v2zM3 6v2h18V6H3zm0 7h12v-2H3v2z" class="style-scope yt-icon"></path><path d="M0 0h24v24H0z" fill="none" class="style-scope yt-icon"></path></g></svg><!--css-build:shady--></yt-icon>
<div id="icon-label" class="style-scope yt-dropdown-menu">Sort</div>
<dom-if class="style-scope yt-dropdown-menu"><template is="dom-if"></template></dom-if>
<dom-if class="style-scope yt-dropdown-menu"><template is="dom-if"></template></dom-if>
</paper-button>
</div>
<iron-dropdown id="dropdown" class="style-scope paper-menu-button" horizontal-align="left" vertical-align="top" aria-disabled="false" aria-hidden="true" style="outline: currentcolor none medium; display: none;"><!--css-build:shady-->
<div id="contentWrapper" class="style-scope iron-dropdown">
<div slot="dropdown-content" class="dropdown-content style-scope paper-menu-button">
<paper-listbox id="menu" class="dropdown-content style-scope yt-dropdown-menu" slot="dropdown-content" role="listbox" tabindex="0"><!--css-build:shady-->
<a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
<paper-item class="style-scope yt-dropdown-menu" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady-->
<paper-item-body class="style-scope yt-dropdown-menu"><!--css-build:shady-->
<div class="item style-scope yt-dropdown-menu">Date added (newest)</div>
<div secondary="" id="subtitle" class="style-scope yt-dropdown-menu" hidden="">
</div>
</paper-item-body>
<yt-reload-continuation class="style-scope yt-dropdown-menu">
</yt-reload-continuation>
</paper-item>
</a>
<a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
<paper-item class="style-scope yt-dropdown-menu" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady-->
<paper-item-body class="style-scope yt-dropdown-menu"><!--css-build:shady-->
<div class="item style-scope yt-dropdown-menu">Date added (oldest)</div>
<div secondary="" id="subtitle" class="style-scope yt-dropdown-menu" hidden="">
</div>
</paper-item-body>
<yt-reload-continuation class="style-scope yt-dropdown-menu">
</yt-reload-continuation>
</paper-item>
</a>
<a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
<paper-item class="style-scope yt-dropdown-menu" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady-->
<paper-item-body class="style-scope yt-dropdown-menu"><!--css-build:shady-->
<div class="item style-scope yt-dropdown-menu">Most popular</div>
<div secondary="" id="subtitle" class="style-scope yt-dropdown-menu" hidden="">
</div>
</paper-item-body>
<yt-reload-continuation class="style-scope yt-dropdown-menu">
</yt-reload-continuation>
</paper-item>
</a>
<a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
<paper-item class="style-scope yt-dropdown-menu" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady-->
<paper-item-body class="style-scope yt-dropdown-menu"><!--css-build:shady-->
<div class="item style-scope yt-dropdown-menu">Date published (newest)</div>
<div secondary="" id="subtitle" class="style-scope yt-dropdown-menu" hidden="">
</div>
</paper-item-body>
<yt-reload-continuation class="style-scope yt-dropdown-menu">
</yt-reload-continuation>
</paper-item>
</a>
<a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
<paper-item class="style-scope yt-dropdown-menu" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady-->
<paper-item-body class="style-scope yt-dropdown-menu"><!--css-build:shady-->
<div class="item style-scope yt-dropdown-menu">Date published (oldest)</div>
<div secondary="" id="subtitle" class="style-scope yt-dropdown-menu" hidden="">
</div>
</paper-item-body>
<yt-reload-continuation class="style-scope yt-dropdown-menu">
</yt-reload-continuation>
</paper-item>
</a>
<dom-repeat id="repeat" class="style-scope yt-dropdown-menu"><template is="dom-repeat"></template></dom-repeat>
</paper-listbox>
</div>
</div>
</iron-dropdown>
</paper-menu-button>
</yt-dropdown-menu>
</yt-sort-filter-sub-menu-renderer></div>
paper-listbox#menu.dropdown-content.style-scope.yt-dropdown-menu
"$": Object { }
__CE_shadowRoot: DocumentFragment []
__autoDirOptOut: false
__boundListeners: WeakMap { paper-listbox#menu.dropdown-content.style-scope.yt-dropdown-menu → {…} }
__data: Object { activateEvent: "tap", multi: false, disabled: false, … }
__dataClientsInitialized: false
__dataClientsReady: true
__dataCompoundStorage: null
__dataCounter: 0
__dataEnabled: true
__dataHasPaths: false
__dataHost: <yt-dropdown-menu class="style-scope yt-sort-filt…menu-renderer has-items">
__dataInstanceProps: null
__dataInvalid: false
__dataLinkedPaths: null
__dataOld: null
__dataPending: null
__dataPendingClients: null
__dataReady: true
__dataTemp: Object { }
__dataToNotify: null
__domApi: Object { node: paper-listbox#menu.dropdown-content.style-scope.yt-dropdown-menu }
__isPropertyEffectsClient: true
__polymerGestures: Object { mousedown: {…}, click: {…}, touchstart: {…}, … }
__serializing: false
__shady: Object { parentNode: paper-menu-button.style-scope.yt-dropdown-menu, nextSibling: #text, previousSibling: #text, … }
__shady_native_childElementCount: 6
__shady_native_childNodes: NodeList(21) [ <!-- css-build:shady -->, #text, #text, … ]
__shady_native_children: HTMLCollection { 0: a.yt-simple-endpoint.style-scope.yt-dropdown-menu, 1: a.yt-simple-endpoint.style-scope.yt-dropdown-menu, length: 6, … }
__shady_native_className: "dropdown-content style-scope yt-dropdown-menu"
__shady_native_firstChild: <!-- css-build:shady -->
__shady_native_firstElementChild: <a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
__shady_native_innerHTML: "<!--css-build:shady-->\n \n\n \n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Most popular</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n <dom-repeat id=\"repeat\" class=\"style-scope yt-dropdown-menu\"><template is=\"dom-repeat\"></template></dom-repeat>\n \n"
__shady_native_lastChild: #text "
"
__shady_native_lastElementChild: <dom-repeat id="repeat" class="style-scope yt-dropdown-menu">
__shady_native_nextElementSibling: null
__shady_native_nextSibling: #text "
"
__shady_native_parentElement: <div class="dropdown-content style-scope paper-menu-button" slot="dropdown-content">
__shady_native_parentNode: <div class="dropdown-content style-scope paper-menu-button" slot="dropdown-content">
__shady_native_previousElementSibling: null
__shady_native_previousSibling: #text "
"
__shady_native_textContent: "\n \n\n \n \n \n \n \n \n \n \n\n \n Date added (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date added (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Most popular\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n"
__templateInfo: Object { wasPreBound: true, nodeList: [] }
_bindFilterItem: function _filterItem()
_excludedLocalNames: Object { template: 1, "dom-bind": 1, "dom-if": 1, … }
_imperativeKeyBindings: Object { }
_observer: Object { _shadyChildrenObserver: {…}, _connected: true, _scheduled: false, … }
_selection: Object { multi: false, selection: [], selectCallback: _applySelection() }
accessKey: ""
accessKeyLabel: ""
assignedSlot: null
attributes: NamedNodeMap(5) [ id="menu", class="dropdown-content style-scope yt-dropdown-menu", slot="dropdown-content", … ]
baseURI: "https://www.youtube.com/playlist?list=WL"
childElementCount: 6
childNodes: NodeList(21) [ <!-- css-build:shady -->, #text, #text, … ]
children: HTMLCollection { 0: a.yt-simple-endpoint.style-scope.yt-dropdown-menu, 1: a.yt-simple-endpoint.style-scope.yt-dropdown-menu, length: 6, … }
classList: DOMTokenList(3) [ "dropdown-content", "style-scope", "yt-dropdown-menu" ]
className: "dropdown-content style-scope yt-dropdown-menu"
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
contentEditable: "inherit"
contextMenu: null
dataset: DOMStringMap(0)
dir: ""
draggable: false
firstChild: <!-- css-build:shady -->
firstElementChild: <a class="yt-simple-endpoint style-scope yt-dropdown-menu" tabindex="-1" aria-selected="false">
hidden: false
id: "menu"
importPath: undefined
innerHTML: "<!--css-build:shady-->\n \n\n \n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Most popular</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n <dom-repeat id=\"repeat\" class=\"style-scope yt-dropdown-menu\"><template is=\"dom-repeat\"></template></dom-repeat>\n \n"
innerText: "\n \n\n \n \n \n \n \n \n \n \n\n \n Date added (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date added (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Most popular\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n"
isAttached: true
isConnected: true
isContentEditable: false
lang: ""
lastChild: #text "
"
lastElementChild: <dom-repeat id="repeat" class="style-scope yt-dropdown-menu">
localName: "paper-listbox"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: #text "
"
nodeName: "PAPER-LISTBOX"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onanimationcancel: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragexit: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadend: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmozfullscreenchange: null
onmozfullscreenerror: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkittransitionend: null
onwheel: null
outerHTML: "<paper-listbox id=\"menu\" class=\"dropdown-content style-scope yt-dropdown-menu\" slot=\"dropdown-content\" role=\"listbox\" tabindex=\"0\"><!--css-build:shady-->\n \n\n \n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date added (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Most popular</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (newest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n \n <a class=\"yt-simple-endpoint style-scope yt-dropdown-menu\" tabindex=\"-1\" aria-selected=\"false\">\n <paper-item class=\"style-scope yt-dropdown-menu\" role=\"option\" tabindex=\"0\" aria-disabled=\"false\"><!--css-build:shady-->\n \n \n <paper-item-body class=\"style-scope yt-dropdown-menu\"><!--css-build:shady-->\n \n\n \n <div class=\"item style-scope yt-dropdown-menu\">Date published (oldest)</div>\n <div secondary=\"\" id=\"subtitle\" class=\"style-scope yt-dropdown-menu\" hidden=\"\">\n \n </div>\n \n</paper-item-body>\n <yt-reload-continuation class=\"style-scope yt-dropdown-menu\">\n </yt-reload-continuation>\n \n</paper-item>\n </a>\n <dom-repeat id=\"repeat\" class=\"style-scope yt-dropdown-menu\"><template is=\"dom-repeat\"></template></dom-repeat>\n \n</paper-listbox>"
ownerDocument: HTMLDocument https://www.youtube.com/playlist?list=WL
parentElement: <div class="dropdown-content style-scope paper-menu-button" slot="dropdown-content">
parentNode: <div class="dropdown-content style-scope paper-menu-button" slot="dropdown-content">
part: DOMTokenList []
prefix: null
previousElementSibling: null
previousSibling: #text "
"
root: DocumentFragment []
rootPath: "https://www.youtube.com/"
scrollHeight: 0
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 0
selectedAttribute: null
selectedClass: "iron-selected"
shadowRoot: null
slot: "dropdown-content"
spellcheck: false
stopKeyboardEventPropagation: false
style: CSS2Properties(0)
tabIndex: 0
tagName: "PAPER-LISTBOX"
textContent: "\n \n\n \n \n \n \n \n \n \n \n\n \n Date added (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date added (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Most popular\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (newest)\n \n \n \n \n\n \n \n \n\n \n \n \n \n \n \n \n \n\n \n Date published (oldest)\n \n \n \n \n\n \n \n \n\n \n \n \n"
title: ""
<prototype>: Object { constructor: e(), created: created(), _registered: _registered(), … }
debugger eval code:1:9
Thanks for the that. I was a bit mystified by the result but I now have some understanding of what's going wrong.
I've marked the script private until I get a chance to work on the issues involved - which hopefully should be just after xmas.
I'll reply again on this thread once I have made an update.
How does this work? Can you post a screenshot? It doesn't seem to be working for me unless I'm just not getting it.