What are 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.

Why do bookmarklets stop working on specific sites?

Sites with Content Security Policies Global variable collision Reactive elements Bookmark drawer is not visible (On some browsers)

Are Bookmarklets Safe?

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

How to save bookmarklets on mobile?

There is nothing fancy about saving bookmarklets on a mobile device. It is a manual process.: Once you are done creating and testing your bookmarklet copy the script to your clipboard. Favorite a page and then edit the bookmark in your browser settings. Name it whatever you want then paste your script into the url field and once you're done click save. You did it! Well done.

Welcome to
Make Bookmarklets

Features Include

All Javascript is wrapped in an Immediately Invoked Function Expression (IIFE) for you
Javascript linting
Multiline cursor
Javascript intellisense
Code is automatically minified and uglified
Works great on mobile devices

Loading editor...

Mind Expanded Illustration created by Thierry Fousse

Would you like to see some example bookmarklets to get the juices flowing?

Check out a few example bookmarklets to start from, or use them as a reference. The bookmarklets on this site are quick and simple to build. Small snippets are great for micro automatons but you can go to the moon as far as size and complexity.

Show Examples

Full webpage snapshot

Take a snapshot of your current webpage on any device and on any browser. Just a heads up, you will need to give the browser permission to do this action on your device.

const capture = async () => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    const video = document.createElement("video");
  
    try {
      const captureStream = await navigator.mediaDevices.getDisplayMedia();
      video.srcObject = captureStream;
      context.drawImage(video, 0, 0, window.width, window.height);
      const frame = canvas.toDataURL("image/png");
      captureStream.getTracks().forEach(track => track.stop());
      window.location.href = frame;
    } catch (err) {
      console.error('Full page screenshot bookmarklet did not work: ' + err);
    }
  };
  
  capture();

Sparkle Triangle Illustration created by Thierry Fousse

Want to create some UI? Sometimes you need a command center of buttons

Making dashboards in javascript is pretty straight forward. Yes, I know the code can be incredibly redundant. Having a display for data or buttons, which can interact with a webpage is pretty handy though.

Show Snippets

Basic UI Element

Here is a little tippy top banner with a close button. Purely using javascript to generate UI is easy to do. For organizational purposes, I recommend storing repeated styles and text in an object.

const container = document.createElement('div');
container.className = 'xxxxxx_wraper_xxxxx';
container.textContent = 'Give me some data, or maybe some buttons?';
container.styles = 'width: 100%;letter-spacing:1px;background-color:pink;text-align:right;font-family:helvetica !important;font-weight:100;padding-inline: 60px;color:#161613;margin:auto;top:0;right:0;left:0;position:fixed;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:center;line-height:36px;';
container.setAttribute('style', container.styles);
document.body.appendChild(container);

const close = document.createElement('button');
close.setAttribute('type', 'button');
close.className = 'xxxxxx_close_xxxxx';
close.textContent = 'x';
close.setAttribute('style', 'position:absolute;left:30px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
close.onclick = () => container.remove();
container.appendChild(close);

Dialog Box

Creating a dialog element and count headings displayed on the current page. This info is nice to know on the fly to double check you have an h1 on the page or if your heading counts look off.

const container = document.createElement('dialog');

function createDialog() {
  const close = document.createElement('button');

  container.setAttribute('style', 'width: 100%;letter-spacing:1px;background-color:pink;font-family:helvetica !important;font-weight:100;border-radius:12px;padding-inline:60px;color:#161613;border-color:#fff;position:fixed;inset:0;margin:auto;width:100%;max-width:400px;z-index:2147483647;font-size:18px;text-rendering:optimizeLegibility;text-align:left;line-height:36px;');
  
  close.setAttribute('style', 'position:absolute;right:10px;top:8px !important;background-color:white;border-radius:50%;color:black;z-index:30;padding:0  0 0 1px;font-size:15px;font-weight:100;width:20px;height:20px;cursor:pointer;display:flex;justify-content:center;align-items:flex-start;border:1px solid black;line-height:16px;');
  close.textContent = 'x';
  close.onclick = () => container.remove();
  
  document.body.appendChild(container);
  container.appendChild(close);

  createContent('h1');
  createContent('h2');
  createContent('h3');
  createContent('h4');
  createContent('h5');
  createContent('h6');
  container.showModal();
} 

function createContent(header) {
  const p = document.createElement('p');
  const strong = document.createElement('strong');
  
  strong.textContent = document.getElementsByTagName(header).length;
  
  p.textContent = header + ': ';
  
  container.appendChild(p);
  p.appendChild(strong);
}

createDialog();

Plans and Designs Illustration created by Thierry Fousse

Create a bookmarklet from a github gist. Keep your bookmarklets under control

Are you asking yourself why would I do this? No worries, I asked myself the same question when I first stumbled upon this feature. A common use case is keeping your bookmarklets version controlled. Another reason may be to keep url character count low. This allows you to create a static bookmarklet and the code it points to can update independently inside your gist.

Show Gist Menu

Frequently Asked Questions

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.