feat: add react components for Popup & Options

src/Options/Options.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Options = () => {
+    return <div>Hello World</div>;
+};
+
+export default Options;

src/Options/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Options from './Options';
+
+ReactDOM.render(<Options />, document.getElementById('options-root'));

src/Popup/Popup.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Popup = () => {
+    return <div>Hello world</div>;
+};
+
+export default Popup;

src/Popup/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Popup from './Popup';
+
+ReactDOM.render(<Popup />, document.getElementById('popup-root'));

src/scripts/options.js

@@ -1 +0,0 @@
-console.log('Hello World from options main file!');

src/scripts/popup.js

@@ -1,18 +0,0 @@
-import browser from 'webextension-polyfill';
-
-document.addEventListener('DOMContentLoaded', async () => {
-    const tabs = await browser.tabs.query({
-        active: true,
-        lastFocusedWindow: true,
-    });
-
-    const url = tabs.length && tabs[0].url;
-
-    const response = await browser.runtime.sendMessage({
-        msg: 'hello',
-        url,
-    });
-
-    // eslint-disable-next-line no-console
-    console.log(response);
-});

webpack.config.js

@@ -54,8 +54,8 @@ module.exports = {
     entry: {
         background: path.join(sourcePath, 'Background', 'index.ts'),
         contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
-        popup: './src/scripts/popup.js',
-        options: './src/scripts/options.js',
+        popup: path.join(sourcePath, 'Popup', 'index.tsx'),
+        options: path.join(sourcePath, 'Options', 'index.tsx'),
         styles: [path.join(sourcePath, 'Popup', 'popup.scss'), path.join(sourcePath, 'Options', 'options.scss')],
     },