Dyota's blog

JavaScript bookmarklets

Bookmarklets!

I think bookmarklets are an amazing piece of (forgotten?) technology, and one that I rely on for some tasks.

More and more of our working software is now browser-based, and being able to tap into some JavaScript to give me a boost as work is just wonderful.

Some particulars about bookmarklets:

It all has to be in one line, and there are a lot of brackets involved in a bookmarklet. The JavaScript in bookmarklets have to be a function call, and you have to call it as you define it, which means that all your code needs to live inside here:

javascript:( function () { /* code goes here! */  } )()

Video playback speed

Sometimes, videos don't have speed controls. Or maybe the person you are watching speaks slow even for 2x speed, and you wish he'd just speak at 3.5x instead.

Throw this on your browser and play videos at any speed you want. Not that if you input nothing, it pauses the video (sets the speed to 0).

javascript:( function () { current = document.querySelectorAll('video')[0].playbackRate; rate = prompt(`Playback speed (currently ${current})`); document.querySelectorAll('video')[0].playbackRate = rate; } )()

Rename tab

It's always handy to be able to rename a tab, like when you have multiple tabs of the same website open.

javascript:(function (){document.title = prompt('New page title:', document.title)})();

Open a totally blank page

javascript: (function (){ window.open() })()

Set current document as clipboard

Recently, I've recently found myself needing to paste in HTML to preview that it looked like. This might be an output from Power Automate or something of the like.

What I used to do was open up Dev Tools, delete everything, and paste in the HTML I want to see. Why not just let the computer do that for me?

This bookmarklet will take whatever is on your clipboard and write it into the body of the current document. The head will be deleted.

javascript:( function () { navigator.clipboard.readText().then(text => { document.head.innerHTML = '';document.body.innerHTML = text;}).catch(err => {console.error('Failed to read clipboard contents: ', err);}); } )()

Power BI specific

These are some Power BI-specific bookmarklets that I use, specifically for use when editing audiences. I need to keep track of who belongs to what audiences, in a csv. So, I need to rip out all of the names in a given audience, and their email address as well.

(I don't use email distributions lists - which might help me, but I am not that good (yet)).

Audience names

This rips out all of the audience names, and stores it in the system clipboard as a list.

javascript:(function (){var array=Array.from(document.querySelectorAll('.user-name')).map(e => e.innerText).join('\n'); navigator.clipboard.writeText(array);})();

Audience emails

This ripes out all of the audience emails, and stores in the system clipboard. The order will be the same as the names, as per the script above.

javascript:(function (){var array=Array.from(document.querySelectorAll('.user-email')).map(e => e.innerText).join('\n'); navigator.clipboard.writeText(array);})();

#javascript #web