startup ! yakit chrome plugin

.env

@@ -0,0 +1 @@
+NODE_ENV=development

package.json

@@ -8,6 +8,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.15.3",
     "babel-jest": "^27.4.2",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
@@ -136,10 +137,13 @@
     "@babel/preset-env": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "babel-loader": "^9.1.3",
+    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.10.0",
     "html-webpack-plugin": "^5.6.0",
     "style-loader": "^3.3.4",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.2",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
   }

public/manifest.json

@@ -4,7 +4,7 @@
   "version": "1.0",
   "description": "A Endpoint for Yakit MITM or more",
   "action": {
-    "default_popup": "popup.html",
+    "default_popup": "index.html",
     "default_icon": {
       "16": "/images/icon16.png",
       "48": "/images/icon48.png",

src/App.jsx

@@ -1,11 +0,0 @@
-import './App.css';
-
-function App() {
-    return (
-        <div className="App">
-            Hello Ext from react!
-        </div>
-    );
-}
-
-export default App;

src/App.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './App.css';
+import {Layout, Row} from 'antd';
+
+function App() {
+    return (
+        <div className="App" style={{width: 300, backgroundColor: "#eee", padding: 8}}>
+            <Layout>
+                <Row>
+                    Hello WOrld First
+                </Row>
+                <Row>
+                    PROXY
+                </Row>
+            </Layout>
+        </div>
+    );
+}
+
+export default App;

src/components/Controller.jsx

@@ -0,0 +1,10 @@
+import React, {useState} from "react";
+
+export const Controller = (props) => {
+    const [connected, setConnected] = useState(false);
+    return (
+        <div>
+
+        </div>
+    )
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/",
+    "noImplicitAny": true,
+    "module": "es6",
+    "target": "es5",
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node"
+  },
+  "include": [
+    "./src/**/*"
+  ]
+}

webpack.config.js

@@ -1,5 +1,8 @@
+require('dotenv').config();
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
     mode: 'development', // 设置模式为开发模式
@@ -9,10 +12,26 @@ module.exports = {
         filename: 'bundle.js', // 输出文件名
     },
     plugins: [
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+            'process.env.BABEL_ENV': JSON.stringify(process.env.BABEL_ENV || 'development'),
+        }),
         new HtmlWebpackPlugin({
             template: './public/index.html',
             filename: 'index.html'
         }),
+        new CopyWebpackPlugin({
+            patterns: [
+                // copy public assets exclude index.html
+                {
+                    from: path.resolve(__dirname, 'public'),
+                    to: path.resolve(__dirname, 'build'),
+                    globOptions: {
+                        ignore: ['**/index.html']
+                    }
+                }
+            ]
+        })
     ],
     watch: true, // 开启实时监控
     module: {
@@ -21,6 +40,11 @@ module.exports = {
                 test: /\.css$/, // 匹配所有的 css 文件
                 use: ['style-loader', 'css-loader'] // 对匹配到的文件使用这两个 loader
             },
+            {
+                test: /\.tsx?$/, // 匹配TS和TSX文件
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
             {
                 test: /\.(js|jsx)$/, // 匹配JS和JSX文件
                 exclude: /node_modules/, // 排除node_modules目录
@@ -34,7 +58,7 @@ module.exports = {
         ]
     },
     resolve: {
-        extensions: ['.js', '.jsx'] // 解析扩展（确保能够解析JS和JSX文件）
+        extensions: ['.tsx', '.ts', '.js', '.jsx'] // 解析扩展（确保能够解析JS和JSX文件）
     },
     devtool: 'inline-source-map', // 生成内联源映射，便于调试
 };