How to Dynamically Mount/Unmount Plasmo Components without Page Refresh?
Problem:
In a SPA app, components matched to specific URLs don’t consistently mount/unmount on soft navigations (client-side routing). Components either appear only after a page refresh or fail to unmount without one. The goal is to achieve dynamic mounting and unmounting of components in response to soft navigations without loading content scripts on all pages, especially in large extensions with numerous features.
Question:
What’s the best approach to manage component mounting and unmounting within an SPA in Plasmo, considering the need for efficiency, modularity, and scalability?
Potential Solutions (so far):
1. URL-Specific ShadowRoot Mount with Custom Rendering: Configure the shadow root to mount only on matched URLs and manage component rendering within it using a MutationObserver to detect soft navigations in the SPA.
2. All-Pages Shell Component with Internal URL Matching: Load a lightweight shell component on all SPA pages. Inside it, use MutationObserver to detect URL changes and mount/unmount specific components based on the active URL.
3. Shell Component as a Dynamic Router: Implement a minimal shell component that loads on all pages and acts as a router, dynamically importing and mounting components based on URL matches, allowing multiple components to load on the same page if needed.
Which approach aligns best with Plasmo’s architecture for SPAs and offers efficient, scalable management of multiple components? I am also open to other solutions.
Thanks!
In a SPA app, components matched to specific URLs don’t consistently mount/unmount on soft navigations (client-side routing). Components either appear only after a page refresh or fail to unmount without one. The goal is to achieve dynamic mounting and unmounting of components in response to soft navigations without loading content scripts on all pages, especially in large extensions with numerous features.
Question:
What’s the best approach to manage component mounting and unmounting within an SPA in Plasmo, considering the need for efficiency, modularity, and scalability?
Potential Solutions (so far):
1. URL-Specific ShadowRoot Mount with Custom Rendering: Configure the shadow root to mount only on matched URLs and manage component rendering within it using a MutationObserver to detect soft navigations in the SPA.
2. All-Pages Shell Component with Internal URL Matching: Load a lightweight shell component on all SPA pages. Inside it, use MutationObserver to detect URL changes and mount/unmount specific components based on the active URL.
3. Shell Component as a Dynamic Router: Implement a minimal shell component that loads on all pages and acts as a router, dynamically importing and mounting components based on URL matches, allowing multiple components to load on the same page if needed.
Which approach aligns best with Plasmo’s architecture for SPAs and offers efficient, scalable management of multiple components? I am also open to other solutions.
Thanks!
