mrcoles / bookmarklet Goto Github PK

A server-side bookmarklet compiler with greasemonkey userscript-like metadata options and the power of babel and uglify

Home Page: https://www.npmjs.com/package/bookmarklet

License: MIT License

JavaScript 94.27% Shell 5.73%

bookmarklet's Introduction

Bookmarklet: sane development, familiar format

Bookmarklet is a nodejs module for compiling bookmarklets in server-side code and directly from the shell. You can run it on any JavaScript file—it will minify it using uglify-js, wrap it in a self executing function, and return an escaped bookmarklet.

More so, it supports a metadata block—modeled after the greasemonkey userscript metadata block—to specify metadata, external stylesheets and script includes, which can look like this:

// ==Bookmarklet==
// @name LoveGames
// @author Old Gregg
// @style !loadOnce https://mrcoles.com/media/css/silly.css
// @script https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// ==/Bookmarklet==

Most notably, you can specify any external scripts that you’d like your bookmarklet to include via the @script rule, which can be repeated as many times as you’d like.

NOTE: currently with script includes you have to handle noConflict scenarios yourself, e.g., you might want to start off a script with var $ = jQuery.noConflict(true).

In addition, any css files included with @style will be injected.

By default, every time the bookmark is hit, it will add the script and style tags again. You customize each one per line by adding a !loadOnce declaration between the @style or @script param and the path for the asset. See the example above.

As of v1.0.0, this now uses Babel with the present "env" to make the code backwards compatible before minifying it.

This project is open to suggestions & pull requests.

Also, if you’re just looking for a quick way to throw together a bookmarklet, try my browser-based bookmarklet creator.

Installation

The dependency can be found on NPM as “bookmarklet”. You can install it with:

npm install bookmarklet

Usage

You can easily see usage by running bookmarklet -h:

> bookmarklet -h
Bookmarklet v0.0.1 usage: bookmarklet [-d | --demo] source [destination]

-d | --demo - output a demo HTML page for sharing the bookmarklet
source      - path to file to read from or `-` for stdin
destination - path to file to write to

The default output is the raw bookmarlet code. NEW add the --demo flag to output a test HTML page that includes the bookmarklet on it.

Testing

A very basic test script can be run via bash test/run.sh

bookmarklet's People

Contributors

Stargazers

Watchers

bookmarklet's Issues

-d option no longer documented in help (plus a typo)

The README in this repo shows that there's a -d option to make a demo page, which is neat. However, when running bookmarklet -h in the terminal, this isn't document. Also there's a spurious ' in the output, after "stdout".

Just found this tool and it looks really helpful, thanks :-).

ReferenceError: regeneratorRuntime is not defined

Hi, when I try to use this it says that the regeneratorRuntime is not defined.
A quick google shows that it's missing the Babel polyfill.

adding it via @script does not work.
only loading it prior to executing the bookmarklet works.

maybe make Babel toggleable with a command line flag?

Low contrast in generated demo page

The feature that generates a demo page is a real time-saver. However, the styling makes the button and the link have very low contrast. The contrast ratio between the white and cyan is just 1.63:1. Depending on screen, environment and visual acuity, it will be hard for some people to see.

The Web Content Accessibility Guidelines (level AA) recommend at least a 3:1 contrast ratio for meaningful graphical elements (i.e. to help people identify the button against its background) and 4.5:1 for text (for the button's label, and the link)—though if the text is considered large this drops to 3:1.

There are some examples of how to improve non-text contrast on W3C's site.

If you're interested, I'd be happy to submit a PR that addresses the contrast issues. Here are two different possibilities...

Simply use a darker colour than the cyan both for the button's background and link text.
Use a darker colour for the link text, keep the cyan for the button's background, but use a darker colour for the button's text and add border.

Further, if you try tabbing through the page, the focus indication is very slight too, because it is using the browser's default, and in some browsers this means it's the same light cyan colour, and quite thin, so is also hard to see. (You can use CSS outline-offset to create a border between the focus outline and the button/link, to make it easier to meet contrast requirements.)

Possibility to `@script` as `type=module`

Would be awesome to be able to load external scripts as ecma script modules to do import statements inside the bookmarklets.

Not working on Windows 10

When using this with any code (including running test/run.sh) I am getting the following in the output file:

javascript:(function()%7BNaN%7D)()

Does this ensure scripts are loaded one after the other?

Hello, can I rely on the generated bookmarklet to load the scripts in sequence, or is the order of loading random?

js-core dependency complains that it needs to be upgraded to js-core 3

When installing the bookmarklet module NPM warns us that the js-core < 3 has a number of issues and should not be used.

EDIT: Confirmed that this is an issue of babel-core and babel-preset-env. There seems to be an outstanding PR to upgrade to a newer version of babel. Possible fix for this?

ReferenceError: regeneratorRuntime is not defined SOLVED

I am posting for the next unfortunate one who is hoping to find a solution for the regeneratorRuntime issue.
I could be persuaded to submit a PR, but it appears the author has abandoned this project so there is no incentive there.

Here is what I did.

cloned the project
removed all babel dependencies from package.json and code.
replaced "uglify-js" with "terser"
Here is the function that you have to change.
function minify(code) { return terser.minify(code).code; }

ta-dah. No more questionably useful babel transpilations.

'\w' gets transpiled to 'w'

Source:

console.log('\w');

Expected result:

console.log('\w');

Actual result:

console.log('w');

Thanks & greetings!

Class Fields not supported by babel in bookemarklet

I wrote a bookmarklet using ES6 Classes and used class fields in my code. babylon is throwing an error, because, it seems that class fields aren't supported in babel preset env.
bablylonError.txt

Demo page customization

Hi. Awesome job - I used to have to do all that work manually. I haven't been so excited to find a new package like this in months! :)

Have you considered making the demo page customizable? For the sake of simplicity, a key in package.json would be enough.
Being able to provide a name for the bookmarklet to show instead of 'Bookmarklet; would be a great start.
Pointing to a HTML page template would be even better.

I could help out with that.

No LICENSE file

Please can you add a LICENSE file to this project. package.json says it is has an MIT license - it would be good to add the text of that to the project to make it clear.

Allow to provide minifier (Terser) options

Hi, I have some scripts use return on top level thus can't be converted.

Then I find we can tell Terser to enable bare_returns to accept it.
https://github.com/terser/terser#parse-options

Would it be good to add a CLI option like --minify to delegate to Terser?

I am willing to prepare a PR, maybe introduce yargs to help handling the options.