chriszarate/bookmarkleter

You have JavaScript. You need a bookmarklet. This does that.

bookmarkleter's Issues

BUG: new 'Mangle variables to reduce code size' no longer does ANY minifying/mangling within IIFE

With both of these checkboxes selected...
[x] Wrap in an IIFE (anonymizing function).
[x] Mangle variables to reduce code size. (formerly called "Minify code using Babel Minify."

...there seems to be a regressive bug introduced by today's update.

Test case:

  var key = "href";
  var foo = location[key];
  var bar = foo + "#";
  foo += "?";
  console.log(bar);;;

Result from newly-updated version @ https://chriszarate.github.io/bookmarkleter/

javascript:void function () {var key="href",foo=location.href,bar=foo+"#";foo+="?",console.log(bar);}();

Compare to result from previous version e.g. https://alanhogan.github.io/bookmarkleter/

javascript:void function(){var a=location.href,b=a+"#";a+="?",console.log(b)}();

jQuery appended out of block scope

when using jQuery, the append into the header happens out of block scope, needs to be moved up one line:

!function($) {
    var loadBookmarklet = function($) {
        /* user script here */
    };
    if ($ && $.fn && parseFloat($.fn.jquery) >= 1.7)
        loadBookmarklet($);
    else {
        var s = document.createElement("script");
        s.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js",
        s.onload = s.onreadystatechange = function() {
            var state = this.readyState;
            state && "loaded" !== state && "complete" !== state || loadBookmarklet(jQuery.noConflict())
        }
    }
    document.getElementsByTagName("head")[0].appendChild(s) /* needs to be moved up one line */
}(window.jQuery);

updated to allow for the latest additions to ES6 (Feb.2023)

To quote someone else's comment elsewhere in this repo, "It is Really The Best Bookmarklet Maker I found!"

So, pretty please -- similar to what you did in Issue #19 -- can this EXCELLENT tool be updated to allow for the latest additions to ES6? Things like...

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment

etc.

Thanks in advance @chriszarate ! I am willing to "buy you a coffee" or equivalent, that's how much many of us appreciate this perfect-UI tool.

PS: Also perhaps let the repo have all of the source files used to build the end result too (if not typically included there already -- I'm relatively new to the whole Node package.json etc. rabbit hole so... 🤷‍♂️)

CLI

Add a command-line interface.

question/joke

how do i make it a bookmarklet

tools to unwrap iife?

npm build embeds project directory in generated source

To reproduce:

• rm -r build
• npm run-script build

The build directory should not end up in the final program since it is irrelevant for the functionality and also reveals unnecessary details about the build environment.

Awesome project - thank you

No issue here - just wanted to say thanks for building this!

I've recently found myself wanting to create more bookmarklets for various tasks, and this makes it a breeze.

Generated bookmarklets don't work in Firefox

I assume that this is a Firefox-only problem, but I didn't actually test this in other browsers.

Currently the generated bookmarklet looks like this:

javascript:!function(){...}()

The result of this expression will be either false or true, depending on the return value of the function. Since the result isn't undefined Firefox will replace the contents of the current page with the text false or true which isn't usually desired. A simple change to the generated bookmarklet fixes this:

javascript:void function(){...}()

There is the same issue if "Wrap in an IIFE" isn't checked - normally adding void 0 to the end of the bookmarklet would work but UglifyJS removes it.

Add "Optional Chaining" (now implemented in Chrome)

With your https://chriszarate.github.io/bookmarkleter/, I always have to put Off all my ?. in original codes before I find where to put them back in the result. Else, I'm getting anunknown: Support for the experimental syntax 'optionalChaining' isn't currently enabledand No result because of this error.

I use your Bookmarkleter - a bit customized through Tampermonkey - to help me build our HTML page of Chrome bookmarklets. It is Really The Best Bookmarklet Maker I found!

500KB JavaScript, WOW!

https://github.com/JavaScript-Packer/24KB-Uglify.js is a link to my highly modded/fixed, minified and compressed version of Uglify that is only 24KB, maybe you can help me spread it's use... This could help you remake your marklet app in less than 30KB versus 475KB it is now.

It is the heart of www.scriptcompress.com and so far gets better results than most other minifiers. Use Google Closure compiler first and this fuglify will still make it smaller!

It's easy to use, max settings are set already and just one function to call:

var code = 'alert("Your Code");';
var minified = fugly(code);

ES6 Support

Since uglify depends on ES5 code, the web utility makes it impossible for me to create a bookmarklet from ES6 code.

@chriszarate I'm curious about how this would go about being patched. I have a couple ideas:

1. Continue using Uglify, and run the code to be transformed through a compiler like Babel in the bookmarkleter library.
2. Optionally allow code to be parsed by Babel in the browser tool so that ES6 can work.
3. Pick a different minifier, such as Babili, to process minification. This will allow ES6 to work out of the box.

I'd be willing to implement this, but I wanted to get your feedback before I do any serious work.

UglifyJS v1 provides less compression than UglifyJS v2

To diagnose an issue with SGP, I used UglifyJS2 via UglifyJS-online (site here) to recompress a prettified version of SGP.

SuperGenPass's bookmarklet size on supergenpass.com: 4633 bytes.
bookmarkleter with UglifyJS: 3432 bytes.
UglifyJS2 compression: 2985 bytes.

incorrect label

index.html line 177
<label id="InputLabel" for="Input">JavaScript</label>
The label's for attribute doesn't match any element id.

Great update, but now DEFAULT minifying no longer happens

          Thanks so much for the updates! I confirmed things like foo?.bar or foo??bar now work.

Except it seems tonnow be broken; the DEFAULT minifying no longer happens (AKA if you uncheck all boxes, where you want to minify but not run Babel transform to convert to older code)

Originally posted by @DarrenSem in #27 (comment)

Anonymizing function doesn't work with prompt()

The anonymizing function doesn't play nice with internal Javascript functions like "prompt". After the code completes, the window is then evaluated/replaced to just show the string "true". Minimal test case:

val = prompt("What's your name?"); if (val) alert("Hello, "+val);

Which is being converted to the following code:

javascript:!function(){val=prompt("What's%20your%20name?"),val&&alert("Hello,%20"+val)}();

In my browser (Firefox 53.0.3 64-Bit), the window's contents change to "true" after the code completes.

The code with the following anonymizing function works as intended:

javascript:(function(){val=prompt("What's%20your%20name?"),val&&alert("Hello,%20"+val)})();

From my understanding, the highlighted issue is, that the output of the anonymizing function is being inverted and can evaluate to "true". Maybe an even better way would be to generally cast it to void:

javascript:void(function(){val=prompt("What's%20your%20name?"),val&&alert("Hello,%20"+val)})();

Can't deal with Unicode

In IE11, CJK ideographs are not escaped to Unicode codepoints, which cause problems when clicking on bookmarklet.

Babel Minify seems enabled regardless of checkbox

I entered the following JavaScript snippet:

var sel = document.getSelection();
if (sel === null || sel === undefined)
    sel = prompt('Suchbegriff:', '');
if (sel !== null && sel !== undefined && sel !== '')
    location.href = 'https://de.wikipedia.org/w/index.php?search=' + encodeURIComponent(sel);

The "Minify code" option was unchecked. The generated bookmarklet was:

javascript:void%20function(){var%20a=document.getSelection();(null===a||a===void%200)%26%26(a=prompt(%22Suchbegriff:%22,%22%22)),null!==a%26%26a!==void%200%26%26%22%22!==a%26%26(location.href=%22https://de.wikipedia.org/w/index.php%3Fsearch=%22+encodeURIComponent(a))}();

This pretty much looks like the result of a minifier. The result does not change when I check and uncheck the Babel checkbox.

BUG: "Wrap in an IIFE (anonymizing function)." fails if you end with // comment (should be easy fix)

Looks like the function wrapper code simply needs a carriage return before appending this string: "}();"

For example if my code is this:

var x;
var foo = bar?.baz ?? x;
//

I get this red box error:

unknown: Unexpected token (3:6) 1 | void function () {var x; 2 | var foo = bar?.baz ?? x; > 3 | //}(); | ^

Up until now, personally as a workaround I would just always add "[new line]/**/" to the end of my input

[\n]/**/

But obviously this shouldn't be needed; seems a simple-to-fix issue,
as it appears to be happening due to how the "void function () {" ... wrapper string closes.

I suspect all that is needed to fix is just appending "\n}();" instead of "}();" -- I will see if I can find the exact line myself and create a PR if possible.