build: use webpack as builder

.editorconfig

@@ -2,4 +2,8 @@
 root = true
 indent_size = 1
 indent_style = tab
-tab_width = 2
+tab_width = 2
+
+[.eslintrc.yml]
+indent_size = 2
+indent_style = space

.eslintrc.yml

@@ -1,16 +1,19 @@
+root: true
 env:
   browser: true
   es2021: true
 extends:
-  - 'eslint:recommended'
-  - 'plugin:@typescript-eslint/recommended'
-  - 'prettier'
-parser: '@typescript-eslint/parser'
+  - "eslint:recommended"
+  - "plugin:@typescript-eslint/recommended"
+  - "plugin:prettier/recommended"
+parser: "@typescript-eslint/parser"
 parserOptions:
   ecmaVersion: 12
   sourceType: module
 plugins:
-  - '@typescript-eslint'
+  - "@typescript-eslint"
+ignorePatterns:
+  - "dist"
 rules:
   indent:
     - error

.gitignore

@@ -14,4 +14,4 @@
 node_modules/
 
 # dist
-dist/js/
+dist/

.prettierrc.yml

@@ -0,0 +1 @@
+singleQuote: true

package.json

@@ -1,24 +1,32 @@
 {
-  "name": "steelseries-cinema",
-  "version": "0.1.0",
-  "description": "Allows to subscribe to browser fullscreen event to control steelseries gears lighting",
-  "main": "index.js",
-  "repository": "[email protected]:meskill/steelseries-fullscreenhandler.git",
-  "author": "meskill <[email protected]>",
-  "license": "MIT",
-  "private": true,
-  "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch"
-  },
-  "devDependencies": {
-    "@types/chrome": "^0.0.154",
-    "@typescript-eslint/eslint-plugin": "^4.29.3",
-    "@typescript-eslint/parser": "^4.29.3",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.1",
-    "prettier": "^2.3.2",
-    "typescript": "^4.3.5"
-  }
-}
+	"name": "steelseries-cinema",
+	"version": "0.1.0",
+	"description": "Allows to subscribe to browser fullscreen event to control steelseries gears lighting",
+	"main": "index.js",
+	"repository": "[email protected]:meskill/steelseries-fullscreenhandler.git",
+	"author": "meskill <[email protected]>",
+	"license": "MIT",
+	"private": true,
+	"scripts": {
+		"build": "webpack build --config ./tools/webpack/config/prod.js",
+		"watch": "webpack watch --config ./tools/webpack/config/dev.js",
+		"lint": "eslint ./src/**/*.ts && eslint ./tools/**/*.js"
+	},
+	"devDependencies": {
+		"@types/chrome": "^0.0.154",
+		"@typescript-eslint/eslint-plugin": "^4.29.3",
+		"@typescript-eslint/parser": "^4.29.3",
+		"clean-webpack-plugin": "^4.0.0-alpha.0",
+		"copy-webpack-plugin": "^9.0.1",
+		"eslint": "^7.32.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-prettier": "^3.4.1",
+		"prettier": "^2.3.2",
+		"ts-loader": "^9.2.5",
+		"typescript": "^4.3.5",
+		"webpack": "^5.51.1",
+		"webpack-cli": "^4.8.0",
+		"webpack-dev-server": "^4.0.0",
+		"webpack-merge": "^5.8.0"
+	}
+}

src/background.ts

@@ -23,7 +23,7 @@ const readAddress = async (): Promise<string> => {
 				chrome.tabs.executeScript(
 					tabId,
 					{
-						file: 'js/readAddress.js',
+						file: './readAddress.js',
 						runAt: 'document_end',
 					},
 					(result) => {
@@ -51,27 +51,22 @@ const readAddress = async (): Promise<string> => {
 };
 
 chrome.runtime.onInstalled.addListener(async () => {
-	try {
-		address = await readAddress();
+	address = await readAddress();
 
-		await sendPost('game_metadata', {
-			game: 'CHROMIUM',
-			game_display_name: 'Chromium',
-			developer: 'meskill',
-			deinitialize_timer_length_ms: 30000,
-		});
+	await sendPost('game_metadata', {
+		game: 'CHROMIUM',
+		game_display_name: 'Chromium',
+		developer: 'meskill',
+		deinitialize_timer_length_ms: 30000,
+	});
 
-		await sendPost('register_game_event', {
-			game: 'CHROMIUM',
-			event: 'FULLSCREEN',
-			icon_id: 16,
-		});
+	await sendPost('register_game_event', {
+		game: 'CHROMIUM',
+		event: 'FULLSCREEN',
+		icon_id: 16,
+	});
 
-		console.log('done', address);
-	} catch (e) {
-		console.log(e);
-		console.log(chrome.runtime.lastError);
-	}
+	console.log('done', address);
 });
 
 chrome.runtime.lastError;

src/handler.ts

@@ -34,7 +34,7 @@
 		}
 	};
 
-	document.addEventListener('fullscreenchange', (event) => {
+	document.addEventListener('fullscreenchange', () => {
 		if (!address) {
 			chrome.runtime.sendMessage({ event: 'getAddress' }, (response) => {
 				address = response;

src/manifest.json

@@ -0,0 +1,26 @@
+{
+	"name": "SteelSeries fullscreen",
+	"version": "0.1.0",
+	"description": "Allows to subscribe to browser fullscreen event to control steelseries gears lighting",
+	"manifest_version": 2,
+	"permissions": [
+		"activeTab",
+		"file://*/*"
+	],
+	"background": {
+		"scripts": [
+			"background.js"
+		],
+		"persistent": false
+	},
+	"content_scripts": [
+		{
+			"matches": [
+				"https://*/*"
+			],
+			"js": [
+				"handler.js"
+			]
+		}
+	]
+}

src/readAddress.js

@@ -0,0 +1 @@
+JSON.parse(document.body.firstChild.innerText);

tools/.eslintrc.yml

@@ -0,0 +1,24 @@
+root: true
+env:
+  browser: true
+  commonjs: true
+  es2021: true
+  node: true
+extends:
+  - "eslint:recommended"
+  - "plugin:prettier/recommended"
+parserOptions:
+  ecmaVersion: 12
+rules:
+  indent:
+    - error
+    - tab
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - single
+  semi:
+    - error
+    - always

tools/webpack/config/common.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const CopyPlugin = require('copy-webpack-plugin');
+
+/**
+ * @type {import('webpack').Configuration}
+ */
+const config = {
+	entry: {
+		background: './src/background.ts',
+		handler: './src/handler.ts',
+	},
+	output: {
+		path: path.resolve(__dirname, '..', '..', '..', 'dist'),
+		filename: '[name].js',
+	},
+	plugins: [
+		new CopyPlugin({
+			patterns: [{ from: 'src/manifest.json' }, { from: 'src/readAddress.js' }],
+		}),
+	],
+	module: {
+		rules: [
+			{
+				test: /\.ts(x)?$/,
+				loader: 'ts-loader',
+				exclude: /node_modules/,
+			},
+		],
+	},
+	resolve: {
+		extensions: ['.tsx', '.ts', '.js'],
+	},
+};
+
+module.exports = config;

tools/webpack/config/dev.js

@@ -0,0 +1,12 @@
+const { merge } = require('webpack-merge');
+const common = require('./common');
+
+/**
+ * @type {import('webpack').Configuration}
+ */
+const config = {
+	mode: 'development',
+	devtool: false,
+};
+
+module.exports = merge(common, config);

tools/webpack/config/prod.js

@@ -0,0 +1,13 @@
+const { merge } = require('webpack-merge');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const common = require('./common');
+
+/**
+ * @type {import('webpack').Configuration}
+ */
+const config = {
+	mode: 'production',
+	plugins: [new CleanWebpackPlugin()],
+};
+
+module.exports = merge(common, config);