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.

Bookmarklets are written like this:

javascript:(function(){ /* your code in here */ })();

That may look confusing, so lets break it down...

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://)

javascript:

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. :\

Anyways, we don't need to worry about readability as we can hide it all behind an `<a>` 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 `style.cssText`, simply putting in the css like it were inside the `style=''` 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 `id` 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. `encodeURIComponent()` takes the special characters and converts them into an browser format, then `btoa()` 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=='

Now it's time to put it all together. To bring the original back we will reverse the process, instead using the `atob()` function to convert base64 back into ascii. Then using `decodeURIComponent()` 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 `atob()` 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 `my_iframe`. 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!