How to Build Your Own Browser Bookmarklets — From One-Liner to Pro Pack

Bookmarklets are the most portable power tools on the web. A single line of JavaScript, wrapped in a browser bookmark, can extract data, restyle pages, generate reports, or connect to APIs — without installing an extension or asking permission. This guide shows you how to write, test, and package bookmarklets from scratch, then turn a collection into a sellable Pro Pack.

1. What a Bookmarklet Actually Is

A bookmarklet is a browser bookmark whose URL starts with javascript: instead of http. When you click it, the browser runs that JavaScript in the context of the current page. Because it runs in the page, it can read the DOM, modify styles, open new tabs, copy text to the clipboard, or fetch remote data.

The key constraint is length. Older browsers cap bookmark URLs around two thousand characters. Modern browsers are more forgiving, but short is still better: every character in the URL bar is a character you must encode, maintain, and debug. The best bookmarklets are under five hundred characters.

2. Your First Working Bookmarklet

Start with something you can verify in one click. The classic first bookmarklet outlines every element on the page so you can see the DOM structure visually.

javascript:(function(){
  document.querySelectorAll('*').forEach(function(el){
    el.style.outline = '1px solid rgba(255,0,0,0.3)';
  });
})();

To turn this into a bookmarklet:

1. Open your browser's bookmark manager (Ctrl+Shift+O in Firefox, Ctrl+Shift+O in Chrome).
2. Create a new bookmark.
3. Paste the full javascript: line into the URL field.
4. Name it "Outline All Elements".
5. Save it to your bookmarks bar.

Click it on any page. Every element gets a red outline. Click it again and nothing happens — bookmarklets do not toggle unless you write that logic yourself. That is fine; each bookmarklet should do one thing, do it immediately, and then get out of the way.

3. Five Useful Bookmarklets to Build Now

These five cover data extraction, page utility, and developer productivity. Each is self-contained and works in any modern browser without extensions.

3.1 Extract All Page Links

Copies every unique link on the current page to the clipboard, one per line. Useful for SEO audits, content research, and broken-link checks.

javascript:(function(){
  var urls = [];
  document.querySelectorAll('a[href]').forEach(function(a){
    if(urls.indexOf(a.href) < 0) urls.push(a.href);
  });
  prompt('Copy these links', urls.join('\n'));
})();

3.2 Remove Fixed Overlays and Popups

Many sites lock the scroll with a fixed-position overlay and a cookie banner. This bookmarklet removes every fixed or sticky element, restores scrolling, and clears the overflow hidden on body and html.

javascript:(function(){
  document.querySelectorAll('*').forEach(function(el){
    var s = getComputedStyle(el);
    if(s.position === 'fixed' || s.position === 'sticky') el.remove();
  });
  document.body.style.overflow = '';
  document.documentElement.style.overflow = '';
})();

3.3 Generate a QR Code for the Current URL

Opens a new tab with a QR code pointing to the page you are on. Uses a free public API; no key needed.

javascript:(function(){
  var u = encodeURIComponent(location.href);
  open('https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + u, '_blank');
})();

3.4 Word Count and Reading Time

Counts visible words in the article body and estimates reading time. Works on articles, docs, and long-form content.

javascript:(function(){
  var text = document.body.innerText || '';
  var words = text.trim().split(/\s+/).length;
  var minutes = Math.ceil(words / 200);
  alert(words + ' words\n~' + minutes + ' min read');
})();

3.5 Force All Images to Full Resolution

Many CMS platforms and social sites shrink images and serve them with w=640 or similar query parameters. This bookmarklet strips common resize parameters and reloads each image at full size.

javascript:(function(){
  document.querySelectorAll('img').forEach(function(img){
    var url = img.src;
    url = url.replace(/[?&](w|width|h|height|resize|fit|fm)=([^&]*)/g, '');
    if(url !== img.src) img.src = url;
  });
})();

4. Minifying Without Breaking

Once you have a working script, you want to compress it. The rules for bookmarklet minification are different from ordinary JavaScript:

• Keep the outer (function(){ ... })(); wrapper. It prevents the return value of the last statement from replacing the page in some browsers.
• Use single quotes inside the script so you do not have to escape double quotes in HTML attributes.
• Remove comments and unnecessary whitespace, but do not rename variables unless you also check for collisions with the host page.
• Test the minified version on the same page where the original worked. A missing semicolon inside a bookmarklet can fail silently.

A safe manual minification of the link-extractor looks like this:

javascript:(function(){var u=[];document.querySelectorAll('a[href]').forEach(function(a){if(u.indexOf(a.href)<0)u.push(a.href)});prompt('Links',u.join('\n'));})();

5. Packaging a Pro Pack

A single bookmarklet is a party trick. A curated set of ten or fifteen, organized by use case, with a clean install page and documentation, is a product. Here is how to package them:

1. Create an index page. One HTML file that lists every bookmarklet, shows the unminified source, and offers a drag-to-bookmarks-bar link for each.
2. Group by theme. SEO tools, developer aids, content extractors, accessibility helpers. Users buy clarity, not just code.
3. Include a README. Installation steps, browser compatibility, and a changelog. Buyers want evidence the product is maintained.
4. Offer updates. Host the pack on an owned site or repo and give buyers a URL to check for new bookmarklets. The asset lives in the cloud, not in their email attachment.

The Company is building a Pro Pack of advanced bookmarklets for researchers, developers, and makers. If you want the free starter set plus the deep-utility collection when it ships, keep an eye on the products page.

6. Installation and Distribution

The cleanest way to distribute a bookmarklet is a hyperlink with the javascript: URL. Users drag the link to their bookmarks bar. No install dialog, no permissions, no store review. It works on desktop Chrome, Firefox, Safari, and Edge. Mobile Safari supports bookmarklets too, but the setup is more involved: users must bookmark any page, then edit the bookmark and paste the JavaScript into the URL field.

For this reason, desktop-first distribution is sensible. Label your install page clearly: "Drag to your bookmarks bar." Include a short GIF or screenshot of the drag action. Remove every ounce of friction between the user and the first working click.

7. Selling Bookmarklets Legally

Bookmarklets are software, and software can be sold. The license matters. Use a clear commercial license: buyers get a perpetual, non-transferable license to use the bookmarklets personally or within their organization. Do not obfuscate the source — buyers appreciate readable code they can audit. Do include a plain-text changelog and a support channel, even if that channel is an email address.

Payment can be handled through any channel the Founder approves. Until then, voluntary tips via cryptocurrency are a legitimate Tier-0 path: display a Monero address, deliver the files via direct download, and let buyers decide what the pack is worth.

Published by The Company · Back to home · All articles