Need Help I am unable to understand how to integrate Overlay with modal and icon with content.ts

[ghostbadfame]

Hi, I am a begineer. I am making a Extension to get messages with the help of Chatgpt according to the prompt. But i am unable to understand how to integrate Overlay with modal and icon with content.ts . Please do you have any demo for learning this.

In this scenario i want to use an icon like grammarly. But unable integrate the tsx to content.ts.

I wrote the code with plasmo and it is working fine but i am unable to integrate it with wxt.

DO i have to inject it and how to render the tsx file.

Link to my code
https://github.com/ghostbadfame/wxt

[1natsu172]

@ghostbadfame change the matches to matches: ["https://*.linkedin.com/*"] BTW, your reproduction is missing a necessary asset, etc.

[ghostbadfame]

@ghostbadfame change the matches to matches: ["https://*.linkedin.com/*"] BTW, your reproduction is missing a necessary asset, etc.

Which asset

[1natsu172]

For example, AI.svg. Also, you can import an asset by @/assets/~.

[ghostbadfame]

For example, AI.svg. Also, you can import an asset by @/assets/~.

Yeah now its working just getting error to setup material UI. Does wxt supports Material UI as i need a box

[1natsu172]

It is a known Issue #703 , not WXT but Vite(Rollup). And it is a WARNING, so you can either ignore it or work around it by adding a plugin.

WXT is built on Vite, MUI will work on Vite.

[ghostbadfame]

@1natsu172 thanks for poiniting out this can you give me an example how to render it. As i am unable to understand from documents.

[1natsu172]

simple example

// entrypoints/example-ui.content/index.tsx
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

export default defineContentScript({
  matches: ["https://*.linkedin.com/*"],

  main(ctx) {
    const ui = createIntegratedUi(ctx, {
      position: 'overlay``,
      onMount: (container) => {
        // Create a root on the UI container and render a component
        const root = ReactDOM.createRoot(container);
        root.render(<App />);
        return root;
      },
      onRemove: (root) => {
        // Unmount the root when the UI is removed
        root?.unmount();
      },
    });

    // Call mount to add the UI to the DOM
    ui.mount();
  },
});

with something options(e.g. https://wxt.dev/api/reference/wxt/client/type-aliases/ContentScriptPositioningOptions.html)

And you can see examples https://github.com/wxt-dev/examples/tree/main/examples

---

To be honest, we recommend starting with something simple with npx wxt init. You can avoid toolset stuck by going with a minimal configuration of what you want to achieve.