Tabview Youtube

Make comments and lists into tabs for YouTube Videos

Author
CY Fung
Daily installs
17
Total installs
2,538
Ratings
37 1 1
Version
4.2.6
Created
2021-06-29
Updated
2023-01-28
Compatibility
Compatible with Firefox Compatible with Chrome Compatible with Opera Compatible with Safari Compatible with Edge
License
MIT
Applies to

English | 日本語 | 中文

MIT license; Tabview Youtube GitHub

Features provided by Tabview Youtube

  1. Info, Comments, Videos, Playlist are all put into tabs at the right side (if it is two column layout)
  2. Alive the background tabs if they are playing the video / music song (i.e. avoid killing inactive tab, see Tabs Discard)
  3. Reduce lagging issue regarding (LIVE PLAYBACK) chatroom messages (see below, and you might also install this Userscript)
  4. Fix various issues related to transcript panel (e.g. effect texts and dual captions)
  5. Features to against YouTube native coding bugs, such as the display of channel name being unreasonably trimmed in Japanese layout, side panel for extra wide video
  6. Allow users to switch to browse / search layout using miniview playing (by default, this is only available if there is playlist)
  7. Various CSS hacks to enhance rendering performance
  8. Floating the sider panel if the layout sizing is incorrect due to extra wide video
  9. Fix Chatroom messages issues (live playback - backwards)
  10. Show Livestream DateTime and duration when hovering the video title

Suggested Related Scripts / Plugins / Extensions

If you are looking for the way to watch YouTube with least CPU resources in your old machine, please use YouTube Minimal on PC and YouTube Minimal Fixs

Screenshots

Compatibility

VER. v4 (Alpha) 4.2.6 @ 28 Jan 2023

VER. v4 (Alpha) 4.1.47 @ 24 Jan 2023

VER. v4 (Alpha) 4.1.8 @ 15 Jan 2023


  • Fix YouTube Native Bug - constantly refresh participant list once it is shown before. (related to full reload with filter option) (v4.2.0)
  • Code Change for Playback Live Messages (v4.1.30, v4.1.38, v4.1.39, v4.1.47)
  • Fixed bugs due to YouTube coding changes for ChatFrame (v4.1.0, v4.1.6~v4.1.8)
  • TODO in v4.1 - coding change for live replay chat messages is required to ensure the messages are shown correctly. However I don't have time to do right now.
  • (Possibly) Fixed effected subtitle lagging issue in v4.2.5
  • Fixed issue with integrated use with Youtube Genius Lyrics in v4.2.6

VER. v4 (Beta) 4.0.10 @ 11 Jan 2023

Integration with Live Chat Popup

  • Removed CSS hack for live chat #img-shadow (issue: scroll flicking if the image size is modified by other userstyles) (v4.0.0)
  • Added CSS hack for live chat pinned banner (issue: no displayed content for collapsed banner) (v4.0.0-v4.0.1)
  • Integrate Live Chat Popup with button for quick access (v4.0.0, v4.0.8-v4.0.9)
  • Integrate Live Chat Popup with associated layout adjustment (v4.0.0, v4.0.8-v4.0.9)
  • Performance fix (v4.0.2)

VER. v3 (Beta) 3.16.15 @ 04 Jan 2023

  • Added Livestream Time Tooltips (v3.16.4 ~ v3.16.11)
  • Implementation Change for playback backwards' seeking/reloading chat messages (v3.16.3 ~ v3.16.10)

VER. v3 (Stable) 3.16.2 @ 02 Jan 2023

VER. v3 (Stable) 3.15.8 @ 30 Dec 2022

CSS Event Driven + New Feature + Bug Fix + Enhancement of Existing Features
  • JS & CSS Code Rewrite for performance enhancement and bug fix (v3.9.0)
  • Animation Event Triggering adopted [Omitted continuous checking via scroll / querySelector] (v3.9.0)
  • Optimize SVG images used in the script (v3.9.0)
  • Changed naming to tyt-xxx (v3.9.0)
  • Introduce CSS @media all and (display-mode: fullscreen) to make specific rules for fullscreen (v3.9.0) removed due to Opera not recognizing display-mode: fullscreen
  • Pre-fix for Japanese Layout Buttons - Change to English (v3.9.0)
  • Feature Update - Hover Channel Name (v3.7.6 -> v3.10.0)
  • Feature Added - Slider Panel [Originally just hover panel for extra-wide videos] (v3.7.0 ~> v3.10.0)
  • Tooltips issue fixed (v3.10.0)
  • Detection Mechanism Change for sticky header for better performance and visual experience (v3.10.4)
  • New mechanism 'renderDeferred' to solve the issues related to background video playing (v3.11.0)
  • Improvement of Background Page Chatroom to reduce energy impact and memory usage (v3.12.0)
  • New Feature - enable mini player view for non-playlist video page browse other pages (v3.12.2 ~ v3.12.6)
  • Urgent fix for Youtube layout code change @ 2022/12/06 (v3.12.6.1 ~ v3.12.8)
  • minor fix for Youtube layout code change @ 2022/12/10 (v3.13.0)
  • Removal of Cash.js (v3.13.0)
  • remove yt-navigate for time clicking (v3.13.3)
  • fix bugs for plugins - search while watching videos and youtube genius lyrics (v3.13.3)
  • fix chatroom rendering bug for Opera (v3.13.4)
  • Added Russian localization (v3.14.0)
  • Integration with YouTube Genius Lyrics(v3.14.1 ~ v3.14.3)
  • Introduce usage of `ResolveCommand`; Implementation Changed for engagement panels; (v3.15.0)

VER. v3 (Beta) 3.8.6 @ 27 Nov 2022

Floating Side Panel for 'extra-wide' video
  • Floating Side Panel for 'extra-wide' video (v3.7.0 ~ v3.7.5)
  • Code Change for postToContentWindow, transcript's getTranslate() (v3.7.x ~ v3.7.5)
  • CSS change for duplicated video description (v3.7.x ~ v3.7.5)
  • CSS feature to display the "ellipsis-ed" subscriber count (by hovering the uploader icon/text) (v3.7.6 ~ v3.8.5)
  • fix playlist not displaying bug (v3.8.6)

VER. v3 (Beta) 3.6.14 @ 21 Nov 2022

Reduce DOM Manipulation Checking by using YouTube Event Driven Mechanism
  • Code Rewrite for Core Mechanism - Performance Boost
  • Added Multi-lang support for words "Fetching", "Loading"
  • CSS Fixs for colored comment background and 2.44 Aspect Ratio Videos
  • Fixed Slow Comments Rendering Bug (v3.0.3)
  • Fixed Playlist Display Bug (v3.0.4)
  • Fixed Alpha version Bugs (v3.1.x ~ v3.6.x)
  • Added bug-fix feature for video playing (v3.6.5 ~ v3.6.6)
  • Code update for transcript translate performance (v3.6.x ~ v3.6.6)
  • Code hack for popup size and location (watch later popup when not logged in) (v3.6.9 ~ v3.6.13)

VER. v2 (Stable) 2.12.2 @ 09 Nov 2022

Darker Dark Theme (Cinematics) [2022.10 Official] Support
  • Removed the hover meta for old layout.
  • Added multi lang support for tab button. (v2.10.3; 2022.11.06)
  • Removed modern layout round angle
  • Major Code Changed in 2.11.1 for Modern Layout with #cinematics (2022.10.07)
  • Fixed bugs related to playlist (Issue 157029)

VER. v2 (Semi-Obsolete, Stable) 2.9.9 @ 18 Aug 2022

Miniview Support & 'Teaser UI' [2022.02~2022.07 Experimental] Support
  • Support Miniview - Switch between Video and Main Page
  • Rewrite the mechanism for comment count detection
  • Rewrite the coding for "show more"/"show less" for window resize & layout change
  • Delayed Update for Chatroom
  • Improved Transcript for effected subtitles
  • Fixed Experimental Teaser UI
  • New Feature - Font size adjustment for tab content (2.4.1)
  • A critical bug since 2.1.0 is found and fixed in 2.5.0
  • fixed new UI #below in 2.7.0
  • chatroom message performance improved in 2.7.2
  • newline for chatroom message in 2.7.14
  • Changed Layout Behaviour in 2.9.0
  • Changed Hiding Comment Checker in 2.9.3
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.

VER. v1 (Obsolete) 1.8.51 @ 1 May 2022 (Broken since 2022/07/12)

First Version
  • Fixed Youtube CSS Change (dated 2022.04.20) Related Issues
  • Effective Fix for Show More/Less not displaying correctly (-webkit-line-clamp bug)
  • Fixed Comments Not loaded before clicking
Suggested Minium browser versions (ES6 Class):

VER. v0 (Obsolete) 0.1 @ 30 Jun 2021

Initial Version

Remarks

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.

Remarks - Tab Discard

Chrome/Edge: about://discards
Firefox: about:unloads

This is a default feature on Chromium-based engines. This is to save resources by putting background tabs into 'sleeping'.
YouTube tabs are easily killed by the browser, including music playing and live streaming.
Tabview Youtube has implemented some specific coding to handle this issue.
However, if you open many YouTube tabs, and only one of them is playing video/music song, it makes all tabs not being slept.

Note: The issue related to "Tab is currently holding an IndexedDB lock" can be resolved by installing Unhold YouTube Resource Locks.

Remarks - What Tabview Youtube makes for chatroom messages

Live Playback Only

Live Chat is an essential feature for YouTube videos, although some might not like it.
Its content is inside iframe. There are various CSS hacks to make its rendering performance better.
The fetching of its content is changed such that it will wait for animation frames, and thus also reduce the refresh of contents if the tab is in background.
For background tabs, it will still load the chatroom messages, but it will be a much slower rate (comparatively).

There is no conflict with using YouTube CPU Tamer by AnimationFrame. YouTube CPU Tamper by AnimationFrame is changing the setTimeout / setInterval behavior to avoid the page lagging, while Tabview Youtube makes specific measures to the fetching of chatroom messages.

Besides, there are two YouTube native coding bugs for chatroom messages:
1. No chatroom messages if the chatroom is expanded while the video is not playing.
2. Time shift to the earlier time ticks will make the chatroom messages not loading.

Tabview Youtube has also implemented some measures to deal with these two issues.

Livestream Iframe

If the Livestream is alive, the message fetching mechanism is not governed by Tabview Youtube.

Livestream Iframe In Popup Mode

If the Livestream is alive in Popup Mode, the message fetching mechanism is not governed by Tabview Youtube.

Screenshots

Preview (Dark Theme - Two Columns)

Theater Mode

Live Chat - Live / Replay

Video Info


Normal Comment Mode, if available

Related Videos

Playlist, if available

Chapter & Caption, if available

Popup Live Chat (v4)





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):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:
(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 TabYouTube Music Premium Member OnlyLong Playlist Test Case


Known Issues

  1. abnormal attribute "hidden" in invisible layout - Sometimes the playlist is still hidden after clicking the playlist item.
  2. Youtube Coding Bug: No chat replay if the video is paused
  3. Webkit bug - comments lines clamped without "show more" button
  4. Show More / Show Less Button might be always visible for full content after resizing the comments section
  5. MiniView Switching Video Not Available Yet (v2.1.0 feature)
  6. Sometime the player go miniview after the page is just loaded (v2.1.0 feature)
  7. Request Default Tab Feature 94022 92458
  8. Text Size for Tab Info - will let users to adjust the text size (v2.4.1 feature)
  9. Teaser UI - when window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_metadata_refresh is true Removed due to Teaser UI abandoned by YouTube
  10. playing -> show comment -> auto play next -> css not injected to iframe? Fixed in v2.11.3 by using Iframe load event checking
  11. Tooltips overlapped by Video (#157029) - this relates to the `position: relative` which is essential for #cinematics feature) (Fixed in v3.10.0)
  12. Adjustment for time delay for layout changing shall be required to make the response immediately no need
  13. Toggle Button Text Incorrect (switching among live streams) (#157029)
  14. Playlist Display Issue (queue video in 'browse' page) (#157029)
  15. Possible Caption Out-sync Issues (#156915)
  16. No round angle for engagement panel??
  17. Possible Wrong comments count when the video is auto-played in the background. (fixed in v3.11.0)
  18. Possible Wrong desc info duplication check-info-duplicate false true false checking when the video is auto-played in the background. (fixed in v3.11.0)
  19. Fullscreen Description overflow issues (due to 2022/12/10 layout change) (fixed in v3.13.1)
  20. Engagement Panel Visibility Change not being detected after clicking the time of video in the comments (fixed in v3.13.1)
  21. Live Chat Playback is okay, but if the page url is "&t=xxxx", "continuation" value for iframe url is fixed to the certain time. First batch of chat messages will be wrong. (fixed in v3.16.7)
  22. Due to Recent YouTube Coding Change: If the watch page was navigated with mini player mode, Live Chat Playback will not occur in the correct time position when the iframe is shown. After seeking in the timeline progress, it will resume normal. (fixed in v4.1.0)
  23. Due to Recent YouTube Coding Change: collapse and re-expand the chatframe will make the chat messages shown incorrectly. (fixed in v4.1.0)
  24. Switch Page + collapse + expand rapidly will make the layouting broken. (fixed in v4.1.xx ~ v4.2.2)
  25. Switch Pages with LiveChatFrame will make the chat frame content flicking. (fixed in v4.1.xx ~ v4.2.2)
  26. TODO: Reload playback chat messages after the chat is expanded at the previous time tick (fixed in v4.1.xx ~ v4.2.2)
  27. comments loaded twice when the ads is played (fixed in v4.2.x ~ v4.2.4)
  28. CSS cause lagging in video page with complicated effected subtitles

Known Issues - YouTube Native

  1. When the page wide is slowly reducing, extra wide video [is-extra-wide-video_] (eg. 1:2.44) squeeze the side panel out of the page (#157029) - this is known as YouTube bug
  2. YouTube native bug for channel name - Japanese layout + window width = 1185px for video (screenshot)
    HfUpZfS.md.png
    This is because YouTube engineers just consider English layout. For Japanese, the buttons will be much longer and thus the layout would not work.
    This will change soon along with the darker dark theme.
  3. YouTube only enable the SPA browsing for playlist.
  4. MiniPlayer View History change is buggy.

Known & Fixed YouTube Native Chatroom Issues

  1. Possible No content after switching pages between live/playback video pages, where the chatroom is still open, the solution is trigger urlChanged once page is fetched (still buggy ??) [resolved in v4.1.47]
  2. Backward timeline seeking is wrong (After backwarded, some messages (usually wrong) will show, and then completely frozen). The solution is to use reload continuation instead of seek continuation with by pass all unused mechanisms
  3. When the chat is expanded at progress >0, the messages could be wrong. The solution is to use reload continuation instead of seek continuation with by pass all unused mechanisms
  4. the first rendering might fail and all afterwards messages will not be rendered. Solution is force seeking at the first rendering.

De-customize Tabview Youtube CSS rules

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:

Chatroom Iframe

span#message {
    --tabview-chat-message-display: 'invalid' !important;
    --tabview-chat-message-mt: 'invalid' !important;
    --tabview-chat-message-mb: 'invalid' !important;
}

Main Page

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

APIs


    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


    Element
    ytd-live-chat-frame#chat
    Property
    postToContentWindow
    Description
    argument 1 is an object. Render chat message by using { "yt-player-video-progress": ... }. Tabview Youtube change the function implementation (g_postToContentWindow()) to reduce CPU usage and fix bugs.

Compatibility

Compatible Userscript Managers

  • Tampermonkey / Tampermonkey beta
  • Violetmonkey

Compatible Web Browsers

  • Chrome / Chromium / Edge
  • Firefox / Waterfox / LibreWolf / Brave
  • Safari
  • Waterfox Classic
  • Vivaldi / Opera
  • Cent / Catsxp / Maxthon

Compatible YouTube Features

Compatible Userscript / Plugin / Extension

Also see...

Remarks: Auto-generated Music Video can be commented since Dec 2022.