> For the complete documentation index, see [llms.txt](https://docs.nuken.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nuken.xyz/options-customization/add-ons/developing-add-ons.md).

# Developing add-ons

Developing a nuken Add-on is pretty easy. Upon startup, nuken will scan the `content/addons` directory for any `.js` files you may have dropped there. You can use this to run custom scripts or files (like background add-ons) but creating an add-on that's a usable app takes a few more steps.&#x20;

{% hint style="info" %}
Pretty much what you're doing here is defining a JS object, and pushing it to the **Add-ons Menu** via the `push_addon` function.
{% endhint %}

```
var test_addon = {

title: "New Add-on", 

description: 'This is a nuken Add-on. Pretty cool, huh?',

codename: "test_addon", //the name of your object

icon: "image.png", //look for 'image.png' in content/addons

index: 'addon.html', //look for 'addon.html' in content/addons

creator: 'Anonymous',

donate: 'https://donate-link-here.com',

link: 'https://insert-link-here.com',

version: 'v1.0', 

fullscreen:false,

width: 1920, //1920 px

height: 1080, //1080 px

resize:true, //this Add-on can be resized

pin: true //this Add-on can be pinned

};

push_addon(test_addon);
```

### &#x20;Required properties

{% hint style="warning" %}
These are most definitely required, we're not messing around.  Your content will not function without them. 😐
{% endhint %}

> **`codename`** -  Set this string to whatever you've called your declared add-on object. For example, set `codename` to `color_picker` if you're eventually going to `push_addon(color_picker)`. This just ensures that nuken can create page elements using the name of your add-on object.

> **`index`** - This is the location of your add-on's interface. It's loaded into an `iframe` element, which the user can interact with in their workspace. nuken begins looking in the `addons/` directory for the `.html` file you list here, so relative file paths are allowed. If your add-on is not web-based, your `.html` file can act as a redirect or something.

### **Optional properties**

{% hint style="info" %}
Feel free to add these if you'd like, no pressure. 😎

Setting some of these properties to `false` has the same effect as leaving them out entirely; so as a general rule of thumb, if you don't want it, just ignore the property.&#x20;
{% endhint %}

> **`title`** - The name of your add-on.&#x20;

> **`pin`** - Whether or not the add-on can be pinned to a user's workspace. If this is set to `false`, or is omitted from the object entirely, the option to pin your add-on will be unavailable.&#x20;

> **`icon`** - The location of your add-on's preview icon. nuken begins looking in the `content/addons` directory, so relative file paths are allowed here.

> **`description`** - Tell us about your add-on. This will show up under "Info".&#x20;

> **`creator`** - Your name, or whatever you'd like to be called. This appears under "Info".

> **`donate`** - The link to your addon's donation page. This appears under "Info".

> **`link`** - A link to your website. This appears under "Info".

> **`online`** - Set this to `true` if your Add-on is "always-on"; that is,  requires an internet connection. If nuken is offline, your add-on is not displayed in its menu; instead, the default "no connection, check your settings" message is displayed. This is a neat feature if you don't want to worry about the user seeing your add-on in an offline state, having to put more work into your UI design.

> **`version`** - Your addon's version number. You can number / input your versions however you'd like - this is a `string`, not a number.

> **`shop_id`** - If your add-on is listed on the **nuken Shop**, you'll receive an `id` for your listing. This information is appended to the "Shop listing" button, taking the user directly to your Shop page.

> **`fullscreen`** - Sets `width` and `height` to the max values allowed by your screen, and `resizable` to false. If this is set to true, the following options don't matter.

> **`width`** - Set the width of your addon in its menu, in `px` units.

> **`height`** - Set the height of your add-on in its menu, in `px` units.

> **`resize`** - If this is set to `false`, the user will not be able to resize your add-on in its menu.

If you've created the object correctly, you should see your `icon` in the **Add-ons Menu**. Clicking on it will open your nuken Add-on.

<figure><img src="/files/u5uldZUup7e1q6HOhu4i" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7yYDO81v9frOULGqY48f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Make sure you've called `push_addon`. nuken will not show the add-on in the **Add-ons Menu** if you only define it!
{% endhint %}

{% hint style="success" %}
Feel free to show us what apps or background add-ons you've made for nuken. No matter what you create, we'll take a look at it if you @ us on social media, or submit it via [nuken.xyz/submit](https://nuken.xyz/submit).&#x20;
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.nuken.xyz/options-customization/add-ons/developing-add-ons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
