Javascript API
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Click Here For Full Documentation
Settings Demo

jMod is a library of useful tools for userscript authors with features ranging from popup notifications, to a full settings dialog generator.

ToDo / Goals


Lightweight and versatile, jMod can be loaded anywhere without having to worry about the native CSS affecting the UI. jMod loads a FULLY namespaced bootstrap stylesheet that has been trimmed down to its bare essentials. Thats it! jMod does not depend on jQuery. However, loading a copy of jQuery can enhance several of its features.

jMod can be loaded as a required script in your meta block, or as a script element.

##Events Full List of jMod Events

One of jMod's most useful features is handling loading events for you. When run at "document-start", scripts actually execute before the DOM exists. This prevents you from interacting with the document until it is created. jMod takes care of this for you.

jMod.CSS = 'custom css'; // Added to CSS stack until DOM exists

// Start DOM interactions
function onDOMReadyCB(){
jMod.onDOMReady = onDOMReadyCB;

// jMod fully initialized
function onReadyCB(){
jMod.onReady = onReadyCB;

// Page is ready
function onPageReadyCB(){
jMod.onPageReady = onPageReadyCB;

// Page is loaded
function loadCB(){
jMod.load = loadCB;

The following four methods are all functionally equivalent:

// Execute function when jMod is fully loaded and CSS is added
jMod.onReady = function(){
jMod('onReady', function(){
jMod.Events.addListener('onReady', function(){
}, true);
jMod Event Log
jMod Event Log

##Settings Settings Demo

jMod Settings Example
jMod Settings Example


jMod Notifications Example
jMod Notifications Example

##jQuery Although jMod is designed to run without using jQuery, there are a few jQuery specific enhancements built in.

###GM_xmlhttpRequest in jQuery Ajax Requests jMod can extend any instance of jQuery to use GM_xmlhttpRequest as its default data transmission method. This allows you to reliably make cross-origin requests without any additionally flags. Doing this affects every ajax request made by jQuery.


	$(document).ready(function() {
		function test_jQueryFunctions(){
			// Test $.ajax()
			console.log('Test $.ajax("")');
					url: '',
					contentType: 'text/html',
					type: 'GET',
					dataType: 'html',
					onprogress: function(response){
						console.log('onprogress response', response);
					onreadystatechange: function(response){
						console.log('onreadystatechange response', response);
				.done(function(data, textStatus, jqXHR) {
					console.log("$.ajax() success: ", jqXHR);
				.fail(function() {
					console.log("$.ajax() error");
			// Test $(element).load()
			console.log('Test $(element).load(" #hplogo")');
			var tmpDiv = document.createElement('div'); = 'tmpDiv';
			$('#tmpDiv').load(' #hplogo', function(responseText, textStatus, jqXHR){
				console.log('$(element).load() ' + textStatus, jqXHR);

} else {
	console.log('Test Failed! No jQuery');

#Resources A list of any/all resources used by jMod that I did not personally write.


###jQuery jMod.extend():
jMod uses a modified version of jQuery's extend function for copying/cloning an object onto another. However, jMod's version takes scope and permissions into account and ensures no errors occur.

###UAParser jMod uses UAParser to identify the user's browser type/version.

##CSS jMod loads in fully namespaced versions of several popular CSS libraries. They will not interact or change the web page in any way until the namespace is added to an element.

###Bootstrap 3.3.2 The bootstrap stylesheet is namespaced with the class ".jmod-na". Many of its standard components have been removed, while others have been heavily modified. For example, tooltip classes have been renamed to avoid having the content page's Bootstrap instance try and interact with it.

###Font Awesome 4.3.0 The bootstrap stylesheet is namespaced with the class ".jmod-fa", and defines the font-face as "jModFontAwesome". It doesn't use the same namespace as the other libraries to avoid overriding a page's font awesome instance when doing so is undesirable.


#ToDo / Goals

  • jMod.jQueryExtensions.addCrossOriginSupport
    I need to add a version called jMod.jQueryExtensions.exportCrossOriginSupport. This would an exported function instead of adding the functions directly. This is for users that want to add cross origin support to a jQuery instance in the public scope from a privileged script. This will prevent any errors caused by an unsafe function trying to indirectly call GM_xmlhttpRequest.

    This would, from the script author's perspective, work exactly the same as addCrossOriginSupport. However, a function has to be exported (via ExportFunction) to the public scope. This function is what jQuery will actually call, which itself calls the real function available inside jMod.
  • mCloneInto
    This jMod cloning function needs a better method for cloning objects when cloneInto is unavailable / not working. I have already created a function called jMod.CloneProperties that can clone an object in a manor similar to jQuery's extend method. However, CloneProperties copies non-enumerable properties and reconstructs their property constructors manually. This is a start, but it still needs a lot of work before it can be put into production.
  • CSS
    Trim down and clean up CSS.

#License jMod is licensed under the GNU General Public License v3. See the file /COPYING for the complete terms of this license.

Third parties are welcome to modify and redistribute jMod in entirety or parts according to the terms of this license, and welcomes patches for improvements or bug fixes.