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 stared muted) and returns
video controls (length, position and volume).
- It refreshes every 1 second so it keeps working while you scroll.

javascript:var mediaLinks=[],mediaSrcs=[];function linker(){var e=document.getElementsByClassName("videoSpritePlayButton");for(i=0;i< e.length;i++)e[i].parentNode.removeChild(e[i]);var t=document.getElementsByTagName("a");for(i=0;i< t.length;i++)"button"!=t[i].getAttribute("role")&&-1==t[i].href.indexOf(".instagram.")||"javascript:;"==t[i].href||(t[i].style.zIndex=10001);Array.from(document.getElementsByClassName("coreSpriteRightChevron")).concat(Array.from(document.getElementsByClassName("coreSpriteLeftChevron"))).forEach(function(e){e.style.zIndex=10001}),Array.from(document.getElementsByTagName("video")).concat(Array.from(document.getElementsByTagName("img"))).forEach(function(e){if(!e.brelsMediaLink){if("IMG"==e.tagName&&!e.srcset)return;for(var t=e;t.parentNode&&"ARTICLE"!=t.parentNode.tagName;)t=t.parentNode;if(t==document)return;var r=1;for(i=0;i< e.src.length;i++)r+=e.src.charCodeAt(i)*(1+(r^i));e.brelsBadHash="brels"+r;var n=document.getElementById(e.brelsBadHash);if(n||(n=document.createElement("a")),!t.brelsLinkHeader){var a=document.createElement("div");a.style.display="inline-block",a.style.borderStyle="solid",a.style.borderWidth="1px",a.style.borderColor="black",a.style.backgroundColor="white",a.style.maxWidth="min-content",a.style.whiteSpace="nowrap",a.innerHTML="Links: ",t.insertBefore(a,t.firstElementChild),a.id=t.brelsLinkHeader="brelsLinkHeader"+Math.floor(Date.now()*Math.random())}(t=document.getElementById(t.brelsLinkHeader)).contains(n)||(mediaLinks.push(n),mediaSrcs.push(e.src),n.id=e.brelsBadHash,e.brelsMediaLink=n.id,t.brelsMediaLinkCount||(t.brelsMediaLinkCount=0),n.innerHTML=++t.brelsMediaLinkCount,n.target="_blank",n.style.zIndex=10001,n.style.color="blue",n.style.textDecoration="underline",n.style.display="inline-block",n.style.maxWidth="min-content",n.style.paddingLeft="8px",t.appendChild(n)),e.style.zIndex=1e4,e.controls=!0,e.muted=!0,e.loop=!1,e.setAttribute("brelsMediaLink",e.brelsBadHash),n.href=e.src}}),setTimeout(function(){linker()},500)}linker();

Link for drag'n'drop bookmarking: 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 browser 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.

javascript:var globalBrightness=140,globalContrast=80,globalStep=1.03,globalToggle=!0;function getCurrentLuminosity(e){return e.brelsBrightness==globalBrightness&&e.brelsContrast==globalContrast?"g":100==e.brelsBrightness&&100==e.brelsContrast?"d":e.brelsCustomLuminosity?"u":"o"}function notifyLuminosity(e){e.innerText=e.brelsNotified.style.filter,e.style.display="inline",setTimeout(function(){e.style.display="none"},1500)}function applyFilter(e,t){var l=getCurrentLuminosity(e);e.style.filter="brightness("+e.brelsBrightness+"%) contrast("+e.brelsContrast+"%)",t&& notifyLuminosity(e.brelsNotifier),e.brelsOverlay.childNodes[4].style.color="g"==l?"yellow":"u"==l&&e.brelsCustomLuminosity?"orange":"d"==l?"black":"blue"}function changeBrightness(e,t){e.brelsUserBrightness=e.brelsBrightness*=Math.pow(globalStep,t),e.brelsUserContrast=e.brelsContrast,e.brelsCustomLuminosity=!0,applyFilter(e,!0)}function changeContrast(e,t){e.brelsUserBrightness=e.brelsBrightness,e.brelsUserContrast=e.brelsContrast*=Math.pow(globalStep,t),e.brelsCustomLuminosity=!0,applyFilter(e,!0)}function toggleLuminosity(e){var t=getCurrentLuminosity(e);e.brelsBrightness="g"==t?100:"u"==t?globalBrightness:e.brelsUserBrightness,e.brelsContrast="g"==t?100:"u"==t?globalContrast:e.brelsUserContrast,applyFilter(e,!0)}function globalToggleLuminosity(){globalToggle=!globalToggle,brelsOverlays.forEach(function(e){var t=e.brelsOverlayedImage;e.childNodes[5].style.color=globalToggle?"black":"red",t.brelsBrightness=globalToggle?t.brelsUserBrightness:100,t.brelsContrast=globalToggle?t.brelsUserContrast:100,applyFilter(t,!1)})}function styleControl(e){e.style.display="inline-block",e.style.fontWeight="bolder",e.style.fontSize="14px",e.style.borderStyle="solid",e.style.borderWidth="1px",e.style.borderColor="black",e.style.backgroundColor="white",e.style.color="black",e.style.width="16px",e.style.textAlign="center",e.style.top="0px",e.style.left="0px",e.addEventListener("click",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("dblclick",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("mousedown",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("mouseup",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("mouseenter",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("mouseleave",function(e){e.stopPropagation(),e.preventDefault()}),e.addEventListener("mousemove",function(e){e.stopPropagation(),e.preventDefault()})}var brelsOverlays=[];function createOverlay(t){var e=t.clientWidth*t.clientHeight,l=t.clientWidth/(t.clientHeight+1);if(1e4< e&&.2<=l&&l<=5&&!t.brelsOverlay){var n,r,s,o,a,i;n=document.createElement("div"),brelsOverlays.push(n),n.id="brelsOverlay"+brelsOverlays.length,n.style.display="none",n.style.position="absolute",n.style.zIndex=10002,n.style.top="0px",n.style.left="0px",n.brelsOverlayedImage=t,(r=document.createElement("span")).title="Increase brigthness",r.style.cursor="zoom-in",r.innerHTML="☼",styleControl(r),r.addEventListener("click",function(e){changeBrightness(t,1),e.stopPropagation(),e.preventDefault()}),(s=document.createElement("span")).title="Decrease brightness",s.style.cursor="zoom-out",s.innerHTML="☀",styleControl(s),s.addEventListener("click",function(e){changeBrightness(t,-1),e.stopPropagation(),e.preventDefault()}),(o=document.createElement("span")).title="Increase contrast",o.style.cursor="zoom-in",o.innerHTML="🌕",styleControl(o),o.addEventListener("click",function(e){changeContrast(t,1),e.stopPropagation(),e.preventDefault()}),(a=document.createElement("span")).title="Decrease contranst",a.style.cursor="zoom-out",a.innerHTML="🌙",styleControl(a),a.addEventListener("click",function(e){changeContrast(t,-1),e.stopPropagation(),e.preventDefault()}),toggler=document.createElement("span"),toggler.title="Toggles between enhanced, default and user adjustments",toggler.innerHTML="💡",styleControl(toggler),toggler.style.color="yellow",toggler.style.cursor="default",toggler.addEventListener("click",function(e){toggleLuminosity(t),e.stopPropagation(),e.preventDefault()});var g=document.createElement("span");g.innerHTML="🚨",g.title="Globally turns adjustments on/off",styleControl(g),g.style.color=globalToggle?"black":"red",g.style.cursor="default",g.addEventListener("click",function(e){globalToggleLuminosity(),e.stopPropagation(),e.preventDefault()}),styleControl(i=document.createElement("span")),i.style.width="auto",i.style.display="none",i.style.position="absolute",i.style.marginLeft="100px",i.style.overflow="visible",i.brelsNotified=t,n.appendChild(r),n.appendChild(s),n.appendChild(o),n.appendChild(a),n.appendChild(toggler),n.appendChild(g),n.appendChild(i),t.brelsOverlay=n,t.setAttribute("brelsOverlay",n.id),t.brelsBrightness=globalBrightness,t.brelsContrast=globalContrast,t.brelsUserBrightness=globalBrightness,t.brelsUserContrast=globalContrast,t.brelsNotifier=i,applyFilter(t,!1),t.addEventListener("mouseenter",function(e){e.target.brelsOverlay.style.display="inline-block",e.stopPropagation(),e.preventDefault()}),t.addEventListener("mouseleave",function(e){e.target.brelsOverlay.contains(e.relatedTarget)||(e.target.brelsOverlay.style.display="none"),e.stopPropagation(),e.preventDefault()}),t.parentElement.brelsHasOverlay=!0,t.parentElement.insertBefore(n,t)}}function brelsLuminosityOverlays(){var e=Array.from(document.getElementsByTagName("img")).concat(Array.from(document.getElementsByTagName("video"))).concat(Array.from(document.getElementsByTagName("canvas"))),t=document.evaluate("//div[contains(@style, 'background-image')]",document,null,XPathResult.ANY_TYPE,null),l=null;do{try{(l=t.iterateNext())&&e.push(l)}catch(e){}}while(l);e.forEach(function(e){createOverlay(e)}),setTimeout(function(){brelsLuminosityOverlays()},100)}brelsLuminosityOverlays();

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