IceWhaleTech / CasaOS

CasaOS - A simple, easy-to-use, elegant open-source Personal Cloud system.
https://casaos.io
Apache License 2.0
24.86k stars 1.34k forks source link

[Feature Request] Custom Widgets Proposal #1106

Open WisdomSky opened 1 year ago

WisdomSky commented 1 year ago

Is your feature request related to a problem? Please describe. Limited information can be viewed from the dashboard.

Describe the solution you'd like Allow writing of custom widgets.

Even an iframe-based widget is enough for now. No need for a complex set of APIs.

But to we have to add something like a manifest file where the developer of the widget can list down app dependencies, like for example if my widget requires for Adguard Home to be installed, then I just need to declare in the manifest that adguard home is required as a dependency. So that when the user attempts to install the widget, it will abort the installation and throw an error if the required dependencies are not installed.

In the manifest, the developer can also define variables/configurations which will be prompted to the user upon installation, like for example the port in which the service is running, there will be some cases where we user uses a different port when running a service, like when running transmission we can use port 9111 instead of 9091, so the developer can take it into account. These user values will be stored somewhere in CasaOS and then communicated to the widget(iframe) upon onload(event) using the postMessage API. Other option would be through a rest endpoint, so that the developer can query these values anytime and doesn't have to write a code that listens to the message.

*Note: the port is just an example but in real world it doesn't make sense as an example since CasaOS can just get the port where the service is running and communicate it to the widget.

So what I'm thinking is there will be two minimum required files which are index.html and manifest.json. Where the index.html is the entry point of the widget.

A sample Adguard Home widget in main container: image

A sample Transmission widget in the sidebar: image

zhanghengxin commented 1 year ago

Well done, my friend! We will gradually lift the third-party development restrictions on our components in the future.

erdesigns-eu commented 7 months ago

Is this possible or is this still pending?

zhanghengxin commented 7 months ago

Is this possible or is this still pending?这是可能的还是仍然悬而未决?

@ETWang1991

JayceeB1 commented 1 week ago

We need this! 🫡