Skip to content

Instantly share code, notes, and snippets.

@caseywatts
Last active September 25, 2024 19:45
Show Gist options
  • Save caseywatts/c0cec1f89ccdb8b469b1 to your computer and use it in GitHub Desktop.
Save caseywatts/c0cec1f89ccdb8b469b1 to your computer and use it in GitHub Desktop.
Making Bookmarklets

This is one chapter of my "Chrome Extension Workshops" tutorial, see the rest here: https://gist.github.com/caseywatts/8eec8ff974dee9f3b247

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

This guide will walk you through creating your first bookmarklet. For a more thorough guide check out the great website Bookmarklets - Browser Power.

Some bookmarklets are pretty cool. Become a spaceship that shoots and destroys elements on the webpage you're on with Kick Ass. Or make pages rainbow and sparkly with Cornify.

Goal

Take a short javascript script and put it into a bookmarklet.

Try One Out

Install this bookmarklet

Make a new bookmark in your browser (right-click on the bookmarks bar and click Add Page...)

  • For the "Name" you might put "Pinker".
  • Copy the code block below, paste this into the "Location" of a new bookmark.
javascript:(function(){document.body.style.background = 'pink';})();

Navigate to google and click the bookmarklet. Voila!

Let's Make Our Own!

To make a bookmarklet we have three steps:

  1. Write some javascript code that you want in a bookmarklet (using the console)
  2. Put javascript: in front of the code
  3. Wrap everything in an IIFE so the page doesn't freak out

Here is our cloud-to-butt function:

document.body.innerHTML = document.body.innerHTML.replace(/cloud/g, "butt").replace(/Cloud/g, "Butt");

Try just putting javascript: in front of it

javascript:document.body.innerHTML = document.body.innerHTML.replace(/cloud/g, "butt").replace(/Cloud/g, "Butt");

You can debug bookmarklets much faster if you use the Location bar - see "Quicker Debugging" below for caveats.

Partway there! The page did SOMETHING but it seemed to refresh and then the CSS/images didn't load! :(

We can get around this by putting this in an Immediately Invoked Functional Expression. You don't have to understand this completely to be a bookmarkleteer. Using an IIFE is one way to avoid having a return value, see Rules for Bookmarklets (Browser Power and Tips - Encapsulation (Browser Power).

Here are two example ways to write a standard IIFE:

(function(){})();
// or
function(){}();

Here's the general template I always use:

javascript:(function(){CONTENTGOESHERE})();

Try it with your cloud to butt code!

javascript:(function(){
  document.body.innerHTML = document.body.innerHTML.replace(/cloud/g, "butt").replace(/Cloud/g, "Butt");
})();

Quicker Debugging

Editing the bookmarklet "location" every time you have a code change can be tedious. You can save some time while debugging if you use the Location bar. If it works when you paste into the location bar, it should work as a saved bookmarklet.

Try pasting this:

javascript:(function(){
  document.body.innerHTML = document.body.innerHTML.replace(/cloud/g, "butt").replace(/Cloud/g, "Butt");
})();

You'll have to retype javascript: at the front of what you paste.

The trouble with the location bar is that it strips "javascript:" from the front of whatever you paste. This probably keeps most people safe from copy-pasting code from the internet willy nilly, but you're writing your own. Hopefully you trust yourself :)

Editing bookmarklets

When you save a bookmarklet, the browser will remove newlines. If you want to edit a bookmarklet it might be really ugly. You have at least two options:

  1. Save a copy of the bookmarklet in a text file on your computer (and in github!)
  2. Use a tool like JSBeautifier to make it look nice again. It will put in new lines, indentation, and syntax highlight for you. (but be careful! If you press back in your browser the code is lost. I recommend using this to beautify your code, then that you edit it in a text editor.)

References & More Resources

@DiegoFleitas
Copy link

Nice, I appreciate those resources. But i ended up here looking for a way to link my bookmarklet from my repository wiki, I guess using GitHub pages is part of the solution?

@decembre
Copy link

decembre commented Oct 29, 2017

I have a problem with CSP when i want use the Bloogmarks.net bookmarklet on Github:
javascript:var%20q='';var%20r='';if(document.selection)q=document.selection.createRange().text;else%20if(window.getSelection)q=window.getSelection();if(document.referrer)r=document.referrer;void(open('http://blogmarks.net/my/marks,new?mini=1'+'&title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&summary='+encodeURIComponent(q)+'&via='+encodeURIComponent(r),'blogmarks','location=no,toolbar=no,scrollbars=yes,width=350,height=450,status=no'));

What i need to do around that ?
PS:
It's the same on some others sites like AMO .

Sorry i am not coder , just curious how i can tweak some code...
I read :
Content Security Policy ( GitHub)
Bookmarklets Context Menu (GitHub):
This addon solve this CSP problem on Github but i need to authorize the Bloogmarks popup each time i want use it.
I don't know if it is a good idea to always authorize all popup for Github....

@KLVN
Copy link

KLVN commented Nov 7, 2017

@DiegoFleitas
I was also looking for a way to load a script from GitHub to keep bookmarklets small and ship automatic updates. At the moment I tried it with Pastebin by uploading my code and using the URL of the raw file (pastebin.com/raw/...). For GitHub you have to use raw.githubusercontent.com.

javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://pastebin.com/raw/...';})();

This is working for my project, but many site are disallowing this kind of script injection (see source below).

Source:
https://stackoverflow.com/a/106438/2153629

@KLVN
Copy link

KLVN commented Nov 10, 2017

@DiegoFleitas

It works using rawgit and gh-pages! Take a look at my repo: https://github.com/KLVN/MediasiteDownloader

@JadeGrey
Copy link

turn javascript into bookmarklet using https://caiorss.github.io/bookmarklet-maker/

@kingston1243
Copy link

hack are good

@kayla5055
Copy link

How do i cheat?

@Msteimel
Copy link

You had me at butt. It's my favorite test word.

@mcat-ee
Copy link

mcat-ee commented Jul 1, 2021

JSYK - the link to your Debugging Your Brain Book is broken!

Edit: fixed

@nicocasel
Copy link

@JadeGrey
Copy link

@Mulitbox
Copy link

Lel

@hariprasd
Copy link

I've done some simple but productive Bookmarklets, Check it out https://github.com/hariprasd/cool-bookmarklets

@weichensw
Copy link

weichensw commented Aug 30, 2022

I recommend this in browser tool: https://www.taosdev.com/bookmarklet-devkit

It has auto-complete and auto-formatting, semicolon uses modern conventions.

@Blumed
Copy link

Blumed commented Mar 6, 2023

Image

Hey everyone ✋ I designed and created a website for creating bookmarklets. It uses eslint running in the browser and has some JS validation for some basic guardrails. I provide a JS editor and wrap all your JS code in the needed bookmarklet executable code for you. I also minify and uglify your code as well so the bookmarklets you produce are as small as possible. Everything works great on mobile. I have made a few bookmarklets while waiting for my food to get done cooking during takeout orders.

Feel free to check it out 😃 https://make-bookmarklets.com.

@PlaceReporter99
Copy link

Banana!

@DiegoFleitas
Copy link

DiegoFleitas commented Jun 14, 2023

Banana!

Damn right brother 🍌

@OrangeThunderFire
Copy link

Can someone make a bookmarklet that deletes history for me I rlly need it

@DiegoFleitas
Copy link

Can someone make a bookmarklet that deletes history for me I rlly need it

No, there is a limit on what a bookmarklet can do. You are talking about modifying stuff on your browser & not the page you are browsing. AFAIK the only way you could do that is with a browser extension that talks directly to the browser & the thing you are searching for is likely to exists already on chrome web store etc

@OrangeThunderFire
Copy link

OrangeThunderFire commented Apr 1, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment