54 lines
2.0 KiB
Plaintext
54 lines
2.0 KiB
Plaintext
---
|
|
title: "Javascript Extensions"
|
|
---
|
|
|
|
## 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](javascript_hooks) available to get your code called,
|
|
a description of various [Comfy objects](javascript_objects_and_hijacking) you might need,
|
|
or jump straight to some [example code snippets](javascript_examples).
|
|
|
|
### 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.</Tip>
|
|
|
|
_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.</Warning>
|
|
|
|
### 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!")
|
|
},
|
|
})
|
|
```
|
|
|