According to Wikipedia, a bookmarklet is a bookmark stored in a web browser that contains JavaScript commands to extend the browser's functionality.
Usually bookmarklets are created when the user drags and drops a
special anchor (<a>
) element into their bookmarks toolbar.
The anchor's href
attribute is set to javascript:<the code to execute>
.
This makes bookmarklets kind of irritating to maintain, since you have
to prepare URL-encoded JavaScript and add it to your
<a>
element every time you update the script.
This jQuery plugin loads your bookmarklet's JavaScript from an external file, and then augments an anchor element on your page with the appropriate url. It can also load JavaScript from a Gist via the GitHub API.
-
Include jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
-
Include plugin's code:
<script src="dist/jquery.bookmarklet.min.js"></script>
-
Add an anchor to your HTML:
<a id="element">My Bookmarklet</a>
-
Call the plugin:
$("#element").bookmarklet({ raw: "path/to/your/script.js" });
Or, point the plugin at a Gist:
$("#element").bookmarklet({ gist_id: "MY_GIST_ID" });
You must provide either the raw
or gist_id
option
to tell the plugin where to find the JavaScript file.
You may also specify the raw
, gist_id
, and gist_filename
options
as data attributes:
<a data-bookmarklet-raw="some/url.js">My Bookmarklet</a>
<a data-bookmarklet-gist-id="MY_GIST_ID">My Bookmarklet</a>
A url pointing to a JavaScript file that will be loaded directly.
The id of a Gist.
You can get your Gist's id from its url: https://gist.github.com/<username>/<gist_id>
.
If your Gist contains multiple files, use this option to select one of them.
A callback which will be executed (with the selected element as its argument) when the bookmarklet has been created.
To build, you need to install the npm packages and run grunt:
$ cd jquery-bookmarklet
$ npm install -g grunt-cli
$ npm install
$ grunt
Use this command to quickly view the test page:
$ python -m SimpleHTTPServer
# Now visit localhost:8000/demo