Merge pull request #6 from rezasohrabi/develop

Develop
rezasohrabi · May 8, 2024 · 13da7c4 · 13da7c4
2 parents 0d8f850 + 401b272
commit 13da7c4
Show file tree

Hide file tree

Showing 12 changed files with 94 additions and 17 deletions.
diff --git a/src/content/index.css → src/assets/styles/index.css b/src/content/index.css → src/assets/styles/index.css
diff --git a/src/content/index.dev.tsx b/src/content/index.dev.tsx
@@ -14,7 +14,7 @@ import { createRoot } from 'react-dom/client';
 
 import Content from './Content';
 
-import './index.css';
+import '@assets/styles/index.css';
 
 const container = document.createElement('div');
 

diff --git a/src/content/index.prod.tsx b/src/content/index.prod.tsx
@@ -1,17 +1,9 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import styles from '@assets/styles/index.css?inline';
+import createShadowRoot from '@utils/createShadowRoot';
 
 import Content from './Content';
-import styles from './index.css?inline';
 
-const container = document.createElement('div');
-const shadow = container.attachShadow({ mode: 'open' });
-const globalStyleSheet = new CSSStyleSheet();
-globalStyleSheet.replaceSync(styles);
-
-shadow.adoptedStyleSheets = [globalStyleSheet];
-document.body.appendChild(container);
-
-const root = createRoot(shadow);
+const root = createShadowRoot(styles);
 
 root.render(<Content />);
diff --git a/src/manifest.ts b/src/manifest.ts
@@ -18,6 +18,7 @@ export default defineManifest({
   },
   options_page: 'src/options/index.html',
   action: {
+    default_popup: 'src/popup/index.html',
     default_icon: {
       16: 'icon16.png',
       32: 'icon32.png',

diff --git a/src/options/Options.tsx b/src/options/Options.tsx
@@ -1,5 +1,20 @@
 import React, { JSX } from 'react';
 
 export default function Options(): JSX.Element {
-  return <div className='container'>Options</div>;
+  return (
+    <div id='my-ext' className='container' data-theme='light'>
+      <button type='button' className='btn btn-outline'>
+        Default
+      </button>
+      <button type='button' className='btn btn-outline btn-primary'>
+        Primary
+      </button>
+      <button type='button' className='btn btn-outline btn-secondary'>
+        Secondary
+      </button>
+      <button type='button' className='btn btn-outline btn-accent'>
+        Accent
+      </button>
+    </div>
+  );
 }
diff --git a/src/options/index.css b/src/options/index.css
diff --git a/src/options/index.tsx b/src/options/index.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import styles from '@assets/styles/index.css?inline';
+import createShadowRoot from '@utils/createShadowRoot';
 
 import Options from './Options';
 
-import './index.css';
-
-const root = createRoot(document.getElementById('my-ext-options-page')!);
+const root = createShadowRoot(styles);
 
 root.render(<Options />);
diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -0,0 +1,20 @@
+import React, { JSX } from 'react';
+
+export default function Popup(): JSX.Element {
+  return (
+    <div id='my-ext' className='container' data-theme='light'>
+      <button type='button' className='btn btn-outline'>
+        Default
+      </button>
+      <button type='button' className='btn btn-outline btn-primary'>
+        Primary
+      </button>
+      <button type='button' className='btn btn-outline btn-secondary'>
+        Secondary
+      </button>
+      <button type='button' className='btn btn-outline btn-accent'>
+        Accent
+      </button>
+    </div>
+  );
+}
diff --git a/src/popup/index.html b/src/popup/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>my ext popup page</title>
+  </head>
+
+  <body>
+    <div id="my-ext-popup-page"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>
diff --git a/src/popup/index.tsx b/src/popup/index.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from '@assets/styles/index.css?inline';
+import createShadowRoot from '@utils/createShadowRoot';
+
+import Popup from './Popup';
+
+const root = createShadowRoot(styles);
+
+root.render(<Popup />);
diff --git a/src/utils/createShadowRoot.tsx b/src/utils/createShadowRoot.tsx
@@ -0,0 +1,27 @@
+import { createRoot } from 'react-dom/client';
+
+/**
+ * Creates a shadow root with the specified styles and returns a React root in it.
+ * @param {string} styles - CSS styles to be applied to the shadow root.
+ * @returns {ReactRoot} - React root rendered inside the shadow root.
+ */
+export default function createShadowRoot(styles: string) {
+  // Create a container element to hold the shadow root
+  const container = document.createElement('div');
+
+  // Attach a shadow root to the container element
+  const shadow = container.attachShadow({ mode: 'open' });
+
+  // Create a new CSS style sheet and apply the specified styles
+  const globalStyleSheet = new CSSStyleSheet();
+  globalStyleSheet.replaceSync(styles);
+
+  // Apply the style sheet to the shadow root
+  shadow.adoptedStyleSheets = [globalStyleSheet];
+
+  // Append the container element to the document body
+  document.body.appendChild(container);
+
+  // Return a React root created inside the shadow root
+  return createRoot(shadow);
+}
diff --git a/vite.config.ts b/vite.config.ts
@@ -36,6 +36,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@utils': resolve(__dirname, './src/utils'),
+      '@assets': resolve(__dirname, './src/assets'),
     },
   },
 });