Jdrop | Documentation

Sign in with an online account

If you don't want to login,
you can also view public JSON

Documentation

It's not hard, but it takes a few steps to make a bookmarklet work with Jdrop.

The easiest way to start is to embed the contents of jdrop-example.js in your bookmarklet script. Here's the code with some explanation:

/*
Copyright 2011 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

See the source code here:
     http://code.google.com/p/jdrop/
*/

// Code to embed in your bookmarklet to make it work with Jdrop.
// See http://jdrop.org/devdocs

function SaveToJdrop(appname, myDataObj, version, summary) {
	// create object of parameters to pass to Jdrop
	var params = { "appname": appname,
	               "title": document.title, 
	               "version": version,
				   "summary": summary,
	               "json": JSON.stringify(myDataObj) };

	// hidden iframe to use as target of form submit
	var jdropif = document.createElement("iframe");
	jdropif.style.display = "none";
	jdropif.name = "jdropiframe";
	jdropif.id = "jdropiframe";
	document.body.appendChild(jdropif);

	// form for posting data
	var jdropform = document.createElement("form");
	jdropform.method = "post";
	jdropform.action = "http://jdrop.org/save";
	jdropform.target = "jdropiframe";
	jdropform.style.display = "none";

	// add each param to the form as an input field
	for (var key in params) {
		var pInput = document.createElement("input");
		pInput.setAttribute("name", key);
		pInput.setAttribute("value", params[key]);
		jdropform.appendChild(pInput);
	}

	// submit the form and cleanup
	document.body.appendChild(jdropform);
	jdropif.onload = function() { document.body.removeChild(jdropform); document.body.removeChild(jdropif); };
	jdropif.onerror = function() { document.body.removeChild(jdropform); document.body.removeChild(jdropif); };
	jdropform.submit();
}


function JdropCallback(jsonobj) {
	// code to display data
}


if ( "undefined" === typeof(JDROPVIEW) ) {
	// start your bookmarklet analysis code
}


/*
    http://www.JSON.org/json2.js
    2010-11-17
    Public Domain.
    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
    See http://www.JSON.org/js.html
*/
if(!this.JSON){this.JSON={}}(function(){function f(n){return n<10?"0"+n:n}if(typeof Date.prototype.toJSON!=="function"){Date.prototype.toJSON=function(key){return isFinite(this.valueOf())?this.getUTCFullYear()+"-"+f(this.getUTCMonth()+1)+"-"+f(this.getUTCDate())+"T"+f(this.getUTCHours())+":"+f(this.getUTCMinutes())+":"+f(this.getUTCSeconds())+"Z":null};String.prototype.toJSON=Number.prototype.toJSON=Boolean.prototype.toJSON=function(key){return this.valueOf()}}var cx=/[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,escapable=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,gap,indent,meta={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",'"':'\\"',"\\":"\\\\"},rep;function quote(string){escapable.lastIndex=0;return escapable.test(string)?'"'+string.replace(escapable,function(a){var c=meta[a];return typeof c==="string"?c:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+string+'"'}function str(key,holder){var i,k,v,length,mind=gap,partial,value=holder[key];if(value&&typeof value==="object"&&typeof value.toJSON==="function"){value=value.toJSON(key)}if(typeof rep==="function"){value=rep.call(holder,key,value)}switch(typeof value){case"string":return quote(value);case"number":return isFinite(value)?String(value):"null";case"boolean":case"null":return String(value);case"object":if(!value){return"null"}gap+=indent;partial=[];if(Object.prototype.toString.apply(value)==="[object Array]"){length=value.length;for(i=0;i

SaveToJdrop
Typically bookmarklets do two things: gather data and display data. Package up that data in a single object and pass it to SaveToJdrop along with the name of your bookmarklet and a version number. (This appname is the one you used to register your app as described later.) Although optional, it's a good practice to specify a version number associated with the JSON format being saved. That way, your rendering code can be backward compatible if the JSON format changes. The version param is just a string, for example, 1.1.3.
JdropCallback
Write a callback function that takes your data object and displays it in an empty page. This function will be used in the Jdrop view page.
is JDROPVIEW defined?
When your bookmarklet code is used in the Jdrop view page to render the data, you don't want the bookmarklet analysis code to run. That's accomplished by only doing the bookmarklet analysis if JDROPVIEW is undefined.
JSON
Include a definition of JSON for browsers that don't have it. I minify the code from json2.js and inline that in my bookmarklet.

In addition to these steps accomplished through using jdrop-example.js, you also have to add a "Save to Jdrop" link to your bookmarklet that calls your function. Something like this:

<a href="javascript:SaveToJdrop('MY APP NAME', myDataObj, '1.1.3', '1.8 secs')">Save to Jdrop</a>

App Register

The final step is to register your app. Once Jdrop is well established that'll be a self-service process. But for now the only way to register your app is by posting a request to the Jdrop discussion list. Typically I'll get back to you within a few hours.

This is the information needed to register your app:

App Name (required): The name of your app or bookmarklet.
example: Docsource
Script URL (required): The URL to your bookmarklet script.
example: http://stevesouders.com/mobileperf/docsource.js
Callback Function (optional): The JavaScript function in your script that Jdrop calls to render the JSON object (see above). If not specified a simple JSON viewer is used.
example: JdropCallback
Format (optional): If your data is in a standard format (such as HTML or HAR), this is the name of that format. By default the entire JSON string is assumed to comprise the desired formatted output. Alternatively, the Format Key can be used to extract a key from the JSON object to be used as that formatted output.
example: HAR
Format Key (optional): The key in your JSON object that stores the formatted output for the specified Format. If not specified, the entire JSON string is assumed to comprise the formatted output.
example: haroutput