From 6dcc8f20b71ca22ce13e60a5c84e75b25f384b17 Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Mon, 15 Jul 2024 12:04:13 +0200
Subject: [PATCH 1/9] feat: create utility for injecting scripts from popup

---
 chrome-extension/manifest.js          |  3 ++-
 pages/content-runtime/lib/app.tsx     |  9 +++++++
 pages/content-runtime/lib/index.css   |  3 +++
 pages/content-runtime/lib/index.ts    | 11 ++++++++
 pages/content-runtime/lib/root.tsx    | 30 +++++++++++++++++++++
 pages/content-runtime/package.json    | 26 ++++++++++++++++++
 pages/content-runtime/tsconfig.json   | 11 ++++++++
 pages/content-runtime/vite.config.mts | 39 +++++++++++++++++++++++++++
 pages/popup/package.json              |  4 ++-
 pages/popup/src/Popup.tsx             | 18 ++++++++++++-
 pnpm-lock.yaml                        | 15 +++++++++++
 11 files changed, 166 insertions(+), 3 deletions(-)
 create mode 100644 pages/content-runtime/lib/app.tsx
 create mode 100644 pages/content-runtime/lib/index.css
 create mode 100644 pages/content-runtime/lib/index.ts
 create mode 100644 pages/content-runtime/lib/root.tsx
 create mode 100644 pages/content-runtime/package.json
 create mode 100644 pages/content-runtime/tsconfig.json
 create mode 100644 pages/content-runtime/vite.config.mts

diff --git a/chrome-extension/manifest.js b/chrome-extension/manifest.js
index 4913158fd..3cc63a9a5 100755
--- a/chrome-extension/manifest.js
+++ b/chrome-extension/manifest.js
@@ -26,7 +26,8 @@ const manifest = Object.assign(
     name: '__MSG_extensionName__',
     version: packageJson.version,
     description: '__MSG_extensionDescription__',
-    permissions: ['storage'].concat(sidePanelConfig.permissions),
+    host_permissions: ['<all_urls>'],
+    permissions: ['storage', 'scripting'].concat(sidePanelConfig.permissions),
     options_page: 'options/index.html',
     background: {
       service_worker: 'background.iife.js',
diff --git a/pages/content-runtime/lib/app.tsx b/pages/content-runtime/lib/app.tsx
new file mode 100644
index 000000000..8cbbd3777
--- /dev/null
+++ b/pages/content-runtime/lib/app.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+
+export default function App() {
+  useEffect(() => {
+    console.log('runtime content view loaded');
+  }, []);
+
+  return <div className="runtime-content-view-text">runtime content view</div>;
+}
diff --git a/pages/content-runtime/lib/index.css b/pages/content-runtime/lib/index.css
new file mode 100644
index 000000000..a91cda618
--- /dev/null
+++ b/pages/content-runtime/lib/index.css
@@ -0,0 +1,3 @@
+.runtime-content-view-text {
+    font-size: 20px;
+}
\ No newline at end of file
diff --git a/pages/content-runtime/lib/index.ts b/pages/content-runtime/lib/index.ts
new file mode 100644
index 000000000..bea5c4046
--- /dev/null
+++ b/pages/content-runtime/lib/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 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('@lib/root');
+console.log('runtime script loaded');
diff --git a/pages/content-runtime/lib/root.tsx b/pages/content-runtime/lib/root.tsx
new file mode 100644
index 000000000..2eb5a0956
--- /dev/null
+++ b/pages/content-runtime/lib/root.tsx
@@ -0,0 +1,30 @@
+import { createRoot } from 'react-dom/client';
+import App from '@lib/app';
+// eslint-disable-next-line
+// @ts-ignore
+import injectedStyle from '@lib/index.css?inline';
+
+const root = document.createElement('div');
+root.id = 'chrome-extension-boilerplate-react-vite-runtime-content-view-root';
+
+document.body.append(root);
+
+const rootIntoShadow = document.createElement('div');
+rootIntoShadow.id = 'shadow-root';
+
+const shadowRoot = root.attachShadow({ mode: 'open' });
+shadowRoot.appendChild(rootIntoShadow);
+
+/** Inject styles into shadow dom */
+const styleElement = document.createElement('style');
+styleElement.innerHTML = injectedStyle;
+shadowRoot.appendChild(styleElement);
+
+/**
+ * https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
+ *
+ * In the firefox environment, the adoptedStyleSheets bug may prevent contentStyle from being applied properly.
+ * Please refer to the PR link above and go back to the contentStyle.css implementation, or raise a PR if you have a better way to improve it.
+ */
+
+createRoot(rootIntoShadow).render(<App />);
diff --git a/pages/content-runtime/package.json b/pages/content-runtime/package.json
new file mode 100644
index 000000000..da2712356
--- /dev/null
+++ b/pages/content-runtime/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@chrome-extension-boilerplate/content-runtime-script",
+  "version": "0.0.1",
+  "description": "chrome extension content runtime script",
+  "private": true,
+  "sideEffects": true,
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build": "pnpm run clean && tsc --noEmit && vite build",
+    "build:watch": "cross-env __DEV__=true vite build -w --mode development",
+    "dev": "pnpm build:watch",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "pnpm lint --fix",
+    "prettier": "prettier . --write --ignore-path ../../.prettierignore",
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@chrome-extension-boilerplate/tsconfig": "workspace:*",
+    "@chrome-extension-boilerplate/hmr": "workspace:*"
+  }
+}
diff --git a/pages/content-runtime/tsconfig.json b/pages/content-runtime/tsconfig.json
new file mode 100644
index 000000000..ccbab7821
--- /dev/null
+++ b/pages/content-runtime/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "@chrome-extension-boilerplate/tsconfig/base",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@lib/*": ["lib/*"]
+    },
+    "types": ["chrome"]
+  },
+  "include": ["lib"]
+}
diff --git a/pages/content-runtime/vite.config.mts b/pages/content-runtime/vite.config.mts
new file mode 100644
index 000000000..3bc874d2c
--- /dev/null
+++ b/pages/content-runtime/vite.config.mts
@@ -0,0 +1,39 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { makeEntryPointPlugin, watchRebuildPlugin } from '@chrome-extension-boilerplate/hmr';
+
+const rootDir = resolve(__dirname);
+const libDir = resolve(rootDir, 'lib');
+
+const isDev = process.env.__DEV__ === 'true';
+const isProduction = !isDev;
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@lib': libDir,
+    },
+  },
+  plugins: [isDev && watchRebuildPlugin({ refresh: true }), isDev && makeEntryPointPlugin()],
+  publicDir: resolve(rootDir, 'public'),
+  build: {
+    lib: {
+      formats: ['iife'],
+      entry: resolve(__dirname, 'lib/index.ts'),
+      name: 'ContentRuntimeScript',
+      fileName: 'index',
+    },
+    outDir: resolve(rootDir, '..', '..', 'dist', 'content-runtime'),
+    emptyOutDir: true,
+    sourcemap: isDev,
+    minify: isProduction,
+    reportCompressedSize: isProduction,
+    modulePreload: true,
+    rollupOptions: {
+      external: ['chrome'],
+    },
+  },
+  define: {
+    'process.env.NODE_ENV': isDev ? `"development"` : `"production"`,
+  },
+});
diff --git a/pages/popup/package.json b/pages/popup/package.json
index 17aad98fd..50b5a41d1 100644
--- a/pages/popup/package.json
+++ b/pages/popup/package.json
@@ -19,7 +19,9 @@
   },
   "dependencies": {
     "@chrome-extension-boilerplate/shared": "workspace:*",
-    "@chrome-extension-boilerplate/storage": "workspace:*"
+    "@chrome-extension-boilerplate/storage": "workspace:*",
+    "@chrome-extension-boilerplate/content-runtime-script": "workspace:*",
+    "@types/node": "^20.14.10"
   },
   "devDependencies": {
     "@chrome-extension-boilerplate/tailwindcss-config": "workspace:*",
diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
index d279cffbb..9ac966335 100644
--- a/pages/popup/src/Popup.tsx
+++ b/pages/popup/src/Popup.tsx
@@ -1,7 +1,6 @@
 import '@src/Popup.css';
 import { useStorageSuspense, withErrorBoundary, withSuspense } from '@chrome-extension-boilerplate/shared';
 import { exampleThemeStorage } from '@chrome-extension-boilerplate/storage';
-
 import { ComponentPropsWithoutRef } from 'react';
 
 const Popup = () => {
@@ -9,6 +8,15 @@ const Popup = () => {
   const isLight = theme === 'light';
   const logo = isLight ? 'popup/logo_vertical.svg' : 'popup/logo_vertical_dark.svg';
 
+  const injectContentScript = async () => {
+    const [tab] = await chrome.tabs.query({ currentWindow: true, active: true });
+
+    await chrome.scripting.executeScript({
+      target: { tabId: tab.id! },
+      files: ['content-runtime/index.iife.js'],
+    });
+  };
+
   return (
     <div className={`App ${isLight ? 'bg-slate-50' : 'bg-gray-800'}`}>
       <header className={`App-header ${isLight ? 'text-gray-900' : 'text-gray-100'}`}>
@@ -16,6 +24,14 @@ const Popup = () => {
         <p>
           Edit <code>pages/popup/src/Popup.tsx</code>
         </p>
+        <button
+          style={{
+            backgroundColor: theme === 'light' ? '#fff' : '#000',
+            color: theme === 'light' ? '#000' : '#fff',
+          }}
+          onClick={injectContentScript}>
+          Click to inject Content Script
+        </button>
         <ToggleButton>Toggle theme</ToggleButton>
       </header>
     </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c9ffd0b9..8089369b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -218,6 +218,15 @@ importers:
         specifier: workspace:*
         version: link:../../packages/vite-config
 
+  pages/content-runtime:
+    devDependencies:
+      '@chrome-extension-boilerplate/hmr':
+        specifier: workspace:*
+        version: link:../../packages/hmr
+      '@chrome-extension-boilerplate/tsconfig':
+        specifier: workspace:*
+        version: link:../../packages/tsconfig
+
   pages/content-ui:
     dependencies:
       '@chrome-extension-boilerplate/shared':
@@ -312,12 +321,18 @@ importers:
 
   pages/popup:
     dependencies:
+      '@chrome-extension-boilerplate/content-runtime-script':
+        specifier: workspace:*
+        version: link:../content-runtime
       '@chrome-extension-boilerplate/shared':
         specifier: workspace:*
         version: link:../../packages/shared
       '@chrome-extension-boilerplate/storage':
         specifier: workspace:*
         version: link:../../packages/storage
+      '@types/node':
+        specifier: ^20.14.10
+        version: 20.14.10
     devDependencies:
       '@chrome-extension-boilerplate/tailwindcss-config':
         specifier: workspace:*

From 39baa0fc5e315a1e43e28993cdcad2f0765e8a0c Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Wed, 17 Jul 2024 11:04:30 +0200
Subject: [PATCH 2/9] chore: adjust vite config for the latest changes

---
 pages/content-runtime/package.json    |  3 ++-
 pages/content-runtime/vite.config.mts | 22 ++++------------------
 pnpm-lock.yaml                        |  3 +++
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/pages/content-runtime/package.json b/pages/content-runtime/package.json
index da2712356..1fd7f37c0 100644
--- a/pages/content-runtime/package.json
+++ b/pages/content-runtime/package.json
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@chrome-extension-boilerplate/tsconfig": "workspace:*",
-    "@chrome-extension-boilerplate/hmr": "workspace:*"
+    "@chrome-extension-boilerplate/hmr": "workspace:*",
+    "@chrome-extension-boilerplate/vite-config": "workspace:*"
   }
 }
diff --git a/pages/content-runtime/vite.config.mts b/pages/content-runtime/vite.config.mts
index 3bc874d2c..9f883a4de 100644
--- a/pages/content-runtime/vite.config.mts
+++ b/pages/content-runtime/vite.config.mts
@@ -1,20 +1,17 @@
-import { defineConfig } from 'vite';
 import { resolve } from 'path';
-import { makeEntryPointPlugin, watchRebuildPlugin } from '@chrome-extension-boilerplate/hmr';
+import { makeEntryPointPlugin } from '@chrome-extension-boilerplate/hmr';
+import { withPageConfig, isDev } from '@chrome-extension-boilerplate/vite-config';
 
 const rootDir = resolve(__dirname);
 const libDir = resolve(rootDir, 'lib');
 
-const isDev = process.env.__DEV__ === 'true';
-const isProduction = !isDev;
-
-export default defineConfig({
+export default withPageConfig({
   resolve: {
     alias: {
       '@lib': libDir,
     },
   },
-  plugins: [isDev && watchRebuildPlugin({ refresh: true }), isDev && makeEntryPointPlugin()],
+  plugins: [isDev && makeEntryPointPlugin()],
   publicDir: resolve(rootDir, 'public'),
   build: {
     lib: {
@@ -24,16 +21,5 @@ export default defineConfig({
       fileName: 'index',
     },
     outDir: resolve(rootDir, '..', '..', 'dist', 'content-runtime'),
-    emptyOutDir: true,
-    sourcemap: isDev,
-    minify: isProduction,
-    reportCompressedSize: isProduction,
-    modulePreload: true,
-    rollupOptions: {
-      external: ['chrome'],
-    },
-  },
-  define: {
-    'process.env.NODE_ENV': isDev ? `"development"` : `"production"`,
   },
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8089369b2..fd4fa5c65 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -226,6 +226,9 @@ importers:
       '@chrome-extension-boilerplate/tsconfig':
         specifier: workspace:*
         version: link:../../packages/tsconfig
+      '@chrome-extension-boilerplate/vite-config':
+        specifier: workspace:*
+        version: link:../../packages/vite-config
 
   pages/content-ui:
     dependencies:

From 6768b59dd9840c2d70978328b36d3d5566989279 Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Sat, 20 Jul 2024 16:49:18 +0200
Subject: [PATCH 3/9] fix: use proper command for build script in package.json

---
 pages/content-runtime/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/content-runtime/package.json b/pages/content-runtime/package.json
index 1fd7f37c0..a244b4b8e 100644
--- a/pages/content-runtime/package.json
+++ b/pages/content-runtime/package.json
@@ -9,7 +9,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "build": "pnpm run clean && tsc --noEmit && vite build",
+    "build": "pnpm run clean && pnpm type-check && vite build",
     "build:watch": "cross-env __DEV__=true vite build -w --mode development",
     "dev": "pnpm build:watch",
     "lint": "eslint . --ext .ts,.tsx",

From 3cdeeee49a6ead4ff164e29eaa7511ec00abadd0 Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Sat, 20 Jul 2024 16:50:04 +0200
Subject: [PATCH 4/9] feat: create styles for inject buttons

---
 pages/content-ui/src/tailwind-output.css | 18 +++++++-----------
 pages/popup/src/Popup.tsx                |  8 ++++----
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/pages/content-ui/src/tailwind-output.css b/pages/content-ui/src/tailwind-output.css
index ea0c743a1..c61733b6a 100644
--- a/pages/content-ui/src/tailwind-output.css
+++ b/pages/content-ui/src/tailwind-output.css
@@ -44,10 +44,9 @@ html,
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-  tab-size: 4;
+     tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
-    'Noto Color Emoji';
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -90,7 +89,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -136,7 +135,7 @@ code,
 kbd,
 samp,
 pre {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
   font-feature-settings: normal;
   /* 2 */
@@ -379,8 +378,7 @@ textarea {
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1;
   /* 1 */
   color: #9ca3af;
@@ -400,7 +398,7 @@ Set the default cursor for buttons.
 */
 
 button,
-[role='button'] {
+[role="button"] {
   cursor: pointer;
 }
 
@@ -448,9 +446,7 @@ video {
   display: none;
 }
 
-*,
-::before,
-::after {
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
index 9ac966335..121f99f0d 100644
--- a/pages/popup/src/Popup.tsx
+++ b/pages/popup/src/Popup.tsx
@@ -25,10 +25,10 @@ const Popup = () => {
           Edit <code>pages/popup/src/Popup.tsx</code>
         </p>
         <button
-          style={{
-            backgroundColor: theme === 'light' ? '#fff' : '#000',
-            color: theme === 'light' ? '#000' : '#fff',
-          }}
+          className={
+            'font-bold mt-4 py-1 px-4 rounded shadow hover:scale-105 ' +
+            (isLight ? 'bg-blue-200 text-black' : 'bg-gray-700 text-white')
+          }
           onClick={injectContentScript}>
           Click to inject Content Script
         </button>

From 4cfdcd994d594bcb7fa77000f82d947f4d6d35ca Mon Sep 17 00:00:00 2001
From: Patryk Kuniczak <p.kuniczak@gmail.com>
Date: Sat, 20 Jul 2024 16:50:36 +0200
Subject: [PATCH 5/9] feat: create little border to toggle button

---
 pages/popup/src/Popup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/popup/src/Popup.tsx b/pages/popup/src/Popup.tsx
index 121f99f0d..344fb1956 100644
--- a/pages/popup/src/Popup.tsx
+++ b/pages/popup/src/Popup.tsx
@@ -46,7 +46,7 @@ const ToggleButton = (props: ComponentPropsWithoutRef<'button'>) => {
         props.className +
         ' ' +
         'font-bold mt-4 py-1 px-4 rounded shadow hover:scale-105 ' +
-        (theme === 'light' ? 'bg-white text-black' : 'bg-black text-white')
+        (theme === 'light' ? 'bg-white text-black shadow-black' : 'bg-black text-white')
       }
       onClick={exampleThemeStorage.toggle}>
       {props.children}

From daabef2f45c3cc0a39ac0edbfcaa3a792fb0c793 Mon Sep 17 00:00:00 2001
From: Jonghakseo <unqocn@gmail.com>
Date: Sun, 21 Jul 2024 00:55:41 +0900
Subject: [PATCH 6/9] fix: add missing permission

---
 chrome-extension/manifest.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/chrome-extension/manifest.js b/chrome-extension/manifest.js
index 7e02062d7..bf65476d4 100755
--- a/chrome-extension/manifest.js
+++ b/chrome-extension/manifest.js
@@ -28,7 +28,7 @@ const manifest = deepmerge(
     version: packageJson.version,
     description: '__MSG_extensionDescription__',
     host_permissions: ['<all_urls>'],
-    permissions: ['storage'],
+    permissions: ['storage', 'scripting'],
     options_page: 'options/index.html',
     background: {
       service_worker: 'background.iife.js',

From 1df4e4f47d7db4feb46f610b1b1021d41ff1c1eb Mon Sep 17 00:00:00 2001
From: Jonghakseo <unqocn@gmail.com>
Date: Sun, 21 Jul 2024 00:55:55 +0900
Subject: [PATCH 7/9] fix: remove unused plugin

---
 pages/content-runtime/vite.config.mts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pages/content-runtime/vite.config.mts b/pages/content-runtime/vite.config.mts
index 9f883a4de..fe1a06ad4 100644
--- a/pages/content-runtime/vite.config.mts
+++ b/pages/content-runtime/vite.config.mts
@@ -1,6 +1,5 @@
 import { resolve } from 'path';
-import { makeEntryPointPlugin } from '@chrome-extension-boilerplate/hmr';
-import { withPageConfig, isDev } from '@chrome-extension-boilerplate/vite-config';
+import { withPageConfig } from '@chrome-extension-boilerplate/vite-config';
 
 const rootDir = resolve(__dirname);
 const libDir = resolve(rootDir, 'lib');
@@ -11,7 +10,6 @@ export default withPageConfig({
       '@lib': libDir,
     },
   },
-  plugins: [isDev && makeEntryPointPlugin()],
   publicDir: resolve(rootDir, 'public'),
   build: {
     lib: {

From e8d91bacde8a3f48f48e163a5533222f0ddf2708 Mon Sep 17 00:00:00 2001
From: Jonghakseo <unqocn@gmail.com>
Date: Sun, 21 Jul 2024 01:09:57 +0900
Subject: [PATCH 8/9] docs: add comment about firefox adoptedStyleSheets bug

---
 pages/content-runtime/lib/root.tsx | 22 +++++++++++++++-------
 pages/content-ui/src/index.tsx     | 15 ++++++++++++++-
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/pages/content-runtime/lib/root.tsx b/pages/content-runtime/lib/root.tsx
index 2eb5a0956..956699d2c 100644
--- a/pages/content-runtime/lib/root.tsx
+++ b/pages/content-runtime/lib/root.tsx
@@ -16,15 +16,23 @@ const shadowRoot = root.attachShadow({ mode: 'open' });
 shadowRoot.appendChild(rootIntoShadow);
 
 /** Inject styles into shadow dom */
-const styleElement = document.createElement('style');
-styleElement.innerHTML = injectedStyle;
-shadowRoot.appendChild(styleElement);
-
+const globalStyleSheet = new CSSStyleSheet();
+globalStyleSheet.replaceSync(injectedStyle);
+shadowRoot.adoptedStyleSheets = [globalStyleSheet];
+shadowRoot.appendChild(rootIntoShadow);
 /**
- * https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
+ * In the firefox environment, the adoptedStyleSheets bug may prevent style from being applied properly.
+ *
+ * @url https://bugzilla.mozilla.org/show_bug.cgi?id=1770592
+ * @url https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
+ *
+ * Please refer to the links above and try the following code if you encounter the issue.
  *
- * In the firefox environment, the adoptedStyleSheets bug may prevent contentStyle from being applied properly.
- * Please refer to the PR link above and go back to the contentStyle.css implementation, or raise a PR if you have a better way to improve it.
+ * ```ts
+ * const styleElement = document.createElement('style');
+ * styleElement.innerHTML = injectedStyle;
+ * shadowRoot.appendChild(styleElement);
+ * ```
  */
 
 createRoot(rootIntoShadow).render(<App />);
diff --git a/pages/content-ui/src/index.tsx b/pages/content-ui/src/index.tsx
index 6344a1151..e5a02719a 100644
--- a/pages/content-ui/src/index.tsx
+++ b/pages/content-ui/src/index.tsx
@@ -18,8 +18,21 @@ shadowRoot.appendChild(rootIntoShadow);
 /** Inject styles into shadow dom */
 const globalStyleSheet = new CSSStyleSheet();
 globalStyleSheet.replaceSync(tailwindcssOutput);
-
 shadowRoot.adoptedStyleSheets = [globalStyleSheet];
 shadowRoot.appendChild(rootIntoShadow);
+/**
+ * In the firefox environment, the adoptedStyleSheets bug may prevent style from being applied properly.
+ *
+ * @url https://bugzilla.mozilla.org/show_bug.cgi?id=1770592
+ * @url https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite/pull/174
+ *
+ * Please refer to the links above and try the following code if you encounter the issue.
+ *
+
+ * const styleElement = document.createElement('style');
+ * styleElement.innerHTML = tailwindcssOutput;
+ * shadowRoot.appendChild(styleElement);
+ * ```
+ */
 
 createRoot(rootIntoShadow).render(<App />);

From b791f2725bafa8e7e22ac0ee12828453a3993246 Mon Sep 17 00:00:00 2001
From: Jonghakseo <unqocn@gmail.com>
Date: Sun, 21 Jul 2024 01:13:32 +0900
Subject: [PATCH 9/9] feat: run pnpm prettier

---
 packages/shared/build.mjs           | 10 +++++-----
 packages/ui/build.mjs               | 16 ++++++++--------
 pages/content-runtime/lib/index.css |  4 ++--
 pages/content-runtime/package.json  |  3 +--
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/shared/build.mjs b/packages/shared/build.mjs
index 5981ff505..0e96d84f2 100644
--- a/packages/shared/build.mjs
+++ b/packages/shared/build.mjs
@@ -1,15 +1,15 @@
-import * as esbuild from "esbuild"
+import * as esbuild from 'esbuild';
 
 /**
  * @type { import("esbuild").BuildOptions }
  */
 const buildOptions = {
-  entryPoints: ["./index.ts", "./lib/**/*.ts", "./lib/**/*.tsx"],
-  tsconfig: "./tsconfig.json",
+  entryPoints: ['./index.ts', './lib/**/*.ts', './lib/**/*.tsx'],
+  tsconfig: './tsconfig.json',
   bundle: false,
   target: 'es6',
-  outdir: "./dist",
+  outdir: './dist',
   sourcemap: true,
-}
+};
 
 await esbuild.build(buildOptions);
diff --git a/packages/ui/build.mjs b/packages/ui/build.mjs
index b9b9f4774..be04d2979 100644
--- a/packages/ui/build.mjs
+++ b/packages/ui/build.mjs
@@ -1,18 +1,18 @@
-import * as esbuild from "esbuild"
-import * as fs from "fs";
-import { resolve } from "node:path";
+import * as esbuild from 'esbuild';
+import * as fs from 'fs';
+import { resolve } from 'node:path';
 
 /**
  * @type { import("esbuild").BuildOptions }
  */
 const buildOptions = {
-  entryPoints: ["./index.ts","./tailwind.config.ts", "./lib/**/*.ts", "./lib/**/*.tsx"],
-  tsconfig: "./tsconfig.json",
+  entryPoints: ['./index.ts', './tailwind.config.ts', './lib/**/*.ts', './lib/**/*.tsx'],
+  tsconfig: './tsconfig.json',
   bundle: false,
   target: 'es6',
-  outdir: "./dist",
+  outdir: './dist',
   sourcemap: true,
-}
+};
 
 await esbuild.build(buildOptions);
-fs.copyFileSync(resolve("lib", "global.css"),resolve("dist", "global.css"))
+fs.copyFileSync(resolve('lib', 'global.css'), resolve('dist', 'global.css'));
diff --git a/pages/content-runtime/lib/index.css b/pages/content-runtime/lib/index.css
index a91cda618..151be5aab 100644
--- a/pages/content-runtime/lib/index.css
+++ b/pages/content-runtime/lib/index.css
@@ -1,3 +1,3 @@
 .runtime-content-view-text {
-    font-size: 20px;
-}
\ No newline at end of file
+  font-size: 20px;
+}
diff --git a/pages/content-runtime/package.json b/pages/content-runtime/package.json
index a244b4b8e..6f4c0a540 100644
--- a/pages/content-runtime/package.json
+++ b/pages/content-runtime/package.json
@@ -17,8 +17,7 @@
     "prettier": "prettier . --write --ignore-path ../../.prettierignore",
     "type-check": "tsc --noEmit"
   },
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
     "@chrome-extension-boilerplate/tsconfig": "workspace:*",
     "@chrome-extension-boilerplate/hmr": "workspace:*",