# 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.
{% 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);
```
### 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.
{% endhint %}
> **`title`** - The name of your add-on.
> **`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.
> **`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".
> **`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.
{% 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).
{% endhint %}
