feat(wsc) brute encrypt demo

public/socket.js

@@ -22,7 +22,7 @@ export class WebSocketManager {
 
         this.socket.onopen = () => {
             chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true, port: port});
-            this.startHeartbeat();
+            // this.startHeartbeat();
         };
 
         this.socket.onmessage = (event) => {
@@ -42,6 +42,7 @@ export class WebSocketManager {
     sendMessage(message) {
         if (this.isConnected()) {
             try {
+                console.log("发射", message)
                 this.socket.send(JSON.stringify(message));
             } catch (e) {
                 console.error("Error sending message:", e);

src/App.tsx

@@ -16,7 +16,7 @@ function App() {
         >
             <div className="App">
                 <Contro/>
-                <Proxifier/>
+                {/*<Proxifier/>*/}
 
                 <EvalInTab/>
             </div>

src/components/Proxifier.tsx

@@ -1,310 +1,311 @@
-import React, { useEffect, useState } from "react";
+import React, {useEffect, useState} from "react";
-import { Space, Select, Input, Switch } from "antd";
+import {Space, Select, Input, Switch} from "antd";
-import { PlusSmIcon, TrashIcon } from "@assets/icon/icon";
+import {PlusSmIcon, TrashIcon} from "@assets/icon/icon";
-import { wsc } from "@network/chrome";
+import {wsc} from "@network/chrome";
 import "./Proxifier.css";
 
 type Scheme = "http" | "socks5";
 interface ProxyConfig {
-  id: string;
+    id: string;
-  scheme: Scheme;
+    scheme: Scheme;
-  host: string;
+    host: string;
-  port: string;
+    port: string;
-  hostStatus: "error" | "";
+    hostStatus: "error" | "";
-  portStatus: "error" | "";
+    portStatus: "error" | "";
-  open: boolean;
+    open: boolean;
-  proxy: string;
+    proxy: string;
 }
 
 export interface ProxifierProps {}
 export const Proxifier: React.FC<ProxifierProps> = () => {
-  const [proxyList, setProxyList] = useState<ProxyConfig[]>(() => {
+    const [proxyList, setProxyList] = useState<ProxyConfig[]>(() => {
-    const storageProxyList = localStorage.getItem("yakit-proxy-list") || "[]";
+        const storageProxyList = localStorage.getItem("yakit-proxy-list") || "[]";
-    return JSON.parse(storageProxyList);
+        return JSON.parse(storageProxyList);
-  });
+    });
 
-  useEffect(() => {
+    useEffect(() => {
-    localStorage.setItem("yakit-proxy-list", JSON.stringify(proxyList));
+        localStorage.setItem("yakit-proxy-list", JSON.stringify(proxyList));
-  }, [proxyList]);
+    }, [proxyList]);
 
-  const addNewProxyListItem = (
+    const addNewProxyListItem = (
-    scheme: Scheme,
+        scheme: Scheme,
-    host: string,
+        host: string,
-    port: string,
+        port: string,
-    open: boolean,
+        open: boolean,
-    proxy: string
+        proxy: string
-  ) => {
+    ) => {
-    const proxyItem: ProxyConfig = {
+        const proxyItem: ProxyConfig = {
-      id: Math.random() + "",
+            id: Math.random() + "",
-      scheme: scheme as Scheme,
+            scheme: scheme as Scheme,
-      host: host,
+            host: host,
-      port: port,
+            port: port,
-      hostStatus: "",
+            hostStatus: "",
-      portStatus: "",
+            portStatus: "",
-      open: open,
+            open: open,
-      proxy: proxy,
+            proxy: proxy,
+        };
+        return proxyItem;
     };
-    return proxyItem;
-  };
 
-  const parseUrl = (url: string) => {
+    const parseUrl = (url: string) => {
-    const regex = /^(.*?):\/\/(.*?):(\d+)/;
+        const regex = /^(.*?):\/\/(.*?):(\d+)/;
-    const match = url.match(regex);
+        const match = url.match(regex);
-    if (match) {
+        if (match) {
-      const scheme = match[1];
+            const scheme = match[1];
-      const host = match[2];
+            const host = match[2];
-      const port = match[3];
+            const port = match[3];
-      return {
+            return {
-        scheme,
+                scheme,
-        host,
+                host,
-        port,
+                port,
-      };
+            };
-    } else {
-      return null; // 不匹配格式
-    }
-  };
-
-  useEffect(() => {
-    wsc.updateProxyStatus();
-
-    wsc.onProxyStatusMessage((msg) => {
-      if (msg.proxy === undefined || msg.enable === undefined) {
-        return;
-      }
-      if (msg.proxy === "" || msg.enable === false) {
-        if (proxyList.some((i) => i.open)) {
-          const copyProxyList = [...proxyList];
-          copyProxyList.forEach((i) => {
-            i.open = false;
-          });
-          setProxyList(copyProxyList);
-        }
-        return;
-      }
-
-      if (msg.proxy && msg.enable) {
-        const copyProxyList = [...proxyList];
-        let newProxyItem: ProxyConfig = undefined;
-        if (!copyProxyList.length) {
-          const urlObj = parseUrl(msg.proxy);
-          if (urlObj) {
-            newProxyItem = addNewProxyListItem(
-              urlObj.scheme as Scheme,
-              urlObj.host,
-              urlObj.port,
-              true,
-              msg.proxy
-            );
-          }
         } else {
-          const proxyExist = copyProxyList.some((i) => i.proxy === msg.proxy);
+            return null; // 不匹配格式
-          if (proxyExist) {
-            const proxyOpen = copyProxyList.some(
-              (i) => i.open && i.proxy === msg.proxy
-            );
-            if (!proxyOpen) {
-              copyProxyList.forEach((i) => {
-                i.open = false;
-              });
-              for (let i = 0; i < copyProxyList.length; i++) {
-                if (copyProxyList[i].proxy === msg.proxy) {
-                  copyProxyList[i].open = true;
-                  break;
-                }
-              }
-            }
-          } else {
-            copyProxyList.forEach((i) => {
-              i.open = false;
-            });
-            const urlObj = parseUrl(msg.proxy);
-            if (urlObj) {
-              newProxyItem = addNewProxyListItem(
-                urlObj.scheme as Scheme,
-                urlObj.host,
-                urlObj.port,
-                true,
-                msg.proxy
-              );
-            }
-          }
         }
+    };
 
-        if (newProxyItem) {
+    useEffect(() => {
-          copyProxyList.unshift(newProxyItem);
+        wsc.updateProxyStatus();
+
+        wsc.onProxyStatusMessage((msg) => {
+            console.log("msg", msg)
+            if (msg.proxy === undefined || msg.enable === undefined) {
+                return;
+            }
+            if (msg.proxy === "" || msg.enable === false) {
+                if (proxyList.some((i) => i.open)) {
+                    const copyProxyList = [...proxyList];
+                    copyProxyList.forEach((i) => {
+                        i.open = false;
+                    });
+                    setProxyList(copyProxyList);
+                }
+                return;
+            }
+
+            if (msg.proxy && msg.enable) {
+                const copyProxyList = [...proxyList];
+                let newProxyItem: ProxyConfig = undefined;
+                if (!copyProxyList.length) {
+                    const urlObj = parseUrl(msg.proxy);
+                    if (urlObj) {
+                        newProxyItem = addNewProxyListItem(
+                            urlObj.scheme as Scheme,
+                            urlObj.host,
+                            urlObj.port,
+                            true,
+                            msg.proxy
+                        );
+                    }
+                } else {
+                    const proxyExist = copyProxyList.some((i) => i.proxy === msg.proxy);
+                    if (proxyExist) {
+                        const proxyOpen = copyProxyList.some(
+                            (i) => i.open && i.proxy === msg.proxy
+                        );
+                        if (!proxyOpen) {
+                            copyProxyList.forEach((i) => {
+                                i.open = false;
+                            });
+                            for (let i = 0; i < copyProxyList.length; i++) {
+                                if (copyProxyList[i].proxy === msg.proxy) {
+                                    copyProxyList[i].open = true;
+                                    break;
+                                }
+                            }
+                        }
+                    } else {
+                        copyProxyList.forEach((i) => {
+                            i.open = false;
+                        });
+                        const urlObj = parseUrl(msg.proxy);
+                        if (urlObj) {
+                            newProxyItem = addNewProxyListItem(
+                                urlObj.scheme as Scheme,
+                                urlObj.host,
+                                urlObj.port,
+                                true,
+                                msg.proxy
+                            );
+                        }
+                    }
+                }
+
+                if (newProxyItem) {
+                    copyProxyList.unshift(newProxyItem);
+                }
+                setProxyList(copyProxyList);
+            }
+        });
+    }, []);
+
+    const hostOnchange = (value: string, id: string) => {
+        const ipPattern = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
+        const domainPattern = /^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        const copyProxyList = structuredClone(proxyList);
+        if (value === "" || ipPattern.test(value) || domainPattern.test(value)) {
+            copyProxyList.forEach((i) => {
+                if (i.id === id) {
+                    i.hostStatus = "";
+                    i.host = value;
+                    i.proxy = i.scheme + "://" + value + ":" + i.port;
+                }
+            });
+        } else {
+            copyProxyList.forEach((i) => {
+                if (i.id === id) {
+                    i.hostStatus = "error";
+                    i.host = value;
+                    i.proxy = i.scheme + "://" + value + ":" + i.port;
+                }
+            });
         }
         setProxyList(copyProxyList);
-      }
+    };
-    });
-  }, []);
 
-  const hostOnchange = (value: string, id: string) => {
+    const portOnchange = (value: string, id: string) => {
-    const ipPattern = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
+        const portNumber = parseInt(value, 10);
-    const domainPattern = /^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        const copyProxyList = structuredClone(proxyList);
-    const copyProxyList = structuredClone(proxyList);
+        if (
-    if (value === "" || ipPattern.test(value) || domainPattern.test(value)) {
+            value === "" ||
-      copyProxyList.forEach((i) => {
+            (/^\d+$/.test(value) && portNumber >= 0 && portNumber <= 65535)
-        if (i.id === id) {
+        ) {
-          i.hostStatus = "";
+            copyProxyList.forEach((i) => {
-          i.host = value;
+                if (i.id === id) {
-          i.proxy = i.scheme + "://" + value + ":" + i.port;
+                    i.portStatus = "";
-        }
+                    const port = value === "" ? "" : portNumber + "";
-      });
+                    i.port = port;
-    } else {
+                    i.proxy = i.scheme + "://" + i.host + ":" + port;
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.hostStatus = "error";
-          i.host = value;
-          i.proxy = i.scheme + "://" + value + ":" + i.port;
-        }
-      });
-    }
-    setProxyList(copyProxyList);
-  };
-
-  const portOnchange = (value: string, id: string) => {
-    const portNumber = parseInt(value, 10);
-    const copyProxyList = structuredClone(proxyList);
-    if (
-      value === "" ||
-      (/^\d+$/.test(value) && portNumber >= 0 && portNumber <= 65535)
-    ) {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.portStatus = "";
-          const port = value === "" ? "" : portNumber + "";
-          i.port = port;
-          i.proxy = i.scheme + "://" + i.host + ":" + port;
-        }
-      });
-    } else {
-      copyProxyList.forEach((i) => {
-        if (i.id === id) {
-          i.portStatus = "error";
-          i.port = value;
-          i.proxy = i.scheme + "://" + i.host + ":" + value;
-        }
-      });
-    }
-    setProxyList(copyProxyList);
-  };
-
-  return (
-    <div className="Prox">
-      <div className="Prox-title-wrap">
-        <div className="Prox-title-wrap-left">
-          <span className="prox-title">设置代理</span>
-          <span className="prox-number">{proxyList.length}</span>
-        </div>
-        <div
-          className="Prox-title-wrap-right"
-          onClick={() => {
-            setProxyList([
-              ...proxyList,
-              addNewProxyListItem("http", "", "", false, "http://"),
-            ]);
-          }}
-        >
-          <span className="Prox-add-text">添加</span>
-          <PlusSmIcon className="Prox-add-icon" />
-        </div>
-      </div>
-      <div className="Prox-list-wrap">
-        {proxyList.length ? (
-          proxyList.map((item) => (
-            <div className="Prox-list-item-wrap" key={item.id}>
-              <Space className="Prox-list-item-space">
-                <Space.Compact>
-                  <Select
-                    value={item.scheme}
-                    style={{ width: 88 }}
-                    disabled={item.open}
-                    onChange={(value, option) => {
-                      const copyProxyList = structuredClone(proxyList);
-                      copyProxyList.forEach((i) => {
-                        if (i.id === item.id) {
-                          i.scheme = value;
-                          i.proxy = value + "://" + i.host + ":" + i.port;
-                        }
-                      });
-                      setProxyList(copyProxyList);
-                    }}
-                  >
-                    <Select.Option value="http">HTTP</Select.Option>
-                    <Select.Option value="socks5">Socks5</Select.Option>
-                  </Select>
-                  <Input
-                    value={item.host}
-                    style={{ width: 136 }}
-                    disabled={item.open}
-                    status={item.hostStatus}
-                    onChange={(e) => hostOnchange(e.target.value, item.id)}
-                  />
-                  <Input
-                    value={item.port}
-                    style={{ width: 64 }}
-                    disabled={item.open}
-                    status={item.portStatus}
-                    onChange={(e) => portOnchange(e.target.value, item.id)}
-                  />
-                </Space.Compact>
-              </Space>
-              {!item.open && (
-                <TrashIcon
-                  className="proxy-list-del-icon"
-                  onClick={() => {
-                    setProxyList(proxyList.filter((i) => i.id !== item.id));
-                  }}
-                />
-              )}
-              <Switch
-                checkedChildren="启"
-                unCheckedChildren="停"
-                value={item.open}
-                disabled={
-                  item.hostStatus === "error" ||
-                  item.portStatus === "error" ||
-                  item.host === "" ||
-                  item.port === ""
                 }
-                onChange={(checked: boolean) => {
+            });
-                  wsc.clearProxy();
+        } else {
-                  const copyProxyList = structuredClone(proxyList);
+            copyProxyList.forEach((i) => {
-                  copyProxyList.forEach((i) => {
+                if (i.id === id) {
-                    if (i.id === item.id) {
+                    i.portStatus = "error";
-                      i.open = checked;
+                    i.port = value;
-                      if (checked) {
+                    i.proxy = i.scheme + "://" + i.host + ":" + value;
-                        wsc.setProxy(item.scheme, item.host, Number(item.port));
+                }
-                      }
+            });
-                    } else {
+        }
-                      i.open = false;
+        setProxyList(copyProxyList);
-                    }
+    };
-                  });
+
-                  setProxyList(copyProxyList);
+    return (
-                }}
+        <div className="Prox">
-              />
+            <div className="Prox-title-wrap">
+                <div className="Prox-title-wrap-left">
+                    <span className="prox-title">设置代理</span>
+                    <span className="prox-number">{proxyList.length}</span>
+                </div>
+                <div
+                    className="Prox-title-wrap-right"
+                    onClick={() => {
+                        setProxyList([
+                            ...proxyList,
+                            addNewProxyListItem("http", "", "", false, "http://"),
+                        ]);
+                    }}
+                >
+                    <span className="Prox-add-text">添加</span>
+                    <PlusSmIcon className="Prox-add-icon"/>
+                </div>
             </div>
-          ))
+            <div className="Prox-list-wrap">
-        ) : (
+                {proxyList.length ? (
-          <div
+                    proxyList.map((item) => (
-            className="add-list"
+                        <div className="Prox-list-item-wrap" key={item.id}>
-            onClick={() => {
+                            <Space className="Prox-list-item-space">
-              setProxyList([
+                                <Space.Compact>
-                addNewProxyListItem(
+                                    <Select
-                  "http",
+                                        value={item.scheme}
-                  "127.0.0.1",
+                                        style={{width: 88}}
-                  "8083",
+                                        disabled={item.open}
-                  false,
+                                        onChange={(value, option) => {
-                  "http://127.0.0.1:8083"
+                                            const copyProxyList = structuredClone(proxyList);
-                ),
+                                            copyProxyList.forEach((i) => {
-              ]);
+                                                if (i.id === item.id) {
-            }}
+                                                    i.scheme = value;
-          >
+                                                    i.proxy = value + "://" + i.host + ":" + i.port;
-            <PlusSmIcon className="add-list-icon" />
+                                                }
-            <span className="add-list-text">添加</span>
+                                            });
-          </div>
+                                            setProxyList(copyProxyList);
-        )}
+                                        }}
-      </div>
+                                    >
-    </div>
+                                        <Select.Option value="http">HTTP</Select.Option>
-  );
+                                        <Select.Option value="socks5">Socks5</Select.Option>
+                                    </Select>
+                                    <Input
+                                        value={item.host}
+                                        style={{width: 136}}
+                                        disabled={item.open}
+                                        status={item.hostStatus}
+                                        onChange={(e) => hostOnchange(e.target.value, item.id)}
+                                    />
+                                    <Input
+                                        value={item.port}
+                                        style={{width: 64}}
+                                        disabled={item.open}
+                                        status={item.portStatus}
+                                        onChange={(e) => portOnchange(e.target.value, item.id)}
+                                    />
+                                </Space.Compact>
+                            </Space>
+                            {!item.open && (
+                                <TrashIcon
+                                    className="proxy-list-del-icon"
+                                    onClick={() => {
+                                        setProxyList(proxyList.filter((i) => i.id !== item.id));
+                                    }}
+                                />
+                            )}
+                            <Switch
+                                checkedChildren="启"
+                                unCheckedChildren="停"
+                                value={item.open}
+                                disabled={
+                                    item.hostStatus === "error" ||
+                                    item.portStatus === "error" ||
+                                    item.host === "" ||
+                                    item.port === ""
+                                }
+                                onChange={(checked: boolean) => {
+                                    wsc.clearProxy();
+                                    const copyProxyList = structuredClone(proxyList);
+                                    copyProxyList.forEach((i) => {
+                                        if (i.id === item.id) {
+                                            i.open = checked;
+                                            if (checked) {
+                                                wsc.setProxy(item.scheme, item.host, Number(item.port));
+                                            }
+                                        } else {
+                                            i.open = false;
+                                        }
+                                    });
+                                    setProxyList(copyProxyList);
+                                }}
+                            />
+                        </div>
+                    ))
+                ) : (
+                    <div
+                        className="add-list"
+                        onClick={() => {
+                            setProxyList([
+                                addNewProxyListItem(
+                                    "http",
+                                    "127.0.0.1",
+                                    "8083",
+                                    false,
+                                    "http://127.0.0.1:8083"
+                                ),
+                            ]);
+                        }}
+                    >
+                        <PlusSmIcon className="add-list-icon"/>
+                        <span className="add-list-text">添加</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
 };