Add Dynamic React Component

[Snehasish7080]

I am using react and vite, Currently I have a file content.tsx which is going to inject in the web pages but at the same time I want when user clicks on extension the this component should inject not by deafault, I added background.js file but it doesn't workd. Any help would be great.

Here is my background.js

import scriptPath from "/src/content.tsx?script";
chrome.action.onClicked.addListener((tab) => {
  if (tab.id) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      files: [scriptPath],
    });
  }
});

src/content.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = document.createElement("div");
root.id = "crx-root";
document.body.appendChild(root);

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);