What's a bookmarklet?
Bookmarklets are small pieces of JavaScript code
that can be saved as bookmarks in your web browser.
When you click on a bookmarklet, the code is executed
on the current web page, allowing you to perform
various tasks and manipulate the content of the page.
Bookmarklet base
Bookmarklets are written like this:
javascript:(function(){ /* your code in here */ })();
That may look confusing, so lets break it down...
Breakdown
In order to convert the bookmark into a bookmarklet,
we need to tell the browser that we are running javascript.
we do this like you would a domain, (eg http:// or https://)
This is all you need for a bookmarklet, and in it's current
state you can run what ever you wan't. e.g.
javascript:alert("This is javascript running in an bookmark");
While this works, its a pretty far cry from what we're
using. This is due to compatability issues in longer
sections of code (which we use). In order to compat this,
you can slap it all in a function.
(function(){
alert("This is javascript running in an bookmark");
});
But wait! That doesn't work!
Thats because we never ran the function. It's just sitting
there, waiting, for someone, anyone, to run it. If we add
the brackets to run the it then we've got the completed script
in all its glory!
(function(){
alert("This is javascript running in an bookmark");
})();
Now I'm sure you've noticed how spread out this whole thing is.
This, however, isn't a problem as the bookmark will remove the
lines automatically, in the process making it really hard to
read. :\
Displaying it to the user
Anyways, we don't need to worry about readability as we can hide
it all behind an tag, the
name of which being what is displayed as the bookmark title.
<a href="#YOUR_CODE_HERE">YOUR TITLE</a>
This simply works as an styleable, clickable link that just like
websites, can be placed/dragged into the bookmark bar.
Putting together what we have so far, We've got an pretty useful
base. You can expand this with your own javascript an make an
very usful bookmarklet app.
<a href='(function(){alert("This is javascript running in an bookmark");})();'>Demo Alert</a>
Now you have a working bookmarklet, let's make it display something
cool!
Let's make it display an html page like an extension (for no reason
at all).
let iframe = document.createElement("iframe");
iframe.style.position = "fixed";
iframe.style.top = "10px";
iframe.style.right = "10px";
iframe.style.background = "#fff";
document.append(iframe);
This code is the officially supported way of adding conent to a web page
using JavaScript. This example creates an iframe, fixes it to the top
right of the page, gives it a background and adds it to the body. This
small peice of code already takes up alot of the available if you want to stay
compatible with older systems.
The major space horders is iframes content and the css for the iframe itself.
The easiest of these to improve is the css. We can use ,
simply putting in the css like it were inside the tag.
let iframe = document.createElement("iframe");
iframe.style.cssText="position: fixed; top: 10px; right: 10px; background: rgb(255, 255, 255);";
document.body.append(iframe);
Now we will give the iframe some content! In testing, I've found that while
this method should work for the HTML (iframe.contentDocument.body.append()
),
It has the same problem as before, taking up too much space per element. Instead,
you can get the element using it's and directly
modify its html.
let iframe = document.createElement("iframe");
iframe.id = "my_iframe";
iframe.style.cssText = "position: fixed; top: 10px; right: 10px; background: rgb(255, 255, 255);";
document.body.append(iframe);
document.getElementById("my_iframe").contentDocument.body.innerHTML += `<p>Content in my iframe</p>`
This works well, however it has a problem. You have to make sure you don't
use the character for JavaScript strings as it
will break everything. Special characters like
or may also pose issues. To circumvent this,
we can use url encoding and JavaScript's built in base64 functions.
takes the special characters
and converts them into an browser format, then
converts them to base64.
> encodeURIComponent(`<p>Content in my iframe</p>`);
'%3Cp%3EContent%20in%20my%20iframe%3C%2Fp%3E'
> btoa(`%3Cp%3EContent%20in%20my%20iframe%3C%2Fp%3E`);
'JTNDcCUzRUNvbnRlbnQlMjBpbiUyMG15JTIwaWZyYW1lJTNDJTJGcCUzRQ=='
Putting it all together
Now it's time to put it all together. To bring the original back we will reverse the
process, instead using the function to convert base64
back into ascii. Then using to get the
original html.
> atob(`JTNDcCUzRUNvbnRlbnQlMjBpbiUyMG15JTIwaWZyYW1lJTNDJTJGcCUzRQ==`);
'%3Cp%3EContent%20in%20my%20iframe%3C%2Fp%3E'
> decodeURIComponent(`%3Cp%3EContent%20in%20my%20iframe%3C%2Fp%3E`);
'<p>Content in my iframe</p>'
Now simply copy the function you created into the
bookmarklet we prepared earlier and...
javascript:(function(){
let iframe = document.createElement("iframe");
iframe.id = "my_iframe";
iframe.style.cssText = "position: fixed; top: 10px; right: 10px; background: rgb(255, 255, 255);";
document.body.append(iframe);
document.getElementById("my_iframe").contentDocument.body.innerHTML += decodeURIComponent(atob(`JTNDcCUzRUNvbnRlbnQlMjBpbiUyMG15JTIwaWZyYW1lJTNDJTJGcCUzRQ==`));
})();
Shoot! It displays properly, however now it doesn't go away! What we need is an
if statement that checks whether the iframe already exists or not, if it does, delete
it and if it doesn't, create it.
my_bookmarklet = document.getElementById('my_iframe');
if(my_bookmarklet){
my_bookmarklet.remove();
} else{
let iframe = document.createElement("iframe");
iframe.id = "my_iframe";
iframe.style.cssText = "position: fixed; top: 10px; right: 10px; background: rgb(255, 255, 255);";
document.body.append(iframe);
document.getElementById("my_iframe").contentDocument.body.innerHTML += decodeURIComponent(atob(`JTNDcCUzRUNvbnRlbnQlMjBpbiUyMG15JTIwaWZyYW1lJTNDJTJGcCUzRQ==`));
};
Ah, there we go. This piece of code simply trys to get .
If it can, it deletes it and if it can't, then it adds it. Now adding this to the original base,
we get the actual completed bookmarklet.
javascript:(function(){
my_bookmarklet = document.getElementById('my_iframe');
if(my_bookmarklet){
my_bookmarklet.remove();
} else{
let iframe = document.createElement("iframe");
iframe.id = "my_iframe";
iframe.style.cssText = "position: fixed; top: 10px; right: 10px; background: rgb(255, 255, 255);";
document.body.append(iframe);
document.getElementById("my_iframe").contentDocument.body.innerHTML += decodeURIComponent(atob(`JTNDcCUzRUNvbnRlbnQlMjBpbiUyMG15JTIwaWZyYW1lJTNDJTJGcCUzRQ==`));
};
})();
This still leaves lots to be desired:
- Only closes when you press the bookmarklet again
- No fancy animations
However it is a great starting point. If all of this was confusing,
don't worry! Our service allows you to forget about all this and stick
to the designing. Simply add your html, css and js into the web editor,
click save and copy your bookmarklet. Simple as that!