how to extend my web application using plugins that I can load dynamically

Question

I was wondering how do websites have a plugin system where they can extend the functionality of their website. if I have a manifest file containing the entry points for the plugin such as the main.js and main.html and so forth, how can I inject the ui in my web app as well as how to communicate between the host and the plugin using events and states, essentially making the plugin context aware. it would be ideal if you could provide concrete examples on how to do it, preferably in react.js and node.js.

Edit: I want my react.js application to be able to fetch the plugins from a backend and after a look at the manifest file be able to load the entry html and javascript files and inject it directly into my ui (a react component) and be able to access to specific objects (limited states for security reasons) from my react application. the plugins might be developed by independent developers and uploaded for use in the website.

Answer 1

You can use a Progressive Web App (PWA).

For Chromium-based browsers you can use an Isolated Web App (IWA). Either can be installed using a Web-based UI that the browser includes in the address bar and/or context menus.

For Isolated Web Apps Chromium decided to gate Direct Sockets (TCP Socket, UDP Socket TCP Socket Server) behind the IWA. What this means is we can create TCP socket servers in the browser, and connect to arbitrary TCP socket endpoints from the browser.

An Isolated Web App is a Signed Web Bundle (SWBN), including your source files, signed using some form of encrypting mechanism, whether that be openssl or Web Cryptography API.

Now, IWA maintainers have claimed that Ed25519 secure curves algorithm is only available using node:crypto. That is not true and correct. It is possible to create a SWBN IWA using Web Cryptography API - not nodes internal crypto module that cannot be polyfilled from what I understand. I have created a SWBN and IWA using the same code in node, deno and bun.

For my purposes I had to learn about IWA and SWBN in order to achieve my goal, using Direct Sockets from arbitrary Web pages.

Here is Google Chrome Labs' telnet-client that uses Node.js exclusively. Here is my fork that achieves what I describe above using the same code in node, deno, and bun. Included are TCP socket servers for each respective JavaScript runtime above, and a txiki.js tjs TCP socket server. With the above I am able to create a TCP socket client and/or server from any arbitrary Web page, launch a local TCP socket server using a browser extension and Natve Messaging (see direct-scokets folder) and full-duplex stream using WebRTC Data Channels between the IWA window and the arbitrary Web page window.

In the past there was Native Client technologies that really were/are plugins. Chrome used to have a published extension that used Native Client for speech synthesis processing. mpv.js still uses Native Client for Electron. And it's still possible to load a Native Client plugin in Chromium the last time I checked.

Emerging technologies are now being used, such as WebAssembly and WASI for what was once called a "plugin"; see browser_wasi_shim, sm-wasi-demo.

I really had no interest whatsoever in IWA's, but since Chromium authors decided to gate Direct Sockets behind IWA's I had to figure out a way to break out of whatever alleged gates were set up.

How far you want to go with this is up to you. There's basically little I can't achieve with regard to exploiting the browser to do what I want, whether inside or outside of standards, proposals, trials shipped, gates that supposedly keep technologies "secure" and so forth.

Happy hacking!