Last active
May 17, 2026 00:58
-
-
Save ubershmekel/9ae7d845404cf8343e91ea0cd20f92fb to your computer and use it in GitHub Desktop.
Paste the following into a bookmark. When you're on a youtube channel's video page, you can now sort that page by view count. This new version works with the 2022 UI refresh that added rows to the mix.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| javascript:(function() { | |
| const VIEW_MODIFIERS = { | |
| 'K': 1e3, | |
| 'M': 1e6, | |
| 'B': 1e9 | |
| }; | |
| function metricVal(node) { | |
| const spans = Array.from(node.querySelectorAll('span')); | |
| const viewSpan = spans.find( | |
| s => s.textContent.toLowerCase().includes('views') | |
| ); | |
| if (!viewSpan) return 0; | |
| const match = viewSpan.textContent.match(/([\d.]+)([KMB])?/i); | |
| if (!match) return 0; | |
| let num = parseFloat(match[1]); | |
| const mod = match[2] | |
| ? match[2].toUpperCase() | |
| : null; | |
| if (mod && VIEW_MODIFIERS[mod]) { | |
| num *= VIEW_MODIFIERS[mod]; | |
| } | |
| return num; | |
| } | |
| const originalContainer = document.querySelector( | |
| '#contents.ytd-rich-grid-renderer' | |
| ); | |
| if (!originalContainer) { | |
| console.error('Container not found'); | |
| return; | |
| } | |
| /* 1. Create a "clean" clone of the container | |
| to stop YouTube's scripts from interfering */ | |
| const newContainer = originalContainer.cloneNode(false); | |
| /* Give it a new ID so YouTube | |
| doesn't recognize it */ | |
| newContainer.id = 'sorted-contents'; | |
| /* 2. Get all video items and sort them */ | |
| const items = Array.from( | |
| originalContainer.querySelectorAll( | |
| 'ytd-rich-item-renderer' | |
| ) | |
| ); | |
| items.sort((a, b) => metricVal(b) - metricVal(a)); | |
| /* 3. Move items into the new "clean" container */ | |
| items.forEach(item => { | |
| /* Use original items to keep their | |
| thumbnails and internal state */ | |
| newContainer.appendChild(item); | |
| }); | |
| /* 4. Hide the original and insert the new one */ | |
| originalContainer.style.display = 'none'; | |
| originalContainer.parentNode.insertBefore( | |
| newContainer, | |
| originalContainer | |
| ); | |
| /* 5. Cleanup: | |
| Make sure the new container still looks like a grid */ | |
| newContainer.style.display = 'flex'; | |
| newContainer.style.flexWrap = 'wrap'; | |
| console.log( | |
| 'Deep sorted ' + | |
| items.length + | |
| ' videos into a protected container.' | |
| ); | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment