How to do a bookmarklet with javascript
The day I discovered it, I was really happy. Not happy as a fish in water but maybe happy as a cat having its meal (though it enormously depends of which cat we are talking about). Talking about bookmarklet to some of my friends, I saw that there were a lot of incomprehension about it. So I’ll begin at the beginning.
What is a bookmarklet?
A bookmarklet is a chunk of javascript code that can be added as a bookmark in your browser. When you click the bookmark, the javascript is executed. This can do a lot of things.
- change the look of a page (changing the background to gray)
- Call a service from another page (post to del.icio.us)
- do something unuseful
To add a bookmarklet, simply drag the link into your bookmark toolbar.
Why does it work?
It works because when a page is loaded in the browser (the client), it has complete power over it. Using javascript, you can do whatever you want without being stopped by some kind of security. Isn’t it wonderful?
How to do a bookmarklet
1. Write some javascript that does something useful
2. Put it in a link with the command javascript: before it and void(0); (just to be safe) after it
3. Tell the people to drag the link in their bookmark toolbar
I have to say that the javascript code has to be less than 2083 characters, the limit of characters that enters in the address bar in Internet Explorer.
How to do a greater bookmarklet
You want to have a complex “application” executed on a page but you can’t do it in less than 2083 characters? As I said earlier, the client has the complete power over the currently displayed page so you can import javascript files in the current page.
This is the code of my bookmarklet.
var script = document.createElement("script");
script.src="http://www.javascript.com/!javascriptkata.js";
document.body.appendChild(script);
Now, take this link and drag it in your bookmark toolbar.
Done?
Now go on any web pages and click the bookmark.
It’s executed!
Now, let your creativity flow and make a great application.
Hey, this is great. I love the fact that you can include a js source file in the bookmarklet.
or you can use a tool like Technika to ease the bookmarklet development
http://www.gnucitizen.org/projects/technika/
[...] How to do a bookmarklet with JavaScript How do you execute a ‘complex’ app on a page utilizing less than 2083 characters (IE’s address bar limit)? Remember, the browser has complete control over a page so you can import JavaScript files into it (without being stopped by security)! (tags: Bookmarklets JavaScript Security) [...]
Or you can use this site:
http://www.jsquickmark.com/
Beautiful post!! Thank you for sharing!
For the folks that put crazy background images on their myspace/youtube pages, you can make the background white:
javascript:document.getElementsByTagName(’body’)[0].style.background=’#fff none’;void(0);
:))
Mistake on last comment! For Windows Firefox you
need double quotes for the strings! Put all of
the code below on _one_ line in the address
bar or a bookmark URL:
javascript:
document.getElementsByTagName(”body”)[0]
.style.background
= “#fff none”; void(0);