English | 日本語 | 中文
MIT license; Tabview Youtube GitHub
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)
- 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
VER. v4.3 (Beta) 4.3.3 @ 03 Feb 2023
Adoption with Donation Panel ytd-donation-shelf-renderer
VER. v4.2 (Stable) 4.2.7 @ 29 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 VersionRemarks
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.
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. 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.
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 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
-
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
-
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
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.
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.
