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
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.
Take a short javascript script and put it into a bookmarklet.
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!
To make a bookmarklet we have three steps:
- Write some javascript code that you want in a bookmarklet (using the console)
- Put
javascript:
in front of the code - 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");
})();
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 :)
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:
- Save a copy of the bookmarklet in a text file on your computer (and in github!)
- 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.)
- Bookmarklets - Browser Power - the most thorough guide I've found
- Bit.ly Bookmarklet
- [short explanation](- https://www.mattcutts.com/blog/javascript-bookmarklet-basics/)
- SquareFree Collection of useful Bookmarklets
- Pocket Bookmarklet
@ianchanning Some browsers will store your bookmarklet encoded by default for example %20 instead of a space and others do not. The less useless space the somewhat more readable the code is in my opinion. In the past there has been a real limit to bookmarklets due to character counts allowed by browsers. For the most part the character limits are pretty high and you shouldn't need to worry about it unless you are building a large bookmarklet or your bookmarklet might grow to be large. I always minify my bookmarklets using https://make-bookmarklets.com to always start off as small as possible so I have plenty of room to grow. Minifying you can run into issues where the minifier will use specific characters because it reduces the character count but it might place some special characters in a position where the browser will invalidate the url. Characters like ? and & have a specific function and if they are not handled correctly your bookmarklet will not work.
Ultimately it is up to you and what you decide is ideal and how you would like to continue to work on your bookmarklets :)
Cool bookmarklet by the way. Looks like it will be very helpful! Also, nice work documenting your learnings. I wish I did that more often when I make things. Bookmarklets in particular you run into so many weird situations a lot of the time it can translate directly into application development or learning how browsers work in a deeper way.
Here is an example of how I like to keep my bookmarklets editable yet shareable and even versioned. https://gist.github.com/Blumed/47b10fb4dccc2cb430c679868d2a9e0e
Hope you find this helpful :)
https://www.google.com/search?q=url+character+limits+of+various+browsers&oq=url+character+limits+of+various+browsers&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRigAdIBCTEzNTgxajBqMagCALACAA&sourceid=chrome&ie=UTF-8