# Javascript Extensions - Extending the ComfyUI Client

Source: <https://docs.comfy.org/custom-nodes/js/javascript_overview>

## Extending the Comfy Client

Comfy can be modified through an extensions mechanism. To add an extension you need to:

- Export `WEB_DIRECTORY` from your Python module,
- Place one or more `.js` files into that directory,
- Use `app.registerExtension` to register your extension.

These three steps are below. Once you know how to add an extension, look through the hooks available to get your code called, a description of various Comfy objects you might need, or jump straight to some example code snippets.

### Exporting `WEB_DIRECTORY`

The Comfy web client can be extended by creating a subdirectory in your custom node directory, conventionally called `js`, and exporting `WEB_DIRECTORY` - so your `__init_.py` will include something like:

```python
WEB_DIRECTORY = "./js"
__all__ = ["NODE_CLASS_MAPPINGS", "NODE_DISPLAY_NAME_MAPPINGS", "WEB_DIRECTORY"]
```

### Including `.js` files

> **Tip**: All Javascript `.js` files will be loaded by the browser as the Comfy webpage loads. You don't need to specify the file your extension is in.

Only `.js` files will be added to the webpage. Other resources (such as `.css` files) can be accessed at `extensions/custom_node_subfolder/the_file.css` and added programmatically.

> **Warning**: That path does not include the name of the subfolder. The value of `WEB_DIRECTORY` is inserted by the server.

### Registering an extension

The basic structure of an extension follows is to import the main Comfy `app` object, and call `app.registerExtension`, passing a dictionary that contains a unique `name`, and one or more functions to be called by hooks in the Comfy code.

A complete, trivial, and annoying, extension might look like this:

```javascript
import { app } from "../../scripts/app.js";
app.registerExtension({ 
	name: "a.unique.name.for.a.useless.extension",
	async setup() { 
		alert("Setup complete!")
	},
})
```