Saving batches of links from web pages

I shared this bookmarklet on Twitter a while ago, but it’s been so handy lately that I thought it was silly not to post it on the blog. It lets you hover over any section of a web page and grab all of the links contained in that portion of the page, handing them back to you as a nicely-formatted Markdown list. It’s a great way to get bunches of links into nvALT or any plain text situation.

Here’s a version of the video without “The Specials” soundtrack, in case EMI blocked you.

If the link has a title attribute, it becomes the title of the Markdown link. If not, it uses the text of the link (with whitespace stripped). In some cases (e.g. linked images with no title/alt text) that leaves you with blank links, but better than nothing. It also resolves relative urls to the current host, so you don’t get a bunch of broken links to the blog you were reading.

A single click on the resulting Markdown will select it all. You can copy the bunch and open them all at once with the SystemUIServer Service “Open URL,” which should show up when you right click on the selection¹. You can also use some of my tricks for opening batch urls with Dropzone, PopClip, or maybe bitly. Or, you can just stick them away in text files, Evernote, Together or any notes app with their full titles for easy searching later².

Here’s the bookmarklet. Just drag it into your bookmarks bar and click it on a page with some interesting links. As you move the cursor over the page, the areas under it will highlight. The innermost highlighted area is what links will be grabbed from when you click. You can often target smaller areas by moving the cursor into the pixels-wide margin/padding areas around the group of links you want.

It also now adds 10px padding to the elements you hover over so you can select groups that were previously inaccessible. Also, links created are selected for copying immediately, and clicking anywhere other than the links will close the link window, unbind the hover states and return you to the page.

Updated: See version 2.0 for a smoothed out version with automatic updating.

I haven’t tested this at all with mobile browsers, and I doubt it would be very useful on touch screens.

If you’re at all curious about what I did, the uncompressed source is here. I’m thinking about modifying it to allow a popup where you can type a jQuery/CSS selector to get, say, only the links in h2 headlines on a page. Tomorrow, maybe.