Greasy Fork镜像

I had to finally migrate from Chrome to Firefox. And while migrating my extensions I noticed restore animated thumbnail previews doesn't work on homepage. It works on subscription or history page but not on the homepage. What gives?

I am using Firefox with Violentmonkey userscript extension and the homepage is still working for me. Firstly check you have the latest version of the userscript installed.

Otherwise as far as I know Youtube is doing A/B testing of different user interfaces where people can have differently working homepages. So probably you have a homepage that is different to mine that is not compatible with the latest fix I have written.

What degree of not working are you experiencing? Do you see the 3 image slideshow fallback only or nothing but a static image on mouseover? Can you check that the animated thumbnails still work on your Youtube search results page?

If you are able to: open your browser developer tools console whilst on the Youtube homepage (ctrl+shift+i shortcut and select the console tab) you should see somewhere a log saying "UserScript Restore YT Animated Thumbs: Enabling carousel fallback where an_webp not available." and anywhere after that are there any suspicious error log messages, if so what do they say?

Thanks for the quick reply. First of all, yes I'm using the latest version of Violentmonkey. As for your debugging process: I'm using another script for 6 videos per row so I see 6 images (and I tested whether that was the culprit and it's not) and when I hover over them it does nothing. It keeps showing me the default thumbnail. Like I said it works perfectly fine on places other than homepage which includes the search results page. When I check the console errors/warnings it says UserScript Restore YT Animated Thumbs: Enabling carousel fallback where an_webp not available. I don't know if this gonna help but here is the full log:

Content-Security-Policy warnings 2
Content-Security-Policy: Couldn’t process unknown directive ‘require-trusted-types-for’ www.youtube.com
Content-Security-Policy: Ignoring ‘x-frame-options’ because of ‘frame-ancestors’ directive.
performance.now precision has been modified for compatibility reasons. See https://bugzilla.mozilla.org/show_bug.cgi?id=1756970 for details. bug1842437-www.youtube.com-performance-now-precision.js:18:9
UserScript Restore YT Animated Thumbs: enabled. Restore animated thumbnail previews - youtube.com.user.js:16:9
SES Removing unpermitted intrinsics lockdown-install.js:1:200114
Removing intrinsics.%DatePrototype%.toTemporalInstant lockdown-install.js:1:199959
LegacyDataMixin will be applied to all legacy elements.
Set `_legacyUndefinedCheck: true` on element class to enable. rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:9405:9
MouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:6829:51
MouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead. rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:6829:51
UserScript Restore YT Animated Thumbs: Enabling carousel fallback where an_webp not available. Restore animated thumbnail previews - youtube.com.user.js:163:13
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js:6304:23327
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js:6304:27846
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js:6304:27939
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js:6304:28265
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js:6304:29381
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval:6304:29381
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval:6304:23327
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval:1:170
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval:1:170
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval:1:110
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval:1:110
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval:6304:27846
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval:6304:27939
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval:6304:28265
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval:1:172
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval:1:112
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval line 1 > eval:1:112
unreachable code after return statement cZGe_UEVmt_itVn9QDeaEXnEzH2zf_5YZMXMQHer3yk.js line 2 > eval line 6304 > eval line 1 > eval line 1 > eval:1:172
Initializing Youtube Screenshot Addon content_script.js:273:9
initializing selectors ryd.content-script.js:832:11
Object { buttons: {…}, dislikeTextContainer: (4) […], likeTextContainer: (4) […], menuContainer: (1) […], roundedDesign: (2) […] }
ryd.content-script.js:842:11
SES_UNCAUGHT_EXCEPTION: TypeError: can't access property "addEventListener", c is null
b https://www.youtube.com/:1
_.E$/< https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:2126
z7 https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:1059
E$ https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:2126
update https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:13336
lockdown-install.js:1:143245
moz-extension://ee233e6b-0c40-4bfc-a923-1ac6926c9521/scripts/lockdown-install.js:1
_.E$/< https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:2126
z7 https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:1059
E$ https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:2126
update https://www.youtube.com/s/_/ytmainappweb/_/js/k=ytmainappweb.kevlar_base.en_US.oOMq4TnyTrs.es5.O/am=AAAAAQ/d=0/br=1/rs=AGKMywHcDOz9vYIjOiGvGwbzzuwIUIm8bg:13336
Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. base.js:12300:34
Content-Security-Policy warnings 2
Content-Security-Policy: Couldn’t process unknown directive ‘require-trusted-types-for’ RotateCookiesPage
Content-Security-Policy: Ignoring “'unsafe-inline'” within script-src: nonce-source or hash-source specified RotateCookiesPage
SES Removing unpermitted intrinsics lockdown-install.js:1:200114
Removing intrinsics.%DatePrototype%.toTemporalInstant lockdown-install.js:1:199959
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'nonce-YWkB3kH_OSwbUQMgvO0hLQ' 'unsafe-inline'”. Consider using a hash ('sha256-PRh/fvLCFBNVoIAGULuMBLuPh7G0pBe3UpLsY8yvX0A=') or a nonce. inpage.js:1:299468
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'nonce-YWkB3kH_OSwbUQMgvO0hLQ' 'unsafe-inline'”. Consider using a hash ('sha256-P2oev5DBmuLLQVRkOCX13tfYCpqssdKmLJYpIEEtd5s=') or a nonce. documentScriptInjector.js:1:548
Content-Security-Policy: The page’s settings blocked an inline script (script-src-elem) from being executed because it violates the following directive: “script-src 'nonce-YWkB3kH_OSwbUQMgvO0hLQ' 'unsafe-inline'”. Consider using a hash ('sha256-Be1+0GMN2t69m9AXpolrrBYiZSZafA97KOaKhiNUK6Y=') or a nonce. 4b2abd22-099b-428f-ad93-cb1e55e1b921:19:51
UserScript Restore YT Animated Thumbs: No an_webp url in response for t7yVjWNFh7k Restore animated thumbnail previews - youtube.com.user.js:227:29
Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (842880 px). Occurrences of will-change over the budget will be ignored. www.youtube.com
UserScript Restore YT Animated Thumbs: No an_webp url in response for t7yVjWNFh7k Restore animated thumbnail previews - youtube.com.user.js:227:29
The resource at “https://i.ytimg.com/generate_204” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. www.youtube.com
UserScript Restore YT Animated Thumbs: No an_webp url in response for t7yVjWNFh7k 4 Restore animated thumbnail previews - youtube.com.user.js:227:29
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://studio.youtube.com’) does not match the recipient window’s origin (‘https://www.youtube.com’). www.youtube.com
Content-Security-Policy: Couldn’t process unknown directive ‘require-trusted-types-for’ persist_identity
SES Removing unpermitted intrinsics lockdown-install.js:1:200114
Removing intrinsics.%DatePrototype%.toTemporalInstant lockdown-install.js:1:199959
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
InstallTrigger is deprecated and will be removed in the future. wresources.js:7305:13
onmozfullscreenchange is deprecated. wresources.js:7305:13
onmozfullscreenerror is deprecated. wresources.js:7305:13
InstallTrigger is deprecated and will be removed in the future. wresources.js:7305:13
onmozfullscreenchange is deprecated. wresources.js:7305:13
onmozfullscreenerror is deprecated. wresources.js:7305:13
MetaMask: 'ethereum._metamask' exposes non-standard, experimental methods. They may be removed or changed without warning. www.youtube.com:1:47269
Skipping property default_kevlar_base.O.behaviors[1][0].store due to access error: ig wresources.js:7325:21
Skipping property default_kevlar_base.LL.domHost due to access error: 'get nodeType' called on an object that does not implement interface Node. wresources.js:7325:21
Skipping property default_kevlar_base.eoL._isRTL due to access error: Window.getComputedStyle: Argument 1 does not implement interface Element. wresources.js:7325:21
Skipping property default_kevlar_base.THL._defaultScrollTarget due to access error: can't access property "documentElement", this.ownerDocument is undefined wresources.js:7325:21
Skipping property default_kevlar_base.THL._doc due to access error: can't access property "documentElement", this.ownerDocument is undefined wresources.js:7325:21
Skipping property default_kevlar_base.J_.backdropElement due to access error: can't access property "backdropElement", this._manager is undefined wresources.js:7325:21
Skipping property default_kevlar_base.J_._focusNode due to access error: this.node.__shady_querySelector is not a function wresources.js:7325:21
Skipping property default_kevlar_base.nx[0]._localeHorizontalAlign due to access error: Window.getComputedStyle: Argument 1 does not implement interface Element. wresources.js:7325:21
Skipping property default_kevlar_base.nx[0]._isRTL due to access error: Window.getComputedStyle: Argument 1 does not implement interface Element. wresources.js:7325:21
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
XML Parsing Error: no root element found
Location: https://www.youtube.com/
Line Number 1, Column 1: www.youtube.com:1:1
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for yyWimvyGbSc Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
UserScript Restore YT Animated Thumbs: No an_webp url in response for JuuyRwoOK10 Restore animated thumbnail previews - youtube.com.user.js:227:29
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at data:text/plain;base64,Cg==. (Reason: CORS request not http).
Source map error: request failed with status 404
Resource URL: https://www.youtube.com/s/desktop/8666f415/jsbin/webcomponents-sd.vflset/webcomponents-sd.js
Source Map URL: blaze-out/k8-opt/bin/third_party/javascript/polymer/v2/webcomponentsjs/webcomponents-sd.js.sourcemap
Source map error: request failed with status 404
Resource URL: https://www.youtube.com/s/desktop/8666f415/jsbin/custom-elements-es5-adapter.vflset/custom-elements-es5-adapter.js
Source Map URL: blaze-out/k8-opt/bin/third_party/javascript/custom_elements/fast-shim.js.sourcemap
Source map error: request failed with status 404
Resource URL: https://www.youtube.com/s/desktop/8666f415/jsbin/web-animations-next-lite.min.vflset/web-animations-next-lite.min.js
Source Map URL: web-animations-next-lite.min.js.map

The thing with the homepage is that Youtube changed something recently that it needs extra code to restore the animated thumbs compared to the other pages that are still working for you. The other pages I can force enable some existing Youtube code to restore the animated thumbs but the new homepage I had to write some full on custom code to enable the functionality as Youtube removed their's from the new homepage.

I think what stands out in the logs is lines like "SES Removing unpermitted intrinsics lockdown-install.js" which is not from my userscript but apparently related to a Metamask extension. I haven't heard of it before but it looks like ( https://stackoverflow.com/a/76393381 ) this can affect other code so could you try fully disabling the Metamask extension and see if that causes the userscript to start working or not?

Well I found the culprit. It wasn't metamask tho :S I decided to disable all my extensions then enable one by one. After a few minutes of toggling on and off I found out another youtube extension called De-Arrow was the one causing the problem. This issue is also present on Chrome. Do I need to contact and point them towards this discussion? I disabled De-Arrow for the time being and everything is back to normal. Thanks for your help.

Well done figuring it out. It is a risk of many extensions that the could be conflicts. I'm not sure that DeArrow would make a change, but I have taken a quick look at what they are doing and added a fix to be compatible with the DeArrow extension specially for you, in userscript v5.5. Let me know if it works.

Animated homepage thumbnails now work in v5.5, thanks for that but it seems this is affecting the right side recommendations while watching a video as well. Could you also do that :D What I mean by recommendation is this: check the attachment

Lol, quite a game of cat and mouse. In this case it looks like it really needs to be DeArrow that needs to change, for the watch page sidebar. As for the watch page it is original Youtube-branded code that is displaying the animated thumbnails, my userscript only force enables this essentially by flicking a switch to turn it on the code thereafter as it relates to the sidebar is all Youtube's.

I have looked into it this evening for fun and made another userscript that does a hacky fix, I'm not willing to add it to this main userscript as for the reasons above it is an issue with DeArrow not handling Youtube's animated thumbnail code, which is fair as this feature is discontinued by Youtube and only enabled by a hack. But really they have to handle it in their code so you could raise a Github ticket with them if you like. You can install this other userscript along side from here: https://greasyforks.org/en/scripts/546444-dearrow-hack-for-sidebar-animated-thumbs-compatibility-youtube-com

Yep that does it. Honestly what you've done is above and beyond, thanks for the hacky solution. I'll be opening an issue on their github page and referencing this discussion alongside your hack script. Thanks again, have a nice one :)