Hosts pay a monthly fee to plugins.dev to maintain the secure plugin-hosting infrastructure, author portal, and branded end-user portal. As users purchase plugins for the host's app, 30% of each purchase goes to the host (less the plugins.dev processing fee). There is no limit to the amount that hosts can earn and hosts may earn significantly more than their monthly fee, resulting in large platform profits.

Plugin authors can list their plugins on the host's plugin marketplace for free or can choose to charge for their plugins. Plugins may be sold for a one-time flat fee or a recurring, monthly charge. Plugin authors keep 70% of the plugin revenue (less plugins.dev processing fee).

Plugins.dev loads plugins in a sandboxed iframe on the host app, ensuring that the plugin code only interacts with whitelisted, host-approved sites. Instead of using a plugin for display purposes and constraining plugins to an ugly box on the page, plugins.dev ships the dom hierarchy produced by plugins to the host, sanitizes it, and renders it directly in the host UI. Because we are shipping structured data instead of html strings, sanitization is straightforward and secure and host components can be easily made available to be rendered by plugins. Plugin code can never interfere with host code but no unnecessary constraints are imposed on the host/plugin UI interaction.

Specifically, hosts declare the react prop types plugins must accept and any exposed host components. Plugins receive the provided props and render a dom tree in a sandboxed frame, which is then cleanly merged with the host dom.

A host is an application that renders plugin points. A plugin point is an extension point with an API defined by the host that consists of normal react prop types and an optional set of host components that plugins can render. Plugins.dev is responsible for securely rendering plugins at each plugin point.

Hosts sign up for a free or paid plan on plugins.dev and register the domain they would like to use to host plugins. For every plugin point that a host adds, they specify the prop types a plugin can expect to be passed, any host components that will be exposed, a set of "interesting" example props, and some examples of the provided host components. On their app, hosts generate a JWT for the current user using their plugins.dev secret and render a simple react component, passing their plugin point id, JWT, props, and exposed components.

Plugins.dev and the host direct plugin authors to the author portal plugins.dev generates for the host. As plugin authors submit plugins, hosts are asked to approve them (we capture screenshots, display the whitelisted domains the plugin may interact with, and check for dependency vulnerabilities). Once approved, users can install (and pay for) plugins for themselves or the organizations that they administer. Plugin payments are split between the plugin author (70%) and the host (30%) and both author and host pay a fee to plugins.dev.

Loading 3rd-party code on your app is nerve wracking and security is a large part of the reason you don't want to roll your own plugin marketplace. Plugins.dev has developed patent-pending technology to enforce sandboxing of plugin code while retaining maximum UI flexibility. All plugin code runs in a separate iframe and only structured dom hierarchy node updates are sent over the bridge to the host app, where the plugin dom representation is sanitized against dom clobbering, xss, and external server communication before being rendered into the host app.

Hosts can continue to enforce a strict content security policy and need only add *.plugins.dev as a frame-src, image-src, and style-src.