Update things

package.json

@@ -4,17 +4,17 @@
   "description": "Aspect ratio fixer for youtube and other sites, with automatic aspect ratio detection. Supports ultrawide and other ratios.",
   "author": "Tamius Han <tamius.han@gmail.com>",
   "scripts": {
-    "build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack --hide-modules",
+    "build": "npm run pre-build; cross-env NODE_ENV=production BROWSER=firefox CHANNEL=stable webpack ",
     "build-all": "bash ./scripts/build-all.sh",
-    "build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack --hide-modules",
-    "build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack --hide-modules",
-    "build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack --hide-modules",
-    "build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack --hide-modules",
-    "build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack --hide-modules",
-    "build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack --hide-modules",
-    "build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack --hide-modules",
+    "build-chrome": "cross-env NODE_ENV=production BROWSER=chrome CHANNEL=stable webpack ",
+    "build-chrome:dev": "cross-env NODE_ENV=development BROWSER=chrome webpack ",
+    "build-edge": "cross-env NODE_ENV=production BROWSER=edge CHANNEL=stable webpack ",
+    "build-nightly": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=nightly webpack ",
+    "build-nightly-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=nightly webpack ",
+    "build-testing": "cross-env NODE_ENV=development BROWSER=firefox CHANNEL=testing webpack ",
+    "build-testing-chrome": "cross-env NODE_ENV=development BROWSER=chrome CHANNEL=testing webpack ",
     "build-zip": "node scripts/build-zip.js",
-    "build:dev": "webpack --hide-modules",
+    "build:dev": "webpack ",
     "dev": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- --watch\" \"cross-env BROWSER=chrome npm run build:dev -- --watch\"  \"cross-env BROWSER=edge npm run build:dev -- --watch\"",
     "dev:windows": "cross-env NODE_ENV=development CHANNEL=dev concurrently \"cross-env BROWSER=firefox npm run build:dev -- -w --watch-poll\" \"cross-env BROWSER=chrome npm run build:dev -- -w --watch-poll\"  \"cross-env BROWSER=edge npm run build:dev -- -w --watch-poll\"",
     "dev-ff": "rm -rf ./dist-ff && cross-env NODE_ENV=development CHANNEL=dev BROWSER=firefox npm run build:dev -- --watch",
@@ -25,54 +25,54 @@
     "start:windows": "npm run dev:windows"
   },
   "dependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.16.0",
-    "@mdi/font": "^6.5.95",
-    "@mdi/js": "^6.4.95",
-    "@types/resize-observer-browser": "^0.1.6",
-    "concurrently": "^5.3.0",
-    "fs-extra": "^7.0.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
+    "@types/resize-observer-browser": "^0.1.11",
+    "concurrently": "^9.1.2",
+    "fs-extra": "^11.3.0",
     "gl-matrix": "^3.4.3",
-    "json-cyclic": "0.0.3",
+    "json-cyclic": "1.0.2",
     "lodash": "^4.17.21",
-    "mdi-vue": "^3.0.11",
-    "typescript": "^4.4.4",
-    "vue": "^3.2.21",
+    "mdi-vue": "^3.0.13",
+    "tailwind": "^4.0.0",
+    "typescript": "^5.8.2",
+    "vue": "^3.5.13",
     "vue-style-loader": "^4.1.3",
-    "vuex": "^4.0.2",
+    "vuex": "^4.1.0",
     "vuex-webextensions": "^1.3.3",
     "webextension-polyfill": "^0.12.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.0",
-    "@types/chrome": "0.0.240",
-    "@types/core-js": "^2.5.5",
-    "@types/es6-promise": "^3.3.0",
-    "@types/firefox": "0.0.31",
-    "@types/lodash": "^4.14.176",
-    "@types/node": "^14.17.32",
-    "@vue/cli": "^4.5.15",
-    "@vue/cli-plugin-typescript": "^4.5.15",
-    "@vue/compiler-sfc": "^3.2.21",
-    "archiver": "^3.0.0",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@types/chrome": "0.0.309",
+    "@types/core-js": "^2.5.8",
+    "@types/es6-promise": "^3.3.2",
+    "@types/firefox": "0.0.34",
+    "@types/lodash": "^4.17.16",
+    "@types/node": "^22.13.10",
+    "@vue/cli": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/compiler-sfc": "^3.5.13",
+    "archiver": "^7.0.1",
+    "babel-loader": "^10.0.0",
     "babel-preset-es2020": "^1.0.2",
-    "copy-webpack-plugin": "^4.5.3",
-    "cross-env": "^5.2.0",
-    "css-loader": "^0.28.11",
-    "ejs": "^2.7.4",
-    "file-loader": "^1.1.11",
-    "mini-css-extract-plugin": "^0.4.4",
-    "node-sass": "^4.14.1",
+    "copy-webpack-plugin": "^13.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^7.1.2",
+    "ejs": "^3.1.10",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "node-sass": "^9.0.0",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^7.1.0",
-    "ts-loader": "^8.3.0",
+    "sass-loader": "^16.0.5",
+    "ts-loader": "^9.5.2",
     "vue-cli-plugin-vue-next": "~0.1.4",
-    "vue-loader": "^16.8.2",
-    "web-ext-types": "^2.3.0",
-    "webpack": "^4.46.0",
-    "webpack-chrome-extension-reloader": "^0.8.3",
-    "webpack-cli": "^3.3.12",
-    "webpack-shell-plugin": "^0.5.0"
+    "vue-loader": "^17.4.2",
+    "web-ext-types": "^3.2.1",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-shell-plugin-next": "^2.3.2"
   }
 }

webpack.config.js

@@ -1,9 +1,8 @@
 const webpack = require('webpack');
 const ejs = require('ejs');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const WebpackShellPlugin = require('webpack-shell-plugin');
+const WebpackShellPluginNext = require('webpack-shell-plugin-next');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
 const { VueLoaderPlugin } = require('vue-loader');
 const path = require('path');
 
@@ -48,7 +47,7 @@ const config = {
       },
       {
         test: /\.vue$/,
-        loaders: 'vue-loader',
+        loader: 'vue-loader',
       },
       {
         test: /\.js$/,
@@ -121,10 +120,12 @@ const config = {
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),
-    new CopyWebpackPlugin([
-      { from: 'res', to: 'res', ignore: ['css', 'css/**']},
-      { from: 'ext', to: 'ext', ignore: ['conf/*', 'lib/**']},
-      { from: 'csui', to: 'csui', ignore: ['src']},
+    new CopyWebpackPlugin(
+      {
+        patterns: [
+          { from: 'res', to: 'res',   globOptions: { ignore: ['css', 'css/**']} },
+          { from: 'ext', to: 'ext',   globOptions: { ignore: ['conf/*', 'lib/**']} },
+          { from: 'csui', to: 'csui', globOptions: { ignore: ['src']} },
 
           // we need to get webextension-polyfill and put it in common/lib
           { from: '../node_modules/webextension-polyfill/dist/browser-polyfill.js', to: 'common/lib/browser-polyfill.js'},
@@ -132,7 +133,7 @@ const config = {
           // This is extension icon, as used on extension lists and/or extension's action button
           // This folder does not contain any GUI icons — these are in /res/icons.
           // (TODO: check if this copy is even necessary — /icons has same content as /res/icons)
-      { from: 'icons', to: 'icons', ignore: ['icon.xcf'] },
+          { from: 'icons', to: 'icons', globOptions: { ignore: ['icon.xcf'] }},
           { from: 'csui/csui-popup.html', to: 'csui/csui-popup.html', transform: transformHtml },
           { from: 'csui/csui-overlay-normal.html', to: 'csui/csui.html', transform: transformHtml },
           { from: 'csui/csui-overlay-dark.html', to: 'csui/csui-dark.html', transform: transformHtml },
@@ -198,9 +199,13 @@ const config = {
               return JSON.stringify(jsonContent, null, 2);
             },
           },
-    ]),
-    new WebpackShellPlugin({
-      onBuildEnd: ['node scripts/remove-evals.js'],
+        ]
+      }
+    ),
+    new WebpackShellPluginNext({
+      onBuildEnd: {
+        scripts: ['node scripts/remove-evals.js'],
+      },
     }),
     new webpack.DefinePlugin({
       'process.env.BROWSER': JSON.stringify(process.env.BROWSER),
@@ -235,9 +240,9 @@ if (config.mode === 'production') {
 }
 
 if (process.env.HMR === 'true') {
-  config.plugins = (config.plugins || []).concat([
-    new ChromeExtensionReloader(),
-  ]);
+  // config.plugins = (config.plugins || []).concat([
+  //   new ChromeExtensionReloader(),
+  // ]);
 }
 
 function transformHtml(content) {