[Enhance] Support multiple content scripts

README.md

@@ -378,7 +378,7 @@ manifest.json
 
 ### ContentScript <a name="contentscript"></a>
 
-[Content Script](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)<br/>`content_scripts[0]` in
+[Content Script (contentInjected/contentUI)](https://developer.chrome.com/docs/extensions/mv3/content_scripts/)<br/>`content_scripts` in
 manifest.json
 
 ### Options <a name="options"></a>

manifest.js

@@ -37,10 +37,14 @@ const manifest = {
   content_scripts: [
     {
       matches: ['http://*/*', 'https://*/*', '<all_urls>'],
-      js: ['src/pages/content/index.js'],
+      js: ['src/pages/contentInjected/index.js'],
       // KEY for cache invalidation
       css: ['assets/css/contentStyle<KEY>.chunk.css'],
     },
+    {
+      matches: ['http://*/*', 'https://*/*', '<all_urls>'],
+      js: ['src/pages/contentUi/index.js'],
+    },
   ],
   devtools_page: 'src/pages/devtools/index.html',
   web_accessible_resources: [

src/pages/content/index.ts → src/pages/content/injected/index.ts

@@ -7,7 +7,4 @@
  * If you want to use other modules in content scripts, you need to import them via these files.
  *
  */
-import('@pages/content/ui');
-import('@pages/content/injected');
-
-console.log('content loaded');
+import('@pages/content/injected/toggleTheme');

src/pages/content/ui/index.ts

@@ -0,0 +1,10 @@
+/**
+ * DO NOT USE import someModule from '...';
+ *
+ * @issue-url https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/issues/160
+ *
+ * Chrome extensions don't support modules in content scripts.
+ * If you want to use other modules in content scripts, you need to import them via these files.
+ *
+ */
+import('@pages/content/ui/root');

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

@@ -0,0 +1,25 @@
+/**
+ * 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',
+    async renderChunk(code, chunk, options, meta) {
+      if (!/content/.test(chunk.fileName)) {
+        return null;
+      }
+      const chunkName = Object.keys(meta.chunks).find(key => /preload/.test(key));
+      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

@@ -6,6 +6,7 @@ import makeManifest from './utils/plugins/make-manifest';
 import customDynamicImport from './utils/plugins/custom-dynamic-import';
 import addHmr from './utils/plugins/add-hmr';
 import watchRebuild from './utils/plugins/watch-rebuild';
+import inlineVitePreloadScript from './utils/plugins/inline-vite-preload-script';
 
 const rootDir = resolve(__dirname);
 const srcDir = resolve(rootDir, 'src');
@@ -38,6 +39,7 @@ export default defineConfig({
     customDynamicImport(),
     addHmr({ background: enableHmrInBackgroundScript, view: true }),
     isDev && watchRebuild({ afterWriteBundle: regenerateCacheInvalidationKey }),
+    inlineVitePreloadScript(),
   ],
   publicDir,
   build: {
@@ -52,7 +54,8 @@ export default defineConfig({
       input: {
         devtools: resolve(pagesDir, 'devtools', 'index.html'),
         panel: resolve(pagesDir, 'panel', 'index.html'),
-        content: resolve(pagesDir, 'content', 'index.ts'),
+        contentInjected: resolve(pagesDir, 'content', 'injected', 'index.ts'),
+        contentUI: resolve(pagesDir, 'content', 'ui', 'index.ts'),
         background: resolve(pagesDir, 'background', 'index.ts'),
         contentStyle: resolve(pagesDir, 'content', 'style.scss'),
         popup: resolve(pagesDir, 'popup', 'index.html'),