add proxy

public/background.js

@@ -41,6 +41,8 @@ setInterval(heartbeat, 3000)
 
 console.info("Chrome Extenstion Background is loaded")
 
+let proxyHost = "";
+
 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
     if (msg.action === "connect") {
         console.info("Start to connect websocket")
@@ -55,5 +57,29 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
         } else {
             chrome.runtime.sendMessage({connected: false})
         }
+    } else if (msg.action === 'setproxy') {
+        chrome.proxy.settings.set({
+            value: {
+                mode: "fixed_servers",
+                rules: {
+                    singleProxy: {
+                        scheme: msg.scheme,
+                        host: msg.host,
+                        port: parseInt(`${msg.port}`)
+                    }
+                }
+            },
+            scope: 'regular',
+        })
+        proxyHost = `${msg.scheme}://${msg.host}:${msg.port}`
+    } else if (msg.action === 'clearproxy') {
+        chrome.proxy.settings.clear({})
+        proxyHost = ""
+    } else if (msg.action === 'proxystatus') {
+        if (proxyHost !== '') {
+            chrome.runtime.sendMessage({enable: !!proxyHost, proxy: proxyHost})
+        } else {
+            chrome.runtime.sendMessage({enable: false, proxy: ""})
+        }
     }
 })

src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 import {Layout, Row} from 'antd';
 import {Controller} from "./components/Controller";
+import {Proxifier} from "./components/Proxifier";
 
 function App() {
     return (
@@ -11,7 +12,7 @@ function App() {
                     <Controller/>
                 </Row>
                 <Row>
-                    PROXY
+                    <Proxifier/>
                 </Row>
             </Layout>
         </div>

src/components/Controller.tsx

@@ -18,12 +18,12 @@ export const Controller: React.FC<ControllerProp> = (props) => {
     useEffect(() => {
         // control status
         const updateStatus = () => {
-            wsc.getStatus()
+            wsc.updateWSCStatus()
         }
         updateStatus()
         const id = setInterval(updateStatus, 1000)
 
-        wsc.listen((req: { connected: boolean }) => {
+        wsc.onWSCMessage((req: { connected: boolean }) => {
             setConnected(req.connected)
             setTimeout(() => {
                 setInit(true)

src/components/Proxifier.tsx

@@ -0,0 +1,85 @@
+import React, {useEffect, useState} from "react";
+import {Button, Card, Form, Input, InputNumber, Select, Space} from "antd";
+import {wsc} from "../network/chrome";
+
+export interface ProxifierProp {
+
+}
+
+const {Compact} = Space;
+
+interface ProxyConfig {
+    scheme: "http" | "socks5";
+    host: string;
+    port: number;
+}
+
+export const Proxifier: React.FC<ProxifierProp> = (props) => {
+    const [config, setConfig] = useState<ProxyConfig>({
+        scheme: "http",
+        host: "127.0.0.1",
+        port: 8083
+    });
+    const [init, setInit] = useState(false);
+    const [proxyEnable, setProxyEnable] = useState(false);
+    const [currentProxy, setCurrentProxy] = useState("");
+
+    useEffect(() => {
+        if (init) {
+            return
+        }
+
+        wsc.onProxyStatusMessage(msg => {
+            setInit(true)
+            setProxyEnable(msg.enable)
+            setCurrentProxy(msg.proxy)
+        })
+    }, [init])
+
+    // proxy
+    useEffect(() => {
+        const update = () => {
+            wsc.updateProxyStatus()
+        }
+        update()
+        const id = setInterval(update, 1000)
+        return () => {
+            clearInterval(id)
+        }
+    }, [])
+
+    return <Card title={`代理设置: ${proxyEnable ? currentProxy : "未启用"}`}>
+        <Form size={"small"} onSubmitCapture={e => {
+            e.preventDefault()
+            setInit(false)
+            wsc.setproxy(config.scheme, config.host, config.port)
+        }} disabled={!init}>
+            <Form.Item label={"设置代理"}>
+                <Compact>
+                    <Select
+                        style={{width: 86}}
+                        value={config.scheme}
+                        onChange={e => (setConfig({...config, scheme: e}))}
+                    >
+                        <Select.Option value={"http"}>HTTP</Select.Option>
+                        <Select.Option value={"socks5"}>Socks5</Select.Option>
+                    </Select>
+                    <Input
+                        style={{width: 100}}
+                        placeholder={"ProxyHost"}
+                        value={config.host}
+                        onChange={e => (setConfig({...config, host: e.target.value}))}/>
+                    <InputNumber
+                        style={{width: 65}}
+                        placeholder={"Port"}
+                        value={config.port}
+                        onChange={e => (setConfig({...config, port: e}))}
+                    />
+                </Compact>
+            </Form.Item>
+            <Form.Item>
+                <Button htmlType={"submit"} loading={!init}>启用链接</Button>
+            </Form.Item>
+        </Form>
+    </Card>
+};

src/network/chrome.ts

@@ -15,13 +15,33 @@ export namespace wsc {
         });
     }
 
-    export function getStatus() {
+    export function updateWSCStatus() {
         chrome.runtime.sendMessage({
             action: 'status',
         });
     }
 
-    export function listen(onMessage: (message: any) => void) {
+    export function updateProxyStatus() {
+        chrome.runtime.sendMessage({
+            action: 'proxystatus',
+        });
+    }
+
+    export function onWSCMessage(onMessage: (message: any) => void) {
         chrome.runtime.onMessage.addListener(onMessage);
     }
+
+    export function onProxyStatusMessage(onMessage: (message: { enable: boolean, proxy: string }) => any) {
+        chrome.runtime.onMessage.addListener(onMessage)
+    }
+
+    export function setproxy(scheme: string, host: string, port: number) {
+        chrome.runtime.sendMessage({action: "setproxy", scheme, host, port})
+    }
+
+    export function clearproxy() {
+        chrome.runtime.sendMessage({action: 'clearproxy'})
+    }
+
+
 }