Proposal: standalone browser extension support

[jinghaihan]

Context

I am building a Chrome extension that injects the @devframes/hub-ui embedded dock into an existing page.

In my setup, the inspected page and the Devframe server have independent lifecycles.

The inspected page keeps running when the local Devframe server stops. When the server restarts, I want to reconnect and remount the Devframe panel without reloading the inspected page.

Current gaps

This exposes three issues:

1. Embedded UI sizes using rem are affected by the host page's root font size.
2. Runtime Iconify requests may be blocked by the host page's CSP.
3. When the sidecar restarts, there is no public lifecycle API to dispose and remount the embedded Hub without reloading the inspected page.

Question

If this topology fits Devframe's intended scope, I would be happy to contribute improvements for these gaps, potentially including:

• a browser extension example;
• CSP-safe or configurable icon resolution;
• stronger embedded style isolation;
• explicit mount/dispose/reconnect lifecycle APIs.

I would appreciate guidance on the preferred API boundaries and how these changes should be split into separate issues or PRs.

[antfu]

I'd love to have this feature, this is something the ecosystem has been asking (to easily define the devtools and have the Browser extension available). I know that @webfansplz is working on this feature in Vite DevTools (vitejs/devtools#530). While I would love to have it in Devframe to have a wider audience for sure, I was thinking of having Alro explore the possibility with the codebase he is more familiar with. But if you want to try the approach from the Devframe side, that would also be greatly welcome. I just wish we could have a way to collaborate with each other, to share ideas and avoid duplicating efforts.

[jinghaihan]

Thanks! I reviewed Vite DevTools, One distinction I noticed is that there are two different browser-extension topologies:

1. a Chrome DevTools panel or extension-owned viewer, as implemented in Vite DevTools;
2. an extension-injected viewer rendered directly inside the inspected page.

My current use case is the second one. That is why host-page rem, CSP, and sidecar restart lifecycle become visible. The Vite DevTools approach avoids most style and CSP problems by rendering the viewer inside an extension-owned iframe.

I’d be happy to explore how Devframe could support this second topology while reusing the extension work from Vite DevTools, rather than duplicating it.