# Bookmarklet Maker
Canonical: https://social-archive.org/arc/JnpzGHNC9D
Original URL: https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486#file-bookmarklet-maker-js
Author: 262588213843476
Platform: web
Share mode: full
## Content
## /Bookmarklet-Maker.js Last active July 30, 2026 13:06 Show Gist options - [Download ZIP](https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486/archive/7513808b9f7965fed4555ed34c276bd30fcda384.zip) - [Star (2)](https://gist.github.com/login?return_to=https%3A%2F%2Fgist.github.com%2Fjonashw%2F83be75a1cd63537259070a430395d486) You must be signed in to star a gist - [Fork (0)](https://gist.github.com/login?return_to=https%3A%2F%2Fgist.github.com%2Fjonashw%2F83be75a1cd63537259070a430395d486) You must be signed in to fork a gist - Embed - Save jonashw/83be75a1cd63537259070a430395d486 to your computer and use it in GitHub Desktop. Save jonashw/83be75a1cd63537259070a430395d486 to your computer and use it in GitHub Desktop. [Download ZIP](https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486/archive/7513808b9f7965fed4555ed34c276bd30fcda384.zip) Bookmarklet Maker This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. [Learn more about bidirectional Unicode characters](https://github.co/hiddenchars) [Show hidden characters]({{ revealButtonHref }}) ``` // ==UserScript== // @name Bookmarklet Maker // @namespace http://tampermonkey.net/ // @version 2026-06-11 // @description A lean and mean JavaScript-only SPA that facilitates the creation of bookmarklets from JavaScript code. Inspiration: https://caiorss.github.io/bookmarklet-maker/. Fun fact! You can package this tool *as a bookmarklet* using the tool itself ;) // @author Jon Wilson // @source https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486 // @match https://*/* // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== // @grant none // ==/UserScript== /* Usage: Copy and paste this script into the JavaScript console and execute it. The code will open a new window with the SPA. */ (function openBookmarkletUI() { 'use strict'; openModalWindow(); function packageCodeAsBookmarklet(code){ const src = code.trim(); if(src.length === 0){ return ''; } return "javascript:" + encodeURIComponent("(function(){" + src + "})();"); } function openModalWindow() { const w = window.open('', '_blank'); w.document.write(` Bookmarklet Maker .container { /* mobile */ width: 100%; /* Default for small screens */ margin: 0 auto; /* Centers the container */ } @media (min-width: 768px) { /* tablet */ .container { width: 75%; } } @media (min-width: 1024px) { /* desktop */ .container { width: 66%; } } @media (min-width: 1200px) { /* desktop */ .container { width: 50%; } } Bookmarklet Maker Bookmarklet (drag-n-drop to your bookmarks bar): alert('hi') Copy Close Window Source • Inspiration `); const input = w.document.getElementById('input'); const output = w.document.getElementById('output'); const title = w.document.getElementById('title'); const bookmarkletContainer = w.document.getElementById('bookmarklet-container'); function outputBookmarklet() { bookmarkletContainer.replaceChildren(); const href = packageCodeAsBookmarklet(input.value); output.value = href; if(href){ const a = w.document.createElement('a'); a.href = href; a.innerText = title.value.trim() || "Bookmarklet"; a.style="background: rgb(0,0,238); color:white; padding: 4px 8px;"; w.console.log('bookmarklet packaged and placed in output control',href); bookmarkletContainer.appendChild(a); } else { bookmarkletContainer.innerText = '—'; } } outputBookmarklet(); input.addEventListener('change',outputBookmarklet); input.addEventListener('paste',outputBookmarklet); input.addEventListener('keyup',outputBookmarklet); title.addEventListener('change',outputBookmarklet); title.addEventListener('paste',outputBookmarklet); title.addEventListener('keyup',outputBookmarklet); input.addEventListener('focus',() => input.select()); title.addEventListener('focus',() => title.select()); output.addEventListener('focus',() => output.select()); const copyBtn = w.document.getElementById('copy'); copyBtn.addEventListener('click', () => { w.console.log(output.value); w.navigator.clipboard.writeText(output.value).then(e => w.console.log(e)); }); const closeBtn = w.document.getElementById('close'); closeBtn.addEventListener('click', () => { w.document.close(); w.close(); }); } })(); ```
## Media
1. image: https://social-archiver-api.social-archive.org/media/archives/arc/P26B4bpIDc/media/0.png