fixing webpack to build

.eslintrc

@@ -94,10 +94,10 @@
     {
       "parserOptions": {
         "ecmaVersion": "latest",
-        "sourceType": "commonjs"
+        "sourceType": "script"
       },
       "files": [
-        "webpack.config.js",
+        "./webpack.config.js",
         "./utils/*.js",
         "./webpack/*.js"
       ],

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "chrome-ext-retool-embedder",
-  "version": "0.3.0",
+  "name": "app-embedder-for-retool",
+  "version": "1.0.0",
   "description": "Host Retool apps in Chrome's SidePanel",
   "repository": {
     "type": "git",
@@ -46,7 +46,6 @@
     "chrome-types": "^0.1.293",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "crx-webpack-plugin": "^0.1.6",
     "css-loader": "^6.7.3",
     "eslint": "^8.57.0",
     "eslint-config-node": "^4.1.0",
@@ -81,4 +80,4 @@
     "webpack-dev-server": "^5.0.4",
     "zip-webpack-plugin": "^4.0.1"
   }
-}
+}

src/manifest.json

@@ -38,10 +38,10 @@
   "commands": {
     "Open-side-panel": {
       "suggested_key": {
-        "default": "Ctrl+Shift+Y",
-        "mac": "Command+Shift+Y"
+        "default": "Ctrl+Shift+R",
+        "mac": "Command+Shift+R"
       },
-      "description": "Open side panel"
+      "description": "Open Retool App Embedder"
     }
   }
 }

src/pages/Options/Options.tsx

@@ -2,7 +2,6 @@ import "./Options.css";
 
 import React from "react";
 import Alert from "react-bootstrap/Alert";
-import Button from "react-bootstrap/Button";
 import Col from "react-bootstrap/Col";
 import Container from "react-bootstrap/Container";
 import Form from "react-bootstrap/Form";

src/types/chrome.d.ts

@@ -0,0 +1,29 @@
+// chrome.d.ts
+
+declare namespace chrome.runtime {
+  interface ExtensionMessageEvent {
+    /**
+     * Adds a listener to the onMessage event.
+     * @param listener The callback function to execute when a message is received.
+     */
+    addListener(listener: MessageListener): void;
+  }
+
+  interface RuntimeInstalledEvent {
+    /**
+     * Adds a listener to the onMessage event.
+     * @param listener The callback function to execute when a message is received.
+     */
+    addListener(listener: MessageListener): void;
+  }
+}
+
+declare namespace chrome.commands {
+  interface CommandEvent {
+    /**
+     * Adds a listener to the onMessage event.
+     * @param listener The callback function to execute when a message is received.
+     */
+    addListener(listener: MessageListener): void;
+  }
+}

utils/build.js

@@ -3,22 +3,30 @@ process.env.BABEL_ENV = "production";
 process.env.NODE_ENV = "production";
 process.env.ASSET_PATH = "/";
 
-const path = require("node:path");
 const webpack = require("webpack");
 const ZipPlugin = require("zip-webpack-plugin");
 
 const config = require("../webpack.config");
 const packageInfo = require("../package.json");
+const { zipPath } = require("../webpack/paths");
 
 config.mode = "production";
 
 config.plugins = (config.plugins || []).concat(
   new ZipPlugin({
     filename: `${packageInfo.name}-${packageInfo.version}.zip`,
-    path: path.join(__dirname, "..", "dist"),
+    path: zipPath,
   })
 );
 
-webpack(config, function (err) {
-  if (err) throw err;
+webpack(config, (/** @type {Error} */ err, /** @type {import("webpack").Stats} */ stats) => {
+  if (err) {
+    console.error(err);
+    return;
+  }
+  if (stats?.hasErrors()) {
+    stats.compilation.errors.forEach((err) => {
+      console.error(err);
+    });
+  }
 });

webpack.config.js

@@ -30,5 +30,5 @@ module.exports = {
   infrastructureLogging: {
     level: "info",
   },
-  devtool: isDevelopment ? "cheap-module-source-map" : false,
+  devtool: isDevelopment ? "cheap-module-source-map" : undefined,
 };

webpack/paths.js

@@ -6,6 +6,7 @@ const sourceRoot = path.join(projectRoot, "src");
 const assetsPath = path.join(sourceRoot, "assets");
 const pagesPath = path.join(sourceRoot, "pages");
 const outputPath = path.join(projectRoot, "build");
+const zipPath = path.join(projectRoot, "dist");
 
 const panelPath = path.join(pagesPath, "Panel");
 const optionsPath = path.join(pagesPath, "Options");
@@ -20,6 +21,7 @@ module.exports = {
   pagesPath,
   manifestPath,
   outputPath,
+  zipPath,
   entryPaths: {
     panel: path.join(panelPath, "index.tsx"),
     options: path.join(optionsPath, "index.tsx"),