Getting Youtube Timestamped URLs with a JavaScript Bookmarklet, for easy note-taking.

uxBrad
3 min readOct 31, 2021

I came across a post the other day where someone was surprised that you could put JavaScript into a bookmark and run it from on any page. They even asked what to call that type of thing. I was surprised. They’re called bookmarklets and they’ve saved me on numerous occasions.

For all you folks that don’t know, before the invention of chrome extensions and browser plugins, we used to cram JavaScript into browser bookmarks so that we could do things with the pages we were using. Years ago, I made a bookmarklet for copying tweets so that they could be embedded into my own blog — long before Twitter came up with embeddable tweets.

We don’t always need a massive permission grabbing chrome extension to add some extensibility to a page. Today I’m going to show you how I made one just last weekend to scratch an itch I’d been having. If you know a bit of JavaScript, you can come up with some pretty clever ways of interacting with the code on Other People’s Pages.

Taking notes on Youtube videos

I played around with Memetic for taking notes on Youtube videos but I always just ended up exporting those notes into Obsidian (my second brain) and I figured I could streamline the process. The most useful feature in Memetic was adding the timestamp (and link) to the notes I was taking.

Going from Memetic and into something more useful, like Obsidian, seemed like an unnecessary step when I would normally just take all my notes in Obsidian in the first place.

I needed to fix my process.

Youtube’s sharing URL

I figured that link would exist somewhere in the page on the video I was watching — I just needed to grab it and get it into obsidian. Youtube has a bit of UI that exposed that link, but I’m not opening that up, clicking a button, and copying it out every time. That does mean that information is in the code and I can work with that.

So I figured why not just try and make that myself — take notes directly in obsidian and hit a bookmarklet any time i needed the timestamp.

The Plan for the bookmarklet

--

--

uxBrad

I’m Brad Cooper — UX Practitioner. A11y Evangelist (CPACC). Blockchain Enthusiast. Web Theorist. Find out more on how I work at https://uxBrad.com.