Bookmarklet: sane development, familiar format
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
@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.
The dependency can be found on NPM as “bookmarklet”. You can install it with:
npm install bookmarklet
You can easily see usage by running
> bookmarklet -hBookmarklet v0.0.1 usage: bookmarklet [-d | --demo] source [destination]-d | --demo - output a demo HTML page
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.
A very basic test script can be run via