Welcome to
Make Bookmarklets

What are bookmarklets? Teeny tiny Javascript applications stored in a bookmark url. Clicking the bookmark will launch it, so you can customize and extend your browsing experience.

Why use a bookmarklet? From micro to macro task automation

Is there a Zoom url you constantly need to copy & paste for quick impromptu meetings? Use the clipboard API to copy the url to your clipboard with a simple click of a bookmark. Here is an Example.

Sites with Content Security Policies

A new security feature many large websites are implementing is called Content Security Policy (CSP). The reason CSP exists is to prevent Cross Site Scripting (XSS) attacks by blocking the execution of inline styles and scripts. So, bookmarklets won't run on these sites. The work around is browser extensions. Browser extensions work regardless of CSP for whatever reason. Seems like an odd hole, because you can create a local browser extension quickly which is not audited by the browser extension team. I am working on a Chrome extension that will allow you to add and organize your bookmarklets and fire them from there.

Global variable collision

If you use the window object to store variables in your bookmarklet it is possible that the site uses that variable name already. I recommend not using the window object to store objects, period. Keep your objects scoped to your bookmarklet and do your best to not let them leak.

Reactive elements

If your script manipulates existing dom elements, any site which uses Javascript frameworks or libraries like React may wipe your changes. This is because of the reactive nature of the virtual dom (vdom) which, depending on how components are made, might render and rerender quickly. This means the element you targeted has been destroyed and recreated, essentially causing your changes to stop working or disappear.

Bookmark drawer is not visible

Depending on what your bookmarklet is doing, there might be a requirement that the bookmark drawer below the search bar needs to be visible in order for it to execute properly. I ran into this when the bookmarklet I created wrote to the user's clipboard when they clicked the bookmarklet. It showed an error in the console and didn't run until I reenabled the bookmark drawer.

Chrome browser on Android devices

Bookmarks saved on desktop are accessible on your mobile devices. Clicking on your bookmarklet from the bookmark menu will not work. You need to access your bookmarklet through the search bar dropdown by typing the exact name of your bookmarklet in the search bar in order for it to execute.

Absolutely, as long as you understand what they are doing

Some basic common sense should be applied when using any old bookmarklet you find laying around on the internet. Make sure the site and source is credible. Always copy and paste them into an editor for safe reading. Be weary of bookmarklets that execute external scripts. If they do have external scripts generate a readable version so you can understand what it is doing. You can also skip all this and make your own 😊

There is nothing fancy about saving bookmarklets on a mobile device. It is a manual process.

1. Once you are done creating and testing your bookmarklet copy the script to your clipboard.
2. Favorite this page and then edit the bookmark in your browser settings.
3. Name it whatever you want then paste your script into the url field and once you're done click save.
4. 🎉 You did it 🎉