Improve Content-UI Injection with Enhanced Package

[Leizhenpeng]

# Injecting content UI is a complex and common requirement, especially for developers working on sophisticated plugins that require various entry points for other operations. Currently, we provide a manual method for creating a short route, but this approach falls short for the following reasons:

1. Limited Flexibility: There are primarily two modes of content-UI injection: iframe and shadow root. Shadow root itself has three subtypes:

   • Overlay (relative positioning): 'top-left', 'top-right', 'bottom-left', 'bottom-right'.
   • Inline (insertion): 'last', 'first', 'replace', 'before', 'after'.
   • Modal (absolute positioning).

2. Injection Timing Mechanisms: Plugins may need to inject content UI:

   • On the initial page load.
   • By monitoring an element until it appears (see Plasmo Issue #1010).

Given the complexity and high setup cost for users, I have maintained a separate package that specifically handles content UI injection logic.

This package simplifies and optimizes the injection process. Here’s a simple demo illustrating its effectiveness and efficiency:

// Example usage of the content UI injection package

import { createShadowRootUI } from 'content-ui-inject';
const app = await createShadowRootUI({
      name: 'react-boilerplate',

      position: 'inline',
      injectAnchor: 'body',
      injectMode: 'before',
      styleOptions: {
          textContent: tailwindcssOutput,
      },
      onMount: (uiContainer) => {
          createRoot(uiContainer).render(<App />);
      },
  });

app.mount();

By integrating examples from this package into our documentation, we can significantly reduce the learning curve for users and enable them to handle more complex scenarios efficiently.

[Leizhenpeng]

https://github.com/Leizhenpeng/content-ui-inject

This package is under rapid development

The core target is to handle three types of injection + two injection timings of csui.

If you are interested, I can put it in the package directory of this repo and we can develop it together!

[PatrykKuniczak]

@Leizhenpeng If you're interested we can add your plugin as one module for this template, when we will create a #400 😄 It will become a part of this template, but also other users can download it as standalone module ❤️ I hope @Jonghakseo are all in, for this idea 😆

[Jonghakseo]

I love the idea of installing dependencies to use additional libraries, and embedding them inside boilerplate!

[PatrykKuniczak]

https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/598#issuecomment-2339782885