#16 Create webpack config file for development and production env

package.json

@@ -4,8 +4,8 @@
   "description": "A chrome extension to watch movies together",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --config webpack.config.js",
-    "watch": "watch 'npm run build'"
+    "build": "webpack --config webpack.prod.js",
+    "dev": "webpack --progress --config webpack.dev.js"
   },
   "repository": {
     "type": "git",
@@ -19,12 +19,30 @@
   },
   "homepage": "https://github.com/abozanona/luca#readme",
   "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-react": "^7.16.7",
     "@types/chrome": "0.0.183",
+    "babel-loader": "^8.2.5",
     "copy-webpack-plugin": "^9.1.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "cssnano": "^5.1.7",
+    "file-loader": "^6.2.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
+    "node-sass": "^7.0.1",
+    "sass-loader": "^12.6.0",
     "ts-loader": "^9.2.9",
     "typescript": "^4.6.4",
     "watch": "^1.0.2",
     "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2"
+    "webpack-cli": "^4.9.2",
+    "webpack-merge": "^5.8.0"
+  },
+  "dependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
   }
 }

public/manifest.json

@@ -4,48 +4,16 @@
     "description": "This extension gives you the ability to create rooms and watch online videos with your friends.",
     "version": "1.0.1",
     "action": {
-        "default_icon": "icon128.png",
-        "default_popup": "popup.html",
+        "default_popup": "index.html",
         "default_title": "Luca - Watch movies with friends"
     },
-    "icons": {
-        "128": "icon128.png"
-    },
-    "background": {
-        "service_worker": "js/background.js"
-    },
-    "content_scripts": [
-        {
-            "matches": [
-                "*://*/*"
-            ],
-            "js": [
-                "js/socket.io.js",
-                "js/jquery.min.js",
-                "js/content.js"
-            ],
-            "run_at": "document_idle",
-            "all_frames": true
-        }
-    ],
+
     "host_permissions": [
         "*://*/*"
     ],
     "permissions": [
         "tabs",
         "storage"
     ],
-    "manifest_version": 3,
-    "web_accessible_resources": [
-        {
-            "resources": [
-                "js/*",
-                "css/page-style.css",
-                "img/reactions/*"
-            ],
-            "matches": [
-                "<all_urls>"
-            ]
-        }
-    ]
+    "manifest_version": 3
 }

src/index.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render } from "react-dom";
+import './style/index.scss';
+
+function Popup() {
+  return (
+    <div>
+      <h1>Hello World</h1>
+      <p>This is a very simple example</p>
+    </div>
+  );
+}
+
+render(<Popup />, document.getElementById("react-target"));

src/js/popup.ts

@@ -40,7 +40,6 @@ Array.from(document.getElementsByClassName("img-avatar")).forEach(element => {
 		(el.target as HTMLElement).classList.add('img-avatar-selected');
 		let avatarName = (el.target as HTMLElement).dataset.name;
 		chrome.storage.sync.set({ userAvatar: avatarName }, function () {
-
 		});
 	});
 });
@@ -50,7 +49,6 @@ chrome.storage.sync.get('userAvatar', function (items) {
 	if (!userAvatar) {
 		userAvatar = 'avatar-1';
 		chrome.storage.sync.set({ userAvatar: userAvatar }, function () {
-
 		});
 	}
 	document.querySelector("[data-name=\"" + userAvatar + "\"]").classList.add("img-avatar-selected");
@@ -66,10 +64,8 @@ chrome.storage.sync.get('userName', function (items) {
 	let userName = items.userName;
 	if (!userName) {
 		var randomNames = ['Luca Paguro', 'Alberto Scorfano', 'Giulia Marcovaldo', 'Ercole Visconti', 'Daniela Paguro', 'Massimo Marcovaldo', 'Lorenzo Paguro', 'Ciccio', 'Guido', 'Signora Marsigliese', 'Tommaso', 'Grandma Paguro', 'Giacomo', 'Concetta Aragosta', 'Pinuccia Aragosta', 'Uncle Ugo', 'Maggiore'];
-
 		userName = randomNames[Math.floor(Math.random() * randomNames.length)];
 		chrome.storage.sync.set({ userName: userName }, function () {
-
 		});
 	}
 	(document.getElementById("txt-user-name") as HTMLInputElement).value = userName;
@@ -82,6 +78,7 @@ var actionsOrder = [
 	'ROOM_SETUP_COMPLETED',
 ];
 var currentAction = 'NOTHING';
+
 function getCurrentPageStatus() {
 	currentAction = 'NOTHING';
 	renderPopupScreen(currentAction);

src/style/index.scss

@@ -0,0 +1,3 @@
+body{
+    background-color: teal;
+}

src/template.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>skafi</h1>
+	<div id="react-target"></div>
+</body>
+</html>