Make comments and lists into tabs for YouTube Videos
As of
Floating Side Panel for 'extra-wide' and normal video
scroll / querySelector] (v3.9.0)tyt-xxx (v3.9.0)@media all and (display-mode: fullscreen) to make specific rules for fullscreen (v3.9.0)Floating Side Panel for 'extra-wide' video
Reduce DOM Manipulation Checking by using YouTube Event Driven Mechanism
Darker Dark Theme (Cinematics) [2022.10 Official] Support
#cinematics (2022.10.07)Miniview Support & 'Teaser UI' [2022.02~2022.07 Experimental] Support
#below in 2.7.0 Suggested Minium browser versions (IntersectionObserver, customElements, Element.prepend()):
For Firefox, we recommend to set layout.css.has-selector.enabled to true for the css selector :has being used.
First Version
-webkit-line-clamp bug) Suggested Minium browser versions (ES6 Class):
Initial Version
MIT license; https://github.com/cyfung1031/Tabview-Youtube
Compatible Userscript Manager List:
Compatible Browser List:
Please install this userscript with Tampermonkey (Edge/Firefox/Chrome/Waterfox) or Tampermonkey Version 4.8.5847 (Waterfox Classic).
Using latest modern browser (Edge/Firefox/Chrome) is encouraged but backward compatible is also available for some browsers like Waterfox Classic.
FireMonkey is not recommended due to limitation of feature.
At this moment, I have no plan to publish this in Chrome Web Store as I do not have such a time to deal with Chrome Web Store's requirement.
Please do NOT publish this in Chrome Web Store on behalf of yourself.
The source code and design were originally inspired by SuperYouTube (Extension for Youtube™), but I have done many coding improvement and design changes for better and faster experience (for example, dark / light theme adaptation). This UserScript has NO relationship with SuperYouTube.
The reason I created this UserScript is, I do not like there are so many settings in SuperYouTube and waste my RAM for just watching youtube as a separate extension, and also I feel buggy and slow for SuperYouTube.
As for performance boost, I imposed many CSS hacks for this UserScript to maximize the user experience (contain and content-visibility). Some might make other UserScripts or plugins broken. So please let me know and I will try to fix the bugs.
Sample Youtube Links - Standard Test Case (2000+ Comments + Live Chat Playback):Sample Youtube Links - Long Comments (229,342+):Sample Youtube Links - Live Chat Playback:Sample Youtube Links - Live Chat Playback Disabled:
Sample Youtube Links - Playlist:Sample Youtube Links - Chapter:
Sample Youtube Links - DISABLED Comment Section (by Uploader Setting):Sample Youtube Links - NO COMMENT SECTION:Sample Youtube Links - Youtube's incorrect counting of comments:
Sample Youtube Links - Old Static Background Video (Sqaure or 4:3):Video Link (already fixed by Youtube)Video Link (private video)
Sample Youtube Links - New Static Background Video (Transparent 16:9):Sample Youtube Links - 21:9 VideoSample Youtube Links - Non-effected subtitles:Sample Youtube Links - Effected subtitles:Rising Hope (Unlisted/Removed)
(Be careful - opening the transcript panel without Tabview YouTube 2.1.0 might make your browser crash)
Sample Youtube Links - Two line subtitles:Sample Yotubue Links - Live Chat / Reply with Reduced Refresh Speed:Youtube Transcript only lang bugDefault Chatroom Expanded3D VideoYouTube Modern Layout 2022 (Darker Dark Theme) - #cinematics2.44 Aspect Ratio Videos ([is-extra-wide-video_]) [YouTube Experimental]
Comment with Colored BackgroundRelated Videos in Information Tab
window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_metadata_refresh is true
Some CSS rules used in Tabview Youtube change the default appearance for a better user experience.
You can de-customize (revert to YouTube default) by adding the following:
span#message {
--tabview-chat-message-display: 'invalid' !important;
--tabview-chat-message-mt: 'invalid' !important;
--tabview-chat-message-mb: 'invalid' !important;
}
yt-formatted-string.ytd-transcript-segment-renderer > span {
--tabview-transcript-segment-span-display: 'invalid' !important;
}
Example Link
Tabview Youtube Default Appearance
After invaliding the customized CSS rule
Element
ytd-comments#comments
Property
loadComments
Description
Function; trigger comments to load
Element
ytd-comments#comments ytd-expander[max-number-of-lines]
Property
recomputeOnResize
Description
Boolean; default = false; changed to true
Element
ytd-comments#comments ytd-expander[max-number-of-lines]
Property
calculateCanCollapse
Description
Function; changed to this.$.content.scrollHeight>this.collapsedHeight
{ "yt-player-video-progress": ... }. Tabview Youtube change the function implementation (g_postToContentWindow()) to reduce CPU usage and fix bugs.