Creating Browser Bookmarklets


#1

Introduction

A bookmarklet is a browser bookmark that contains a JavaScript function. You can create buttons in your bookmark bar that add features to the browser and do things on the page by injecting JavaScript.

How to add a bookmarklet (Chrome)

Expand
  1. Right-click the bookmarks bar and click Add Page…

  1. Give it any Name you want. I usually prefer short names to avoid clutter.

  1. Copy the script into the URL field. It will always start with “javascript:” followed by an anonymous and self-invoking function.

  1. Save.

How to add a bookmarklet (Firefox)

Expand
  1. Right-click the bookmarks bar and click New Bookmark…

image

  1. Give it any Name you want. I usually prefer short names to avoid clutter.

  1. Copy the script into the URL field. It will always start with “javascript:” followed by an anonymous and self-invoking function.

  1. Click Add.

How to use a bookmarklet

Clicking the bookmark will execute the JavaScript code as if you had run it in the browser console, so your script will have access to the window object, any external libraries that might be already used on the page (e.g. jQuery), etc.

Keep in mind that most bookmarklets will be very specialized for a particular website and type of page. UI changes can easily break your scripts.

Examples

I originally published this as part of a response to the thread Screenshot/preview, but it’s something that I thought might be useful more generally, so I made a standalone thread.

Generate BBCode for a model

When used on a model page, this will prompt you to copy the BBCode for a model thumbnail image that links to the model page.

javascript:(function(){var thumbnailURL,thumbnailLinkBBCode,modelUID=window.location.pathname.replace("/models/",""),modelData=window.prefetchedData["/i/models/"+modelUID],modelURL=modelData.viewerUrl,modelName=modelData.name;modelData.thumbnails.images.every(function(e){if(1080==e.height)return thumbnailURL=e.url,!1}),thumbnailURL||(thumbnailURL=modelData.thumbnails.images[0].url),thumbnailLinkBBCode="[url="+modelURL+'][img alt="'+modelName+'" title="'+modelName+'"]'+thumbnailURL+"[/img][/url]",window.prompt("Thumbnail Link BBCode:",thumbnailLinkBBCode);}());

Open a Playlist of all the model cards currently visible

When used on a gallery page (e.g. a collection page, tag page, user profile ) this will open a new tab with a Playlist showing all the models.

javascript:(function(){var $=window.publicLibraries.$;var arr=[];var str='https://sketchfab.com/playlists/embed?models=';$('.items .item').each(function(){arr.push($(this).attr('data-uid'));});str+=arr.join('+');window.open(str,'_blank');}());

Screenshot/preview
Screenshot/preview