fix open phone window by clicking to chrome extension icon

public/manifest.json

@@ -4,8 +4,10 @@
   "name": "Webrtc Chrome Extension",
   "description": "Webrtc Chrome Extension",
   "action": {
-    "default_popup": "js/index.html",
     "default_title": "Webrtc Chrome Extension"
   },
+  "background": {
+    "service_worker": "background/index.js"
+  },
   "permissions": ["activeTab", "storage"]
 }

src/App.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import "./styles.scss";
 import { Button, Flex, Text } from "@chakra-ui/react";
 import { openPhonePopup } from "./utils";
-import { DEFAULT_COLOR_SCHEME } from "./common/constants";
 export const App = () => {
   const handleClick = () => {
     openPhonePopup();

src/background/index.ts

@@ -0,0 +1,47 @@
+chrome.action.onClicked.addListener(async (tab) => {
+  const windowId = await getWindowKey();
+  if (windowId) {
+    if (windowId) {
+      chrome.windows.update(windowId, { focused: true }, (w) => {
+        if (!w) {
+          initiateNewPhonePopup();
+        }
+      });
+    } else {
+      initiateNewPhonePopup();
+    }
+  } else {
+    initiateNewPhonePopup();
+  }
+});
+
+const initiateNewPhonePopup = () => {
+  chrome.windows.create(
+    {
+      url: chrome.runtime.getURL("window/index.html"),
+      width: 440,
+      height: 720,
+      focused: true,
+      type: "panel",
+      state: "normal",
+    },
+    function (window) {
+      if (window?.id) {
+        saveWindowKey(window?.id);
+      }
+    }
+  );
+};
+
+const saveWindowKey = async (id: number) => {
+  await chrome.storage.local.set({
+    WindowKey: id,
+  });
+};
+
+const getWindowKey = async (): Promise<number> => {
+  const result = await chrome.storage.local.get(["WindowKey"]);
+  return result.WindowKey as number;
+};
+
+export {};

webpack.config.js

@@ -31,6 +31,34 @@ module.exports = [
       extensions: [".ts", ".tsx", ".js"],
     },
   },
+  {
+    entry: "./src/background/index.ts",
+    target: "web",
+    mode: "production",
+    output: {
+      path: path.join(__dirname, "dist"),
+      filename: "background/index.js",
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                compilerOptions: { noEmit: false },
+              },
+            },
+          ],
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".ts", ".tsx", ".js"],
+    },
+  },
   {
     entry: {
       index: "./src/index.tsx",