This project implements a Tutorial on creating Bookmarklets with JavaScript/JQuery
To fully benefit from the tutorial you should download this project and run a local Sinatra server. This is very easy, assuming that you are familar with Ruby and have it installed on your machine.
In the downloaded directory, run 'bundle install' then start the server with 'rackup -p 4567'. Point your browser at http://localhost:4567 to see the tutorial page along with live links.
A browser Bookmarklet is a simple way to invoke external JavaScript code on the contents of a web page.
They can be as simple as snippets of code contained within the URL of Bookmarklet itself. Or they can trigger Javascripts on a remote server to perform more complex actions. In particular they can inject a script into the current page so as to modify its behaviour.
This tutorial walks you through two types of bookmarklet.
The simplest form is a chunk of JS code contained in the Bookmarklet URL that invokes some action.
This is a direct approach - you select some text, you click the bookmarklet and you get a result. If you want to repeat the process with some other text on the page then you have to click the bookmarklet link again.
In this example you select text, click on the bookmarklet and google is invoked with the text:
1: Drag this to your browser toolbar: Example 1
2: Browse to a web page of your choice and select some text with your mouse
3: Click on the Bookmarklet - this will open up a new tab containing a Google search with the selected text
View the Source of this page to see the JavaScript code that makes up the Bookmarklet.
For many applications you need to invoke an action multiple times on a single page - looking up words in a dictionary would be a good example. Having to click on a Bookmarklet link every time is not a good solution. Instead you want to modify the behaviour of the page by injecting a custom JS script. A bookmarklet can be used to initiate this.
In this example a simple, almost generic, bookmarklet installs a script from a remote server into the DOM of the current page. That script can then perform the action whenever it is triggered.
The bulk of the code for this approach comes from how-to-create-a-jquery-bookmarklet, written by Brett Barros of latentmotion.com, with some code input from Paul Irish. While that tutorial is very useful, I found it a bit difficult to follow. I'm hoping this version is a little more descriptive.
With this example, you click once on the bookmarklet to install the remote script. Any text that you select is echoed to a Div that is inserted at the top of the page.
1: Drag this to your browser toolbar: Example 2
2: Browse to a page of your choice
3: Click the Bookmarklet link in your toolbar - you will see a gray box appear at the top of the page
4: Select some text in your page - you should see it echoed in the top panel
5: Select some more text - and it will also be echoed (without clicking the Bookmarklet link)
6: Browse to a different page - the feature will no longer be active
The example uses 3 JS scripts:
- example-2-bookmarklet.js - the code that gets installed in your toolbar
- example-2-injector.js - the code that injects your custom js into the current page
- example-2-custom.js - your custom js code
The bookmarklet and injector scripts are fairly general purpose. The changes required should be pretty obvious and specify your server address and custom CSS and JS files.
Note that the bookmarklet expects you to have a server at http://localhost:4567 which can respond to the request.
NOTE - When injecting a custom script into an arbitrary page you run the risk of conflicts with CSS styles and JS variables and functions. Be sure to use unique variable/function names and explicitly specify your own CSS styles. There is no current way to turn off CSS inheritance that I know of but look on the Web for some ideas.
Tutorial written by Robert Jones Craic Computing LLC November 2012
The code is made freely available under the terms of the MIT license