feat: add runtime ui component

src/pages/content/runtime/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</div>;
+}

src/pages/content/runtime/index.ts

@@ -1 +1,11 @@
-console.log('runtime content loaded');
+/**
+ * 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/runtime/root');
+console.log('runtime script loaded');

src/pages/content/runtime/root.tsx

@@ -0,0 +1,31 @@
+import { createRoot } from 'react-dom/client';
+import App from '@pages/content/ui/app';
+import refreshOnUpdate from 'virtual:reload-on-update-in-view';
+import injectedStyle from './injected.css?inline';
+
+refreshOnUpdate('pages/content');
+
+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 />);

src/pages/popup/Popup.tsx

@@ -46,7 +46,14 @@ const Popup = () => {
           Toggle theme
         </button>
 
-        <button onClick={injectContentScript}>Click to inject Content Script</button>
+        <button
+          style={{
+            backgroundColor: theme === 'light' ? '#fff' : '#000',
+            color: theme === 'light' ? '#000' : '#fff',
+          }}
+          onClick={injectContentScript}>
+          Click to inject Content Script
+        </button>
       </header>
     </div>
   );