improvements

interface/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["../src/src"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package.json

@@ -27,5 +27,13 @@
     "webextension-polyfill": "^0.10.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "@types/react": "^18.2.21",
+    "autoprefixer": "^10.4.15",
+    "postcss": "^8.4.29",
+    "react": "^18.2.0",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
+};

public/manifest.json

@@ -54,6 +54,10 @@
     {
       "resources": ["client.js"],
       "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["index.css"],
+      "matches": ["*://*/*"]
     }
   ]
 }

src/popup/main.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.js'
+import './index.css'
+
+const mountNode = document.getElementById("ExtensionPopup");
+const shadowRoot = mountNode!.attachShadow({ mode: "open" });
+
+// Step 2: Inject styles into the shadow DOM
+const styleLink = document.createElement('link');
+styleLink.setAttribute('rel', 'stylesheet');
+styleLink.setAttribute('href', 'chrome-extension://adkchjaapbfjofglfpenifpahonbnehk/index.css');
+shadowRoot.appendChild(styleLink);
+
+// Step 3: Create a div inside shadow root to serve as the React root
+const reactRoot = document.createElement('div');
+shadowRoot.appendChild(reactRoot);
+
+const root = ReactDOM.createRoot(reactRoot);
+
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

tailwind.config.js

@@ -0,0 +1,22 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  important: true,
+  darkMode: "class",
+  theme: {
+    fontSize: {
+      "xs": ".65rem",
+      "sm": ".775rem",
+      "base": "0.65rem",
+      "md": "0.65rem",
+      "lg": "1rem",
+      "xl": "1.25rem",
+      "2xl": "1.5rem",
+      "3xl": "1.875rem",
+    }
+  },
+  plugins: [],
+};