My bookmarklets
Home

What's a bookmarklet?

My simplest definition is as follows: a bookmarklet is JavaScript code stored in a bookmark. It will perform a desired action or modification on the current page as to increase your productivity and convenience or to bypass stupid design decisions. The same code can be used in other browsers or with Greasemonkey and similar extensions.



Access all Instagram links and video controls from the home page

Instagram's web version is very agressive in its efforts for a "clean", "simple" interface. The commands to get an image URL or open it in a new tab are unavailable and the only thing you can do with videos is clicking: no volume control, no way to set position, no way to disable that horrible looping. I guess they try to harmonize with the app version and to the Vine'y origins of that feature. Either way, it's stupid that they bring mobile app limitations to the web when mobile device should be doing the jump computers made since the so called Web 2.0. The only "apps" you should need locally are behemoths like Photoshop or AAA games or things that need to work offline.

What this bookmarklet does:
- Adds very visible links to images and videos just above them.
- Makes videos bearable. No autoloop, no blaring volume (they start muted) and returns
video controls (length, position and volume).
- It refreshes every 1 second so it keeps working while you scroll.

Full code:

if (location.hostname.indexOf(".instagram.com")!=-1)
{
var mediaLinks=[];
var mediaSrcs=[];
function linker()
{
var eiFrame = document.getElementsByClassName("videoSpritePlayButton");
for (i = 0; i < eiFrame.length; i++)
{
eiFrame[i].parentNode.removeChild(eiFrame[i]);
}

var buttons = document.getElementsByTagName("a");
for (i = 0; i < buttons.length; i++)
{
if ((buttons[i].getAttribute("role") == "button" || buttons[i].href.indexOf(".instagram.") != -1) && buttons[i].href != "javascript:;")
{
buttons[i].parentNode.style.zIndex = 10002;
buttons[i].style.zIndex = 10002;
}
}

/*
Array.from(document.getElementsByClassName("coreSpriteRightChevron")).
concat(Array.from(document.getElementsByClassName("coreSpriteLeftChevron"))).
concat(Array.from(document.getElementsByClassName("coreSpriteSidecarIconLarge"))).
concat(Array.from(document.getElementsByClassName("glyphsSpriteVideo_large"))).
concat(Array.from(document.getElementsByClassName("mediatypesSprite"))).*/
Array.from(document.querySelectorAll("[class*=\"Sprite\"]")).
forEach(function(x) { x.style.zIndex=10001;});

var instagramMedia = Array.from(document.getElementsByTagName("video")).concat(Array.from(document.getElementsByTagName("img")));

instagramMedia.forEach(function(media)
{
if (!media.brelsMediaLink)
{
if ((media.tagName=="IMG") && (!media.srcset)) return;

media.style.position="absolute";
media.style.zIndex = 10000;
media.controls=true;
media.muted=true;
media.loop=false;

var head = media;
for (; head.parentNode && head.parentNode.tagName != "ARTICLE";)
{
head = head.parentNode;
}
if (head==document) return;

var c=1; for (i=0; i<media.src.length; i++) c+=media.src.charCodeAt(i)*((c^i)+1);
media.brelsBadHash="brels" + c;

var link = document.getElementById(media.brelsBadHash);
if (!link) link = document.createElement("a");

if (!head.brelsLinkHeader)
{
var blh=document.createElement("div");
blh.style.display="inline-block";
blh.style.borderStyle="solid";
blh.style.borderWidth="1px";
blh.style.borderColor="black";
blh.style.backgroundColor="white";
blh.style.maxWidth="min-content";
blh.style.whiteSpace="nowrap";
blh.innerHTML="Links: ";
head.insertBefore(blh, head.firstElementChild);
blh.id=head.brelsLinkHeader="brelsLinkHeader" + Math.floor(Date.now()*Math.random());
}
head=document.getElementById(head.brelsLinkHeader);


if (!head.contains(link))
{
mediaLinks.push(link);
mediaSrcs.push(media.src);
link.id=media.brelsBadHash;
media.brelsMediaLink=link.id;

if (!head.brelsMediaLinkCount) head.brelsMediaLinkCount=0;
link.innerHTML = ++head.brelsMediaLinkCount;
link.target = "_blank";
link.style.zIndex=10001;
link.style.color = "blue";
link.style.textDecoration = "underline";
link.style.display="inline-block";
link.style.maxWidth="min-content";
link.style.paddingLeft="12px";
link.style.paddingRight="12px";
head.appendChild(link);
}

media.setAttribute("brelsMediaLink", media.brelsBadHash);
link.href = media.src;
}
});
setTimeout(function() { linker(); }, 500);
}

linker();

var instaLogo=document.getElementsByClassName("glyphsSpriteMobile_nav_type_logo");
if (instaLogo) try { instaLogo[0].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.position="initial"; } catch(e) { }

}

Link for drag'n'drop bookmarking with minified code: Instagram: Reveal picture and video links and controls

Open a full-resolution Instagram .jpg or video.mp4

Instagram hides the original .jpg behind a "CSS Wall". You can't use a right-click menu command to open the picture in a new window or copy the direct link. Bookmark this code and you get to access it with a single click:

javascript:var metas=document.head.getElementsByTagName("meta"); for (i=0; i < metas.length; i++) if (((metas[i].getAttribute("property")=="og:image") && (document.head.innerHTML.indexOf("og:video")==-1)) || (metas[i].getAttribute("property")=="og:video:secure_url")) { location.href=metas[i].getAttribute("content"); break;}

Link for drag'n'drop bookmarking: Instagram: Reveal picture or video link

If you want the picture to be shown on a new tab:

javascript:var metas=document.head.getElementsByTagName("meta"); for (i=0; i < metas.length; i++) if (((metas[i].getAttribute("property")=="og:image") && (document.head.innerHTML.indexOf("og:video")==-1)) || (metas[i].getAttribute("property")=="og:video:secure_url")) { window.open(metas[i].getAttribute("content")); break;}

Link for drag'n'drop bookmarking: Instagram: Reveal picture or video link in a new tab

It uses the picture page name as a new tab name so it won't open two tabs for the same picture.


Getting rid of the Who to follow list on Twitter

If you're like me, you've been very annoyed by that "Who to follow" list Twitter introduced some time ago. Such addition was well-intentioned as a means for new users to find new accounts to follow, but Twitter old-timers know that the best recommendations come from those snarky RTs we get from the people we already follow. The good news is that you can make the Who to follow list go by emptying it. The bad news is that you're supposed to do it manually. I've been using this bookmarklet to empty whevener it crawls back from the oblivion I send it to periodically.

javascript:{function dismiss() { var x=document.getElementsByClassName("dismiss js-action-dismiss"); if (x[0]) x[0].click(); if (x.length) setTimeout(function() { dismiss(); }, 100); }; dismiss();}

Link for drag'n'drop bookmarking: Twitter: remove who to follow


Full-windowed video on Youtube

I don't like watching Youtube videos fullscreen. I generally get the video handle and open another window with the embed option. This allows me to have a full resizable window I can place in the most appropriate spot. This way, I can wait for the relevant parts of the video while reading and doing other things, especially in those videos that are just some lines of text read aloud.

javascript:var v="",s=location.search.split("&");for(i=0;i<s.length;i++) if (s[i].indexOf("v=")!=-1) {v=s[i];break;} location.href="https://youtube.com/embed/"+v.split("=")[1];

Link for drag'n'drop bookmarking: Youtube: full-windowed video

Remove all stylesheets from a page

It's just as the title says. Sometimes useful information that you could read or search from the start is hidden by CSS in the name of aesthetics or navigational consistency. I use this to reveal all text in a page.

javascript:x=document.head.getElementsByTagName("link"); for (i=x.length-1; i >=0; i--) if (x[i].rel.toLowerCase()=="stylesheet") x[i].parentElement.removeChild(x[i]);x=document.head.getElementsByTagName("style"); for (i=x.length-1; i >=0; i--)x[i].parentElement.removeChild(x[i]);

Link for drag'n'drop bookmarking: Remove all stylesheets

Remove annoying Facebook login prompt

When you're not signed in, Facebook covers its page with an annoying login/signup prompt that can only be minimized. This bookmarklet hides such prompt. Use the extension if you want it to be hidden automatically.

javascript:var nagbig = document.getElementById("expanding_cta_close_button");if (nagbig) nagbig.click();var nagsmall = document.getElementById("headerArea");if (nagsmall) nagsmall.style.display="none";var nagsmall2 = document.getElementById("pagelet_growth_expanding_cta");if (nagsmall2) nagsmall2.style.opacity=0.0;

Link for drag'n'drop bookmarking: Remove FacePrompt

Make all page text selectable.

Some pages or web applications make onscreen text unselectable for style or usability's sake or yet to prevent less knowlegdeable users from copying content. However, there are situations when you do want to quickly copy something. Use this bookmarklet to make all text available without messing with the page or needing to access source code.

javascript:Array.from(document.all).forEach(function(x) { x.style.userSelect="text";} );

Link for drag'n'drop bookmarking: Make text selectable

Make all page images and videos lighter with brightness and contrast controls.

Nowadays, most pages aimed to a general public use a black on white theme for reading comfort. Despite white on black being less luminous, it is usually perceived as more straining to the eye. White backgrounds are good for reading while you keep you display brightness and contrast settings low. This, however, leads to the side effect of images, both static and video, being dark. Adjusting the display or video card settings can be clunky and inconvenient, and you end up going back and forth on these settings whenever you change focus from text to image or vice-versa. That's why I devised this solution to make images clearer while keeping text legible in an automated way.

What this bookmarklet does:
- Increases the brightness by 40% and decreases contrast by 20% on videos and images for better luminosity. The effect is similar to increase the gamma settings.
- Puts an overlay on every image and video to adjust brightness and contrast individually, at 3% increments.
- The overlay contains a toggle button to alternate between default and increased luminosity settings.
- The overlay also contains a "panic" toggle button to alternate between default and increased luminosity settings for all images and videos at the same time.
- As to not affect a page's user interface, only images with a pixel area above 100x100 are affected.

Full code:

var globalVideoBrightness=140.0; 
var globalVideoContrast=80.0;
var globalImageBrightness=120.0;
var globalImageContrast=80.0;
var globalStep=1.03;
var globalPanicDisable=true;
function globalBrightness(x) { return /*(x.style.opacity && x.style.opacity<100.0)?100.0:*/(x.tagName=="VIDEO"?globalVideoBrightness:globalImageBrightness); }
function globalContrast(x) { return /*(x.style.opacity && x.style.opacity<100.0)?100.0:*/(x.tagName=="VIDEO"?globalVideoContrast:globalImageContrast); }
function getCurrentLuminosity(x)
{
return (
(
((x.brelsBrightness==globalVideoBrightness) && (x.brelsContrast==globalVideoContrast))?
(
'v'
)
:
(
((x.brelsBrightness==globalImageBrightness) && (x.brelsContrast==globalImageContrast))?
(
'i'
)
:
(
((x.brelsBrightness==100.0) && (x.brelsContrast==100.0))?
(
'd'
)
:
(
(x.brelsCustomLuminosity)?
(
'u'
)
:
(
'o'
)
)
)
)
));
}
function notifyLuminosity(x)
{
x.innerText=x.brelsNotified.style.filter;
}
function applyFilter(x, n)
{
var c=getCurrentLuminosity(x);
x.style.filter="brightness(" + (globalPanicDisable?100.0:x.brelsBrightness) + "%) contrast(" + (globalPanicDisable?100.0:x.brelsContrast) + "%)";
if (n) notifyLuminosity(x.brelsNotifier);
x.brelsOverlay.childNodes[4].style.color=
(
(c=='v')?
(
"yellow"
)
:
(
(c=='i')?
(
"orange"
)
:
(
((c=='u') && x.brelsCustomLuminosity)?
(
"lime"
)
:
(
(c=='d')?"black":"fuchsia"
)
)
)
);
}
function changeBrightness(x,v)
{
x.brelsUserBrightness = x.brelsBrightness*=Math.pow(globalStep,v);
x.brelsUserContrast = x.brelsContrast;
x.brelsCustomLuminosity=true;
applyFilter(x,true);
}
function changeContrast(x,v)
{
x.brelsUserBrightness = x.brelsBrightness;
x.brelsUserContrast = x.brelsContrast*=Math.pow(globalStep,v);
x.brelsCustomLuminosity=true;
applyFilter(x,true);
}
function getToggledLuminosity(x, image, video, user, reverse)
{
var c=getCurrentLuminosity(x);
return (
(
(c=='i')
?
(
!reverse?video:((x.brelsCustomLuminosity)?user:100.0)
)
:
(
(c=='v')
?
(
!reverse?100.0:image
)
:
(
(c=='d')
?
(
!reverse?((x.brelsCustomLuminosity)?user:image):video
)
:
(
(c=='u')?(!reverse?image:100.0):50.0
)
)
)
));
}
function toggleLuminosity(x,reverse)
{
var nb, nc;
nb=getToggledLuminosity(x, globalImageBrightness, globalVideoBrightness, x.brelsUserBrightness, reverse);
nc=getToggledLuminosity(x, globalImageContrast, globalVideoContrast, x.brelsUserContrast, reverse);
x.brelsBrightness=nb;
x.brelsContrast=nc;
applyFilter(x,true);
}
function globalPanicDisableLuminosity(panic)
{
globalPanicDisable=!globalPanicDisable;
document.cookie="brelsGlobalPanicDisabled="+globalPanicDisable;
brelsOverlays.forEach(function (x)
{
var img=x.brelsOverlayedImage;
panic.style.color=globalPanicDisable?"red":"black";
applyFilter(img, false);
});
}
function styleControl(x, ov)
{
var defs=["click","dblclick","mousedown","mouseup","mouseenter","mouseleave","mousemove","contextmenu"];
x.style.display="inline-block";
x.style.fontWeight="bolder";
x.style.fontSize="14px";
x.style.borderStyle="solid";
x.style.borderWidth="1px";
x.style.borderColor="black";
x.style.backgroundColor="white";
x.style.color="black";
x.style.width="16px";
x.style.textAlign="center";
x.style.top="0px";
x.style.left="0px";
x.style.cursor="pointer";
x.style.fontFamily="Segoe UI Symbol";

defs.forEach(function(ev) { if (ov && (ov.indexOf(ev)==-1)) x.addEventListener(ev, function(event) { event.stopPropagation(); event.preventDefault(); }); });
}
function showOverlay(x)
{
var irect=x.brelsOverlayedImage.getBoundingClientRect();
var prect=x.brelsOverlayedImage.parentElement.getBoundingClientRect();
var childOverlapsParent;
var top, left;

childOverlapsParent=(x.brelsOverlayedImage.parentElement.computedStyleMap().get("display")!="inline") && (irect.left<=prect.left) && (irect.top<=prect.top) && (irect.right>=prect.right) && (irect.bottom>=prect.bottom);
top=childOverlapsParent?prect.y:irect.y;
left=childOverlapsParent?prect.x:irect.x;

x.style.position=(window.scrollY)?"absolute":"fixed";
x.style.display="inline-block";
x.style.top=window.scrollY+top+"px";
x.style.left=window.scrollX+left+"px";
}
var brelsOverlays=[];
function createOverlay(img)
{
var area=img.clientWidth*img.clientHeight;
var lazyratio=img.clientWidth/(img.clientHeight+1);
if (((area)>10000) && (lazyratio>=0.20) && (lazyratio<=5.0))
{
if (!img.brelsOverlay && !img.brelsOverlapped)
{
var controlsContainer, badder, bsubber, cadder, csubber, notifier, overlaps;

var irect=img.getBoundingClientRect();
overlaps=false;
for (var i=0;i < brelsOverlays.length;i++)
{
var x=brelsOverlays[i].brelsOverlayedImage;
var xrect=x.getBoundingClientRect();
if ((x!=img) && (xrect.height && irect.height && (xrect.top<=irect.top) && (xrect.left<=irect.left) && (xrect.bottom>=irect.bottom) && (xrect.right>=irect.right)) || x.contains(img) )
{
overlaps=true;
break;
}
};
if (overlaps)
{
img.brelsOverlapped=true;
return;
}

controlsContainer=document.createElement("div");
controlsContainer.id="brelsOverlay"+brelsOverlays.length;
controlsContainer.style.display="none";
controlsContainer.style.position="absolute";
controlsContainer.style.zIndex=10002;
controlsContainer.style.top="0px";
controlsContainer.style.left="0px";
controlsContainer.style.width="max-content";
controlsContainer.brelsOverlayedImage=img;
brelsOverlays.push(controlsContainer);

badder=document.createElement("span");
badder.title="Increase brigthness";
badder.innerHTML="☼︎";
styleControl(badder, ["mouseup"]);
badder.style.cursor="zoom-in";
badder.addEventListener('mouseup', function(event) { changeBrightness(img, 1); event.stopPropagation(); event.preventDefault(); });

bsubber=document.createElement("span");
bsubber.title="Decrease brightness";
bsubber.innerHTML="☀︎";
styleControl(bsubber, ["mouseup"]);
bsubber.style.cursor="zoom-out";
bsubber.addEventListener('mouseup', function(event) { changeBrightness(img, -1); event.stopPropagation(); event.preventDefault(); });

cadder=document.createElement("span");
cadder.title="Increase contrast";
cadder.innerHTML="🌖︎";
styleControl(cadder, ["mouseup"]);
cadder.style.cursor="zoom-in";
cadder.addEventListener('mouseup', function(event) { changeContrast(img, 1); event.stopPropagation(); event.preventDefault(); });

csubber=document.createElement("span");
csubber.title="Decrease contrast";
csubber.innerHTML="🌙︎";
styleControl(csubber, ["mouseup"]);
csubber.style.cursor="zoom-out";
csubber.addEventListener('mouseup', function(event) { changeContrast(img, -1); event.stopPropagation(); event.preventDefault(); });

toggler=document.createElement("span");
toggler.title="Toggles between enhanced, default and user adjustments";
toggler.innerHTML="💡︎";
styleControl(toggler, ["mouseup"]);
toggler.style.color="yellow";
toggler.addEventListener('mouseup', function(event) { toggleLuminosity(img, event.button!=0); event.stopPropagation(); event.preventDefault(); });

var reload=document.createElement("span");
reload.innerHTML="🔄︎";
reload.title="Reload image/video";
styleControl(reload, ["mouseup"]);
reload.addEventListener('mouseup', function(event) { var x=img.currentSrc?img.currentSrc:img.src; img.src=""; setTimeout(function() { img.src=x }, 1); event.stopPropagation(); event.preventDefault();});

var panic=document.createElement("span");
panic.innerHTML="🚨︎";
panic.title="Globally turns adjustments on/off";
styleControl(panic, ["mouseup"]);
panic.style.color=globalPanicDisable?"red":"black";
panic.addEventListener('mouseup', function(event) { globalPanicDisableLuminosity(panic); event.stopPropagation(); event.preventDefault();});

notifier=document.createElement("span");
styleControl(notifier, ["mouseup"]);
notifier.style.display="inline-block";
notifier.style.width="fit-content";
notifier.brelsNotified=img;
notifier.addEventListener('mouseup', function(event) { event.target.parentElement.style.display="none"; event.stopPropagation(); event.preventDefault();});

controlsContainer.appendChild(badder);
controlsContainer.appendChild(bsubber);
controlsContainer.appendChild(cadder);
controlsContainer.appendChild(csubber);
controlsContainer.appendChild(toggler);
controlsContainer.appendChild(reload);
controlsContainer.appendChild(panic);
controlsContainer.appendChild(notifier);
controlsContainer.addEventListener("mouseleave", function (event) { if (event.relatedTarget!=event.target.brelsOverlayedImage) event.target.style.display="none"; event.stopPropagation(); event.preventDefault(); } );


img.brelsOverlay=controlsContainer;
img.setAttribute("brelsOverlay", controlsContainer.id);
img.brelsBrightness=globalBrightness(img);
img.brelsContrast=globalContrast(img);
img.brelsUserBrightness=globalBrightness(img);
img.brelsUserContrast=globalContrast(img);
img.brelsNotifier=notifier;
img.brelsCustomLuminosity=false;
applyFilter(img, true);
img.addEventListener("mouseenter", function (event) { if (!event.target.brelsOverlay.contains(event.relatedTarget)) { showOverlay(event.target.brelsOverlay); } event.stopPropagation(); event.preventDefault(); } );
img.addEventListener("mouseleave", function (event) { if (!event.target.brelsOverlay.contains(event.relatedTarget)) event.target.brelsOverlay.style.display="none"; event.stopPropagation(); event.preventDefault(); } );

img.parentElement.brelsHasOverlay=true;
document.body.appendChild(controlsContainer);
}
};
};
var terer=0;
function brelsLuminosityOverlays()
{
var start=Date.now();
var fakeimgs=[];
var divs=document.evaluate("//div[contains(@style, 'background-image')]", document, null, XPathResult.ANY_TYPE, null);
var fakeimg=null;
do try
{
fakeimg=divs.iterateNext();
if (fakeimg) fakeimgs.push(fakeimg);
} catch(e) { }
while (fakeimg);
var imgs=Array.from(document.getElementsByTagName("img"));
var videos=Array.from(document.getElementsByTagName("video"));
var canvas=Array.from(document.getElementsByTagName("canvas"));
fakeimgs.concat(videos, canvas, imgs).forEach(function (x) { createOverlay(x); });
setTimeout(function() { brelsLuminosityOverlays(); }, 500);
}
var cookie=document.cookie.indexOf("brelsGlobalPanicDisabled=");
globalPanicDisable=(cookie==-1)?true:(document.cookie[cookie+25]=="t"?true:false);
brelsLuminosityOverlays();

Link for drag'n'drop bookmarking with minified code: Increase images and videos luminosity


Make URLs apparent and selectable in Google search results

Google decided to gradually abolish URLs in its search results page. Less interoperability = less freedom = more people contained in Big Tech app silos. If you still want/need to use Google, this script can be used to restore the lost functionality. It's ready to be copied in the content.js of a custom extension.

javascript:if("www.google.com"==location.hostname&&"/search"==location.pathname){function restoreURLs(){if("loading"!=document.readyState){for(var e=document.evaluate("//div[@id='search']//a//cite",document,null,XPathResult.ANY_TYPE,null),t=[],n=null;n=e.iterateNext();)t.push(n);t.forEach(function(e){for(var t=e;(t=t.parentElement)&&"A"!=t.tagName;);t.removeAttribute("ping"),e.innerText=t.href,t.style.display="block";for(var n=e,a=null;(n=n.parentElement)&&!(a=n.querySelector(".action-menu")););e.parentElement.removeChild(e),t.parentElement.appendChild(e),a.parentElement.removeChild(a),t.parentElement.appendChild(a)})}else setTimeout(function(){restoreURLs()},100)}restoreURLs()}

Link for drag'n'drop bookmarking: Restore Google search URLs


An improvised light theme for Ariyala

Ariyala, the useful tool for gearing, hunts and min-maxing, is very extreme with its dark mode, which is a little uncomfortable and hard to read for me. This script makes it light-themed by reversing the colors. Click here to check a preview.

javascript: { Array.from(document.querySelectorAll("*")).forEach(function(x) { if (x.offsetHeight>0) { let splitted; splitted=x.computedStyleMap().get("color").toString().replace(/rgba?\(|\)| /gi,"").split(","); x.style.color="rgb(" + (255-splitted[0]) + "," + (255-splitted[1]) + "," + (255-splitted[2]) + ")"; splitted=x.computedStyleMap().get("background-color").toString().replace(/rgba?\(|\)| /gi,"").split(","); x.style.backgroundColor="rgb(" + (255-splitted[0]) + "," + (255-splitted[1]) + "," + (255-splitted[2]) + ")"; } }) }

Link for drag'n'drop bookmarking: Ariyala Light Theme


Regain control on your video playback and truly disable autoplay on Chrome/Brave.

From "tap to play" to blaring looping autoplay videos with "gesture" controlled playback, the worst parts of the mobile experience continue to leak to the desktop. This is by design, since the mobile experience is all about relinquishing control.

One such bad experience is with autoplaying videos. In Brave Browser, although you can block autoplay using regular settings, as soon as you whitelist a site for sound (so you don't need to unmute it by clicking on the minuscule button on the tab every time a video plays), that site will also be whitelisted for autoplay. In Chrome, you don't even have such option. Autoplay will be determined by user interaction. No setting seems to prevent it, be it --autoplay-policy or group policies like AutoplayAllowed. In addition, the auto-whitelist-with-sound feature is hardcoded in Chromium with the inner flag AutoplayWhitelistSettings in media_switches.cc.

What this bookmarklet does:
- Pauses all video as soon as it loads.
- Mutes video and reduces video volume to zero (actually 0.01%).
- Removes looping.
- Shows hidden controls (play/pause/stop, save video, etc).
- Turns the autoadvance button off in Youtube.

Full code:

new MutationObserver
(
function(mutationsList, observer)
{
for (let mutation of mutationsList)
{
if ((mutation.target.BRELSVideoAnnoyances!=true) || (document.body.BRELSVideoAnnoyancesPageReloaded==true))
{
if (mutation.target.nodeName=="VIDEO")
{
mutation.target.BRELSVideoAnnoyances=true;
document.body.BRELSVideoAnnoyancesPageReloaded=false;

mutation.target.addEventListener("canplay", e => { if (mutation.target.BRELSNotTodaySatan!=true) { mutation.target.BRELSNotTodaySatan=true; mutation.target.pause(); } });
mutation.target.addEventListener("play", e => { mutation.target.loop=false; } );
mutation.target.volume=0.01;
mutation.target.pause();
mutation.target.muted=true;
mutation.target.loop=false;
mutation.target.controls=true;
mutation.target.autoplay=false;
}
}
if ((mutation.target.BRELSVideoAnnoyances!=true) || (document.body.BRELSVideoAnnoyancesYoutubeMutePageReloaded==true))
{
if (
(mutation.target.nodeName=="BUTTON") &&
location.hostname.endsWith("youtube.com") &&
(mutation.target.getAttribute("aria-label")=="Mute (m)")
)
{
mutation.target.BRELSVideoAnnoyances=true;
document.body.BRELSVideoAnnoyancesYoutubeMutePageReloaded=false;
mutation.target.click();
}
}

if (mutation.target.BRELSVideoAnnoyances!=true)
{
if ((mutation.target.id=="toggle") &&
location.hostname.endsWith("youtube.com"))
{
mutation.target.BRELSVideoAnnoyances=true;
if (mutation.target.getAttribute("aria-pressed")!="false") mutation.target.click();
}
}

if ((mutation.target.nodeName=="TITLE") ||
((mutation.target.nodeName=="VIDEO") && (mutation.type=="attributes") && (mutation.attributeName=="src")))
{
document.body.BRELSVideoAnnoyancesPageReloaded=true;
document.body.BRELSVideoAnnoyancesYoutubeMutePageReloaded=true;
}
}
}
).observe(document, { attributes: true, childList: true, subtree: true });

Link for drag'n'drop bookmarking with minified code: Disable autoplay and Youtube autoadvance


Open Youtube video thumbnail in a new tab

Full code:

Array.from(location.search.split("&")).forEach(x=>{if (x.indexOf("v=")!=-1) window.open("https://i.ytimg.com/vi/"+x.split("=")[1]+"/maxresdefault.jpg", "_blank"); })

Link for drag'n'drop bookmarking: Open Youtube video thumbnail in a new tab