My bookmarklets

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: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].style.zIndex = 10001; } } var frames = document.getElementsByTagName("div"); for (i = 0; i < frames.length; i++) { if (frames[i].firstElementChild && (frames[i].firstElementChild.tagName == "IMG" || frames[i].firstElementChild.tagName == "VIDEO")) { var head = frames[i]; for (; head.parentNode && head.parentNode.tagName != "ARTICLE";) { head = head.parentNode; }   if (head==document) continue; var link = head.firstElementChild.brels ? head.firstElementChild : document.createElement("a"); if (frames[i].firstElementChild.brels!=true) { frames[i].firstElementChild.brels = true; frames[i].firstElementChild.controls = true; frames[i].firstElementChild.loop = false; frames[i].firstElementChild.muted = true; link.innerHTML = "Full resolution image (new tab)"; = "_blank"; = "blue"; = "underline";  link.brels=true;  if (link.parentElement) link.parentElement.removeChild(link);  head.insertBefore(link, head.firstElementChild); } frames[i] = 10000; frames[i].firstElementChild.position = "absolute"; link.href = frames[i].firstElementChild.src; } } setTimeout(function() { linker(); }, 500); } linker();

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

This script packed as a Chrome Extension. It also expands Twitter images to their original resolution. BRELS Chrome Extension v0.01 Download: 7zip (2.42 KB) or ZIP (3.22 KB). You must extract the directory inside the file and drag it into the chrome://extensions/ page.

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")) {[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="","&");for(i=0;i<s.length;i++) if (s[i].indexOf("v=")!=-1) {v=s[i];break;} location.href=""+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