Last active
December 19, 2015 20:58
-
-
Save bennettmcelwee/6016539 to your computer and use it in GitHub Desktop.
Web page that can turn Javascript into a bookmarklet
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Bookmarkleteer</title> | |
| <script> | |
| /** | |
| * Bookmarklet Compiler | |
| * | |
| * Inspired by Moxley Stratton - http://www.moxleystratton.com/ | |
| */ | |
| function makeBookmarklet() { | |
| var source = document.getElementById('source').value; | |
| clearBookmarklets(); | |
| renderBookmarklet(makeUrl(source), "Bookmarklet (run the JavaScript)"); | |
| renderBookmarklet(makeNewWindowUrl(source), "New Window Bookmarklet (run the JavaScript and open a new window with the result)"); | |
| } | |
| function clearBookmarklets() { | |
| var container = document.getElementById('generated'); | |
| for (; 0 < container.childNodes.length; ) { | |
| container.removeChild(container.childNodes[0]); | |
| } | |
| } | |
| function renderBookmarklet(url, title) { | |
| var div = document.createElement('div'); | |
| div.appendChild(createLink(url, title)); | |
| var container = document.getElementById('generated'); | |
| container.appendChild(div); | |
| } | |
| function createLink(url, title) { | |
| var a = document.createElement('a'); | |
| a.href = url; | |
| var text = document.createTextNode(title || "Bookmarklet"); | |
| a.appendChild(text); | |
| return a; | |
| } | |
| // Logging | |
| function log(s) { | |
| var d = document.createElement('div'); | |
| var text = document.createTextNode(s.toString()); | |
| d.appendChild(text); | |
| document.getElementById('log').appendChild(d); | |
| } | |
| function clearLog() { | |
| var l = document.getElementById('log'); | |
| for (; 0 < l.childNodes.length; ) { | |
| l.removeChild(l.childNodes[0]); | |
| } | |
| } | |
| // Bookmarklet library | |
| // Turn JS code into a small single line of code | |
| function shrink(source) { | |
| return source | |
| .replace(/\r/g, '\n') // Normalise newlines for IE so multiline mode works | |
| .replace(/^\s\s*/gm, '').replace(/\s\s*$/gm, '') // Remove leading and trailing whitespace | |
| .replace(/\/\/.*$/gm, '') // Remove single line comments | |
| .replace(/\n/g, '') // Remove newlines | |
| .replace(/\/\*.*?\*\//g, '') // Remove multi-line comments | |
| ; | |
| } | |
| // Turn JS source code into a JavaScript URL that runs the source | |
| function makeUrl(source) { | |
| return "javascript:(function(){" + encodeURI(shrink(source)) + "})();"; | |
| } | |
| // Turn JS source into a JavaScript URL that opens a new window and runs the source | |
| function makeNewWindowUrl(source) { | |
| var windowSource = "document.write(" + source + ");document.close();"; | |
| var fullSource = "window.open(\"" + makeUrl(windowSource) + "\");"; | |
| return makeUrl(fullSource); | |
| } | |
| </script> | |
| <style> | |
| #log div { margin: 0.5em 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <p>Enter JavaScript.</p> | |
| <textarea id="source" style="height: 200px; width: 500px;"></textarea> | |
| <div> | |
| <button onclick="makeBookmarklet();">Make bookmarklet</button> | |
| </div> | |
| <div id="generated"></div> | |
| <div id="log"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I just bought bookmarkleteer.com and in googling to see if it existed I found this. I'm going to throw it up as a node site that allows linking to gists or including raw javascript.
Here's the process I'll probably use
Of course, it's the worst time to create something like this with all the new http security policy headers that disallow bookmarklets (Facebook and many other sites are already using them)... but it's a fun and simple project.