body に React を埋め込む

$ npm i react react-dom
$ npm i -D @vitejs/plugin-react @types/react-dom

manifest.jsonを以下のように定義することでcontent_scriptsで tsx を扱うことができる。

import { defineManifest } from "@crxjs/vite-plugin";

export const manifest = defineManifest({
  manifest_version: 3,
  name: "Web Tweaks 2",
  version: "2.1.0",
  description: "",
  icons: {
    "16": "icons/16.png",
    "48": "icons/48.png",
    "128": "icons/128.png",
  },
  action: {
    default_popup: "index.html",
  },
  content_scripts: [
    {
      matches: ["https://qiita.com/*"],
      js: ["src/qiita.tsx"],
      run_at: "document_start",
    },
  ],
});

import { crx } from "@crxjs/vite-plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { manifest } from "./manifest.config";

export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

以下をマージする。

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

import { createRoot } from "react-dom/client";
import { App } from "./App";

const container = document.createElement("div");
document.body.appendChild(container);

createRoot(container).render(<App />);

import { useState } from "react";

export function App() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}