Merge pull request #9 from Jonghakseo/content-script-react

Add content view in content script

src/manifest.ts

@@ -28,8 +28,14 @@ const manifest: ManifestType = {
   devtools_page: "src/pages/devtools/index.html",
   web_accessible_resources: [
     {
-      resources: ["contentStyle.css", "icon-128.png", "icon-34.png"],
-      matches: [],
+      resources: [
+        "assets/jsx-runtime.*.js",
+        "src/pages/contentView/index.js",
+        "contentStyle.css",
+        "icon-128.png",
+        "icon-34.png",
+      ],
+      matches: ["*://*/*"],
     },
   ],
 };

src/pages/content/index.ts

@@ -1,5 +1,38 @@
 try {
   console.log("content loaded");
+  injectContentViewScript();
 } catch (e) {
   console.error(e);
 }
+
+/**
+ * @description
+ * Chrome extensions don't support modules in content scripts.
+ * Bundling solves this problem, but not in the case of React, which is imported as JSX automatic conversion.
+ * So, I created a tag that brings the 'content view' from the 'content script', and implemented it by bypassing the tag in the form of inserting it into the html.
+ * If there is a better implementation (bundling option or other method, etc.), please suggest it.
+ */
+function injectContentViewScript() {
+  const script = createContentViewScript();
+  const target = getTargetElement();
+
+  target.insertBefore(script, target.lastChild);
+}
+
+function createContentViewScript(): HTMLScriptElement {
+  const script = document.createElement("script");
+  script.setAttribute("type", "module");
+  script.setAttribute(
+    "src",
+    chrome.runtime.getURL("src/pages/contentView/index.js")
+  );
+  return script;
+}
+
+function getTargetElement(): HTMLElement {
+  return (
+    document.head ||
+    document.getElementsByTagName("head")[0] ||
+    document.documentElement
+  );
+}

src/pages/contentView/app.tsx

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+
+export default function App() {
+  useEffect(() => {
+    console.log("content view loaded");
+  }, []);
+
+  return <div>content view</div>;
+}

src/pages/contentView/index.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from "react-dom/client";
+import App from "@pages/contentView/app";
+
+const div = document.createElement("div");
+document.body.append(div);
+
+createRoot(div).render(<App />);

vite.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
         devtools: resolve(pagesDir, "devtools", "index.html"),
         panel: resolve(pagesDir, "panel", "index.html"),
         content: resolve(pagesDir, "content", "index.ts"),
+        contentView: resolve(pagesDir, "contentView", "index.tsx"),
         background: resolve(pagesDir, "background", "index.ts"),
         popup: resolve(pagesDir, "popup", "index.html"),
         newtab: resolve(pagesDir, "newtab", "index.html"),