jonashw/Bookmarklet-Maker.js

## Bookmarklet-Maker.js
// ==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 <2jonwilson@gmail.com>
// @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(`
            <html>
              <head>
                <title>Bookmarklet Maker</title>
                <style>
                    .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%;
                      }
                    }
                </style>
              </head>
              <body>
              <div class="container">
                  <h1 style="font-family: sans-serif">Bookmarklet Maker</h1>
                  <p>
                      Bookmarklet (drag-n-drop to your bookmarks bar): <span id="bookmarklet-container"></span>
                  </p>

                  <div style="display: flex; flex-direction: column; gap: 0.5em;">
                      <input id="title" placeholder="Title your bookmarklet..."/>
                      <textarea id="input" rows="20" placeholder="Paste JavaScript code here...">alert('hi')</textarea>
                      <div style="display:flex; gap: 0.25em;">
                          <input id="output" placeholder="...see Bookmarklet output here" style="flex-grow:1;" />
                          <button id="copy">Copy</button>
                      </div>
                      <button id="close">Close Window</button>
                      <p>
                          <a href="https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486">Source</a> &bull;
                          <a href="https://caiorss.github.io/bookmarklet-maker">Inspiration</a>
                      </p>
                  </div>
              </div>
              </body>
            </html>
        `);
        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();
        });
    }
})();
	// ==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 <2jonwilson@gmail.com>
	// @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(`
	<html>
	<head>
	<title>Bookmarklet Maker</title>
	<style>
	.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%;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1 style="font-family: sans-serif">Bookmarklet Maker</h1>
	<p>
	Bookmarklet (drag-n-drop to your bookmarks bar): <span id="bookmarklet-container"></span>
	</p>

	<div style="display: flex; flex-direction: column; gap: 0.5em;">
	<input id="title" placeholder="Title your bookmarklet..."/>
	<textarea id="input" rows="20" placeholder="Paste JavaScript code here...">alert('hi')</textarea>
	<div style="display:flex; gap: 0.25em;">
	<input id="output" placeholder="...see Bookmarklet output here" style="flex-grow:1;" />
	<button id="copy">Copy</button>
	</div>
	<button id="close">Close Window</button>
	<p>
	<a href="https://gist.github.com/jonashw/83be75a1cd63537259070a430395d486">Source</a> •
	<a href="https://caiorss.github.io/bookmarklet-maker">Inspiration</a>
	</p>
	</div>
	</div>
	</body>
	</html>
	`);
	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();
	});
	}
	})();
No results found