47 lines
2.0 KiB
Markdown
47 lines
2.0 KiB
Markdown
# 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!")
|
|
},
|
|
})
|
|
```
|