feat: expose debug mode for main world via content script

src/common/TaskUI.tsx

@@ -1,10 +1,9 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import {
   Button,
   Box,
   HStack,
   Spacer,
-  Textarea,
   useToast,
   Alert,
   AlertIcon,
@@ -19,6 +18,19 @@ import TaskStatus from "./TaskStatus";
 import RecommendedTasks from "./RecommendedTasks";
 import AutosizeTextarea from "./AutosizeTextarea";
 
+const injectContentScript = async () => {
+  const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
+  if (!tab || !tab.id) {
+    return;
+  }
+
+  await chrome.scripting.executeScript({
+    target: { tabId: tab.id },
+    files: ["src/pages/contentInjected/index.js"],
+    world: "MAIN",
+  });
+};
+
 function ActionExecutor() {
   const state = useAppState((state) => ({
     attachDebugger: state.currentTask.actions.attachDebugger,
@@ -27,28 +39,26 @@ function ActionExecutor() {
     prepareLabels: state.currentTask.actions.prepareLabels,
     showImagePrompt: state.currentTask.actions.showImagePrompt,
   }));
-  const [action, setAction] = useState<string>(`{
-  "thought": "try searching",
-  "action": "click('search')"
-}
-`);
   return (
     <Box mt={4}>
-      <Textarea
-        value={action}
-        onChange={(e) => setAction(e.target.value)}
-        mb={2}
-      />
-      <HStack>
+      <HStack
+        columnGap="0.5rem"
+        rowGap="0.5rem"
+        fontSize="md"
+        borderTop="1px dashed gray"
+        py="3"
+        shouldWrapChildren
+        wrap="wrap"
+      >
         <Button onClick={state.attachDebugger}>Attach</Button>
         <Button onClick={state.prepareLabels}>Prepare</Button>
         <Button onClick={state.showImagePrompt}>Show Image</Button>
         <Button
           onClick={() => {
-            state.performActionString(action);
+            injectContentScript();
           }}
         >
-          Run
+          Inject
         </Button>
       </HStack>
     </Box>

src/pages/content/index.ts

@@ -8,5 +8,3 @@
  *
  */
 import("@pages/content/injected");
-
-console.log("content loaded");

utils/plugins/inline-vite-preload-script.ts

@@ -0,0 +1,31 @@
+/**
+ * solution for multiple content scripts
+ * https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/177#issuecomment-1784112536
+ */
+export default function inlineVitePreloadScript() {
+  let __vitePreload = "";
+  return {
+    name: "replace-vite-preload-script-plugin",
+    // @ts-expect-error: vite types are not up-to-date
+    async renderChunk(code, chunk, options, meta) {
+      if (!/content/.test(chunk.fileName.toLowerCase())) {
+        return null;
+      }
+      const chunkName: string | undefined = Object.keys(meta.chunks).find(
+        (key) => /preload/.test(key),
+      );
+      if (!chunkName) {
+        return null;
+      }
+      const modules = meta.chunks[chunkName].modules;
+      console.log(modules);
+      if (!__vitePreload) {
+        __vitePreload = modules[Object.keys(modules)[0]].code;
+        __vitePreload = __vitePreload.replaceAll("const ", "var ");
+      }
+      return {
+        code: __vitePreload + code.split(`\n`).slice(1).join(`\n`),
+      };
+    },
+  };
+}

vite.config.ts

@@ -4,6 +4,7 @@ import path, { resolve } from "path";
 import makeManifest from "./utils/plugins/make-manifest";
 import customDynamicImport from "./utils/plugins/custom-dynamic-import";
 import addHmr from "./utils/plugins/add-hmr";
+import inlineVitePreloadScript from "./utils/plugins/inline-vite-preload-script";
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, "src");
@@ -32,6 +33,7 @@ export default defineConfig({
     react(),
     customDynamicImport(),
     addHmr({ background: enableHmrInBackgroundScript, view: true }),
+    inlineVitePreloadScript(),
   ],
   publicDir,
   build: {
@@ -50,10 +52,8 @@ export default defineConfig({
         content: resolve(pagesDir, "content", "index.ts"),
         contentStyleGlobal: resolve(pagesDir, "content", "style.global.scss"),
         contentStyle: resolve(pagesDir, "content", "style.scss"),
+        contentInjected: resolve(pagesDir, "content/mainWorld", "index.ts"),
         permission: resolve(pagesDir, "permission", "index.html"),
-        // TODO: current cannot support multiple content script entry files
-        // https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/306#issuecomment-1981885190
-        // mainWorld: resolve(pagesDir, "content/mainWorld", "index.ts"),
         popup: resolve(pagesDir, "popup", "index.html"),
         newtab: resolve(pagesDir, "newtab", "index.html"),
         options: resolve(pagesDir, "options", "index.html"),