English | 日本語 | 中文
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 = false
- 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
- Info, Comments, Videos, Playlist are all put into tabs at the right side (if it is two column layout)
-
Alive the background tabs if they are playing the video / music song (i.e. avoid killing inactive tab, see Tabs Discard) - Reduce lagging issue regarding (LIVE PLAYBACK) chatroom messages (see below, and you might also install this Userscript)
- Fix various issues related to transcript panel (e.g. effect texts and dual captions)
- 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
- Allow users to switch to browse / search layout using miniview playing (by default, this is only available if there is playlist)
- Various CSS hacks to enhance rendering performance
- Floating the sider panel if the layout sizing is incorrect due to extra wide video
-
Fix Chatroom messages issues (live playback - backwards) [disabled if hyperchat is used] (No longer required as YouTube engineers fixed in 2023) - Show Livestream DateTime and duration when hovering the video title
- Prevent playback shift during text selection change with keyboard
- Single Column with PIP (desktop, blink / webkit)
- 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
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
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
VER. v4.34 (Stable) 4.34.0 @ 23 Sep 2023
- Bug Fix & Adaption to Controller Extraction v2
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.
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.
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.
Preview (Dark Theme - Two Columns)
Theater Mode
Live Chat - Live / Replay
Video Info
Normal Comment Mode, if available
Related Videos
Playlist, if available
Popup Live Chat (v4)
Sample YouTube Link - Combined Test @ Mar 2024Sample 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 Info
Known Issues
-
abnormal attribute "hidden" in invisible layout - Sometimes the playlist is still hidden after clicking the playlist item. -
Youtube Coding Bug: No chat replay if the video is paused -
Webkit bug - comments lines clamped without "show more" button -
Show More / Show Less Button might be always visible for full content after resizing the comments section MiniView Switching Video Not Available Yet (v2.1.0 feature) Sometime the player go miniview after the page is just loaded (v2.1.0 feature)- Request Default Tab Feature 94022 92458
(trial - v4.4.3) -
Text Size for Tab Info - will let users to adjust the text size (v2.4.1 feature) -
Teaser UI - when window.yt.config_.EXPERIMENT_FLAGS.kevlar_watch_metadata_refresh is true Removed due to Teaser UI abandoned by YouTube -
playing -> show comment -> auto play next -> css not injected to iframe? Fixed in v2.11.3 by using Iframe load event checking -
Tooltips overlapped by Video (#157029) - this relates to the `position: relative` which is essential for #cinematics feature) (Fixed in v3.10.0) -
Adjustment for time delay for layout changing shall be required to make the response immediately no need -
Toggle Button Text Incorrect (switching among live streams) (#157029) -
Playlist Display Issue (queue video in 'browse' page) (#157029) - Possible Caption Out-sync Issues (#156915)
- No round angle for engagement panel??
-
Possible Wrong comments count when the video is auto-played in the background. (fixed in v3.11.0) -
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) -
Fullscreen Description overflow issues (due to 2022/12/10 layout change) (fixed in v3.13.1) -
Engagement Panel Visibility Change not being detected after clicking the time of video in the comments (fixed in v3.13.1) -
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) -
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) -
Due to Recent YouTube Coding Change: collapse and re-expand the chatframe will make the chat messages shown incorrectly. (fixed in v4.1.0) -
Switch Page + collapse + expand rapidly will make the layouting broken. (fixed in v4.1.xx ~ v4.2.2) -
Switch Pages with LiveChatFrame will make the chat frame content flicking. (fixed in v4.1.xx ~ v4.2.2) -
TODO: Reload playback chat messages after the chat is expanded at the previous time tick (fixed in v4.1.xx ~ v4.2.2) -
comments loaded twice when the ads is played (fixed in v4.2.x ~ v4.2.4) - CSS cause lagging in video page with complicated effected subtitles
-
Incorrect Chat Displayed for Video after page switched (fixed in v4.15.10) - Chapter Popup would not minimize the tab container, after page switched link (Might not reproducible)
- Migration to Polymer Controller Extraction - TBC
-
Chat Not Shown if it is expanded by default link (fixed in v4.15.13) - 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
- 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 - YouTube native bug for channel name - Japanese layout + window width = 1185px for video (screenshot)
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.
- YouTube only enable the SPA browsing for playlist.
- MiniPlayer View History change is buggy.
Known & Fixed YouTube Native Chatroom Issues
- 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] - 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
- 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
- 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.
The caption out-sync issue might be fixed by installing all the following scripts:
- Disable all YouTube EXPERIMENT_FLAGS
- YouTube CPU Tamer by AnimationFrame
- YouTube Live Chat Tamer (if there is chatroom in your watch page)
- 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.
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.
Tabview Youtube
