☰

Tabview Youtube

Make comments and lists into tabs for YouTube Videos

Aŭtoro
𝖢𝖸 𝖥𝗎𝗇𝗀
Ĉiutagaj instaloj
10
Tutaj instaloj
11 240
Ratings
90 3 1
Versio
4.73.29
Kreita
2021/06/29
Ĝisdatigita
2024/10/29
Compatibility
Compatible with Firefox Compatible with Chrome Compatible with Opera Compatible with Safari Compatible with Edge
Licenco
MIT
Aplikiĝas al

English | 日本語 | 中文

Notice: Tabview YouTube Torato is the redesigned v5 version of Tabview Youtube

Please make sure you install the script from greasyfork.org, not fake sites.

Disabled Experimental Flags
  • kevlar_watch_metadata_refresh_no_old_secondary_data = false
  • live_chat_overflow_hide_chat = false
  • web_watch_chat_hide_button_killswitch = false
  • web_watch_theater_chat = false
  • suppress_error_204_logging = true
  • kevlar_watch_grid = false



Minimum Browser Versions:


Recommended Browser Versions:


MIT license; Tabview Youtube GitHub;
UserCSS: Tabview Youtube Design Customization
UserCSS: Fix Youtube Watch Flexible Menu Items

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)
  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) [disabled if hyperchat is used] (No longer required as YouTube engineers fixed in 2023)
  10. Show Livestream DateTime and duration when hovering the video title
  11. Prevent playback shift during text selection change with keyboard
  12. Single Column with PIP (desktop, blink / webkit)
  13. Fixed various YouTube native bugs for playlist

Suggested Related Scripts / Plugins / Extensions

Full List here

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.70 (Stable) 4.70.4 @ 20 Apr 2024

VER. v4.69 (Stable) 4.69.4 @ 10 Mar 2024

  • Set `web_watch_theater_chat` to `false` for using re-openable chat
  • Fix `getTextContentArr` issue

VER. v4.68 (Stable) 4.68.1 @ 8 Mar 2024

  • Bug Fix for chatroom container related issue
  • added --fix-horizontal-card-scroller-in-tab-info

VER. v4.67 (Beta) 4.67.0 @ 27 Feb 2024

  • added `FIX_liveChatPageUrl` setting

VER. v4.66 (Stable) 4.66.11 @ 26 Feb 2024

  • Bug fixing (v4.66.11)

VER. v4.63 (Stable) 4.62.1 @ 14 Dec 2023

  • Advanced Script Injection for disabling kevlar_watch_metadata_refresh_no_old_secondary_data

VER. v4.62 (BETA) 4.62.1 @ 15 Oct 2023

  • Code Changed for better content detection mechanism
  • Adapt latest transcript button (scrollToSection)

VER. v4.40 (BETA) 4.40.16 @ 06 Oct 2023

  • Change CSS Injection to make compatible with Youtube Livestream Theater Mode
  • CSS Event Bug Fixing
  • Changed compatibility fix for "Youtube Search While Watching Video"
  • Fix Firefox's XRays issue to make compatible with Firemonkey

VER. v4.34 (Stable) 4.34.12 @ 29 Sep 2023

  • Bug Fix

VER. v4.34 (Stable) 4.34.0 @ 23 Sep 2023

  • Bug Fix & Adaption to Controller Extraction v2


Past UserScript Update History Changelog

Supports:

  • Violentmonkey 2.16.2 or later (recommended)
  • Tampermonkey (it's closed-source)
  • Blink 66+: Chrome / Edge / Brave / Cent
  • Webkit: Orion Version 0.99.126.4.1 Beta or later
  • Gecko: Firefox 57+ / Waterfox / Librefox / Waterfox Classic (backward compatible)

FireMonkey is not recommended due to limitation of feature.

Remarks

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.
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 and/or YouTube Super Fast Chat. YouTube CPU Tamer 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. YouTube Super Fast Chat focus on the content rendering.

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 Link - Combined Test @ Mar 2024

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 - EXTRA META INFO:Sample Youtube Link - NO TITLE (e.g. \u200b):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 CaseDonation YouTube VideosList of Songs (Music Songs)Chapter on InfoError UI (To be reviewed)

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
    (trial - v4.4.3)
  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
  29. Incorrect Chat Displayed for Video after page switched (fixed in v4.15.10)
  30. Chapter Popup would not minimize the tab container, after page switched link (Might not reproducible)
  31. Migration to Polymer Controller Extraction - TBC
  32. Chat Not Shown if it is expanded by default link (fixed in v4.15.13)
  33. YouTube's error "something is wrong" appears sometimes when the video page is switched at the same time the live chat iframe is network fetching (might be not reproducible)

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.

Caption Out-Sync Issue

The caption out-sync issue might be fixed by installing all the following scripts:

  1. Disable all YouTube EXPERIMENT_FLAGS
  2. YouTube CPU Tamer by AnimationFrame
  3. YouTube Live Chat Tamer (if there is chatroom in your watch page)
  4. YouTube Super Fast Chat (if there is chatroom in your watch page)

Please also ensure that you do not have styles relying on :has(...) selector very much.

Compatibility

Compatible Userscript Managers

  • Tampermonkey / Tampermonkey beta
  • ViolentMonkey

Compatible Web Browsers

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

Waterfox Classic is Firefox 55 / 56 which shall use violentmonkey and Tampermonkey 4.8.5847

Compatible YouTube Features

Compatible Userscript / Plugin / Extension

Also see...

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