Thank you for your interest in developing for XKit!
Developing for XKit is really simple if you are efficient with HTML + CSS and JavaScript. XKit includes jQuery on all installations, so writing for XKit is not only simple, but also fast, too. And not only that, when you submit your extension to the Extension Gallery, you can reach new users, quick and easy.
In this page..
This page describes the concepts of an XKit extension, how XKit works, how to set and read global variables and functions, and how to append CSS styles. In page two, all global functions are listed, and a sample extension is provided, as well as submission guidelines, and how to submit your extension.

If you are interested in theme development, please check the Themes Documentation instead.
How does XKit work?

Every part of XKit (except the Framework part) is actually a XKit extension. On first install (or on resetting XKit), it downloads the Bootstrap code, which contains jQuery, and necessary code required to install or "boot" XKit.

Framework is responsible for interacting with the browser, doing stuff like saving and retrieving settings, logging debug messages, and running functions, as well as providing information about installed extensions ("packages").

Every part of XKit can be updated remotely, except the Framework part, which must be updated by the user.

When installing XKit for the first time, or resetting it, after downloading Bootstrap, "xkit_installer" package is downloaded, which installs and configures XKit, and then deletes itself.

Upon opening a page, XKit does the following:

There are six "internal packages", packages that are installed with every XKit installation, and can't be removed.

Packages

Internally, each extension is called a "package." Packages are stores along with configuration data, and each package have two 'files': the extension data itself, and the icon data. For example, if a package's JavaScript file on server is called "xfollowers.js", it would be stored internally as "xfollowers", and it's icon would be saved as "xfollowers_icon."

When installing XKit, "xkit_installer" package is responsible for downloading and saving packages. When using the Extension Gallery, "xkit_preferences" is responsible for it.

Each package has it's "information section", which looks like this:

//* VERSION 1.0 REV C **//
//* INTERVAL 0 **//
//* TITLE Fix and Tweaks **//
//* DEVELOPER STUDIOXENIX **//
//* PREFMENU Fix and Tweaks **//
//* PREFFUNC xpatches_options **//
//* DESCRIPTION Various fixes to make your Tumblr experience even better. **//
//* ADVANCED false **//

Note that the bold lines are required. The others are optional.

So what does all these stuff mean?

Storage and Variables

There are three types of storing data:

Normal JS declaration: Works just as it does in any JavaScript function.

var myname = "Atesh";
alert("Hi, my name is " + myname);

Shared Temporary Storage: Also called a "XVar."

xvar_set("myname","Atesh");
alert("Hi, my name is " + xvar_get("myname"));

Shared Persistent Storage: Used to store configuration data.

xset("myname","Atesh");
alert("Hi, my name is " + xget("myname"));

IMPORTANT:
When using shared storage options, always append an "identifier" before your variable name, since that name could be also used by another extension. (ex: "xfollowers_myname")
Functions
There are three types of functions:

Framework functions: There are included in every XKit environment. More on these later.

Normal JS declaration: Works just as it does in any JavaScript function. You can only call these from within your extension.

function say_hi() {
	alert("hi!");
}

// call it:
say_hi();

Global Functions (globalf): Any extension can call these.

// create a function:
function say_hi() {
	alert("hi!");
}

// attach it to page:
globalf_add("my_global_function",say_hi);

// call it:
globalf_run("my_global_function");

CSS
If you are going to use styles, please append them using xcss_append, which adds it to the header of the page. Using xcss_append is easy: (you can, of course, also use multi-line strings.)
xcss_append(" .my_div { padding: 10px; border: 2px solid red; } ");
xcss_append also supports adding Shared Temporary Storage variables (xvars):
xvar_set('mycolor', 'red');
xcss_append(" .my_div { padding: 10px; border: 2px solid %var mycolor%; } ");
IMPORTANT:
When appending styles, always append an "identifier" to your names: use "xmyapplication_mydiv", not "mydiv", as that can cause problems in the future.
IMPORTANT:
xcss_append does not check for duplicate entries. Use with caution, and if your application has an interval, set a variable (like "xmyapp_added_css_to_page") to not re-add styles again.
Framework Variables
XKit framework does have some variables that can give information about the framework, and the page it is running on.
IMPORTANT:
Never, ever change the preceding variables. Doing so might confuse other extensions, and extensions that change these variables won't be allowed in the Extension Gallery.
Next: Global functions, and writing your first extension · Next Page >