Bookmarklet Framework

Created by Oscar Otero http://oscarotero.com [email protected] GNU Affero GPL version 3. http://www.gnu.org/licenses/agpl-3.0.html

Simple javascript framework focused to create bookmarklets easily. You can load css, jquery and other js files. You only have to write a config file with the options for your bookmarklet. The available options are:

• jquery: If you want to use jQuery, define the url where load it.
• css: The url to load some css code. If you need load more than one file, use an array.
• js: The url to load some javascript files. If you need load more than one file, use an array.
• ready: The function to be executed when the jQuery and all javascript files are loaded. If you use jQuery, the function has a parameter with the instance of the jQuery object (to prevent conflicts with the jQuery used by the webpage)

Example

window.bookmarklet.options = {
	jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',
	css: 'http://mysite.com/bookmarklet/styles.css',
	js: 'http://mysite.com/bookmarklet/javascript.js',

	ready: function ($bookmarklet_jquery_instance) {
		//Javascript code executed when jquery and js files are loaded.
	}
}

Loading the options in an external file

This method is useful if you have several bookmarklets and prefer keep the bookmarklet framework in an individual file.

You have to create a javascript file with the options, for example, this bookmarklet removes all images of the current page:

window.bookmarklet.options = {
	jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',

	ready: function ($) {
		$('img').remove();
	}
}

To execute this bookmarklet, you have to load the framework and execute the function lauch passing the url of the options file:

window.bookmarklet.launch('http://mysite.com/bookmarklet-options.js');

To convert this code in a real bookmarklet you need some extra code (obviously, this code can be shorter and minified):

var launchBookmarklet = function () {
	var b = 'http://mysite.com/bookmarklet.js';
	var f = 'http://mysite.com/bookmarklet-options.js';

	if (window.bookmarklet == undefined || window.bookmarklet.launch == undefined) {
		var s = document.createElement('script');
		s.type = 'text/javascript';
		s.src = b;

		if (!document.attachEvent) {
			s.onload = function () {
				window.bookmarklet.launch(f);
			}
		} else {
			s.onreadystatechange = function () {
				if (s.readyState == 'complete' || s.readyState == 'loaded') {
					window.bookmarklet.launch(f);
					s.onreadystatechange = null;
				}
			}
		}

		document.body.appendChild(s);
	} else {
		window.bookmarklet.launch(f);
	}
};

<a href="javascript:launchBookmarklet();">Remove all images</a>

Loading all code in an unique file

You can include the options in the same file than the bookmarklet to reduce http requests. Append the following code in bookmarklet.js:

var executeMyBookmarklet = function () {
	window.bookmarklet.execute({
		jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js',

		ready: function ($) {
			$('img').remove();
		}
	});
}

And now you have to create the bookmarklet code:

var launchBookmarklet = function () {
	var b = 'http://mysite.com/bookmarklet.js';

	if (window.bookmarklet == undefined || window.bookmarklet.executeMyBookmarklet == undefined) {
		var s = document.createElement('script');
		s.type = 'text/javascript';
		s.src = b;

		if (!document.attachEvent) {
			s.onload = function () {
				window.bookmarklet.executeMyBookmarklet();
			}
		} else {
			s.onreadystatechange = function () {
				if (s.readyState == 'complete' || s.readyState == 'loaded') {
					window.bookmarklet.executeMyBookmarklet();
					s.onreadystatechange = null;
				}
			}
		}

		document.body.appendChild(s);
	} else {
		window.bookmarklet.executeMyBookmarklet();
	}
};

<a href="javascript:launchBookmarklet();">Remove all images</a>