add basic dev boostrap

src/components/Controller.tsx

@@ -1,29 +1,87 @@
 import React, {useEffect} from "react";
-import {Card} from "antd";
+import {Alert, Button, Card, Form, InputNumber} from "antd";
+import {wsc} from "../network/chrome";
+import {useGetState} from "ahooks";
 
 export interface ControllerProp {
 
 }
 
 export const Controller: React.FC<ControllerProp> = (props) => {
-    const [connected, setConnected] = React.useState<boolean>(false)
-    const ref = React.useRef<HTMLAnchorElement>(null)
+    const [findingPort, setFindingPort] = React.useState<boolean>(false)
+    const [autoFindFailedReason, setAutoFindFailedReason] = React.useState<string>("")
+    const [port, setPort] = React.useState<number>()
+
+    const [connected, setConnected, getConnected] = useGetState(false);
+    const [init, setInit] = React.useState(false)
 
     useEffect(() => {
-        if (!ref) {
+        // control status
+        const updateStatus = () => {
+            wsc.getStatus()
+        }
+        updateStatus()
+        const id = setInterval(updateStatus, 1000)
+
+        wsc.listen((req: { connected: boolean }) => {
+            setConnected(req.connected)
+            setTimeout(() => {
+                setInit(true)
+            }, 500)
+        })
+        return () => {
+            clearInterval(id)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!init) {
             return
         }
 
-        // const update = () => {
-        //     ref.current.click()
-        // }
-        // const id = setInterval(update, 10000)
-        // return () => {
-        //     clearInterval(id)
-        // }
-    }, [ref])
+        if (connected) {
+            return
+        }
 
-    return <Card size={"small"} title={"连接器"}>
-        <a href={"yakitctrl://start/"} ref={ref}>Yakit 启动</a>
+        const findPort = (port: number, max: number) => {
+            const ws = new WebSocket(`ws://127.0.0.1:${port}`)
+            ws.onclose = (e: CloseEvent) => {
+                if (e.reason !== `FoundYakitWebSocketController` && (port + 1 <= max)) {
+                    setTimeout(() => findPort(port + 1, max), 1000)
+                }
+
+                if (port + 1 > max) {
+                    setFindingPort(false)
+                    setAutoFindFailedReason("Yakit 未启动或无法监测到 WebSocket Controller 端口")
+                }
+            }
+            ws.onopen = () => {
+                setFindingPort(false)
+                setPort(port)
+                ws.close(1000, "FoundYakitWebSocketController")
+            }
+        }
+        findPort(11212, 11222)
+    }, [connected, init])
+
+    const freeze = findingPort || (!init);
+    const safeConnected = connected && init;
+
+    return <Card size={"small"} extra={safeConnected ? <Button>
+        断开链接
+    </Button> : <Button></Button>}>
+        {connected && init ? <Alert type={"success"} message={"已连接至 Yakit"}/> : <Form onSubmitCapture={e => {
+            e.preventDefault()
+
+            wsc.connect(port)
+        }}>
+            {autoFindFailedReason !== '' ? <Alert type={"error"} message={autoFindFailedReason}/> : undefined}
+            <Form.Item label={"端口"}>
+                <InputNumber disabled={freeze} value={port} onChange={e => setPort(e)}/>
+            </Form.Item>
+            <Form.Item>
+                <Button loading={freeze} htmlType={"submit"}>连接至 Yakit</Button>
+            </Form.Item>
+        </Form>}
     </Card>
 };

src/network/chrome.ts

@@ -0,0 +1,27 @@
+import {chrome} from "./chromeapi";
+
+export namespace wsc {
+    export function connect(port: number, host?: string) {
+        chrome.runtime.sendMessage({
+            action: 'connect',
+            host: host || '127.0.0.1',
+            port: port,
+        });
+    }
+
+    export function disconnect() {
+        chrome.runtime.sendMessage({
+            action: 'disconnect',
+        });
+    }
+
+    export function getStatus() {
+        chrome.runtime.sendMessage({
+            action: 'status',
+        });
+    }
+
+    export function listen(onMessage: (message: any) => void) {
+        chrome.runtime.onMessage.addListener(onMessage);
+    }
+}

src/network/chromeapi.ts

@@ -0,0 +1,74 @@
+export interface MockMessageSender {
+    id?: string;
+}
+
+export interface MockChromeRuntime {
+    sendMessage: (message: any, responseCallback?: (response: any) => void) => void;
+    onMessage: {
+        addListener: (callback: (message: any, sender: MockMessageSender, sendResponse: (response?: any) => void) => void) => void;
+    };
+}
+
+export interface MockChromeProxy {
+    settings: {
+        set: (value: { value: any, scope: string }) => void;
+        get: (details: { incognito?: boolean }, callback: (config: any) => void) => void;
+    };
+}
+
+export interface MockChromeTabs {
+    query: (queryInfo: any, callback: (result: any) => void) => void;
+    create: (createProperties: any, callback?: (tab: any) => void) => void;
+}
+
+export interface MockChrome {
+    runtime: MockChromeRuntime;
+    proxy: MockChromeProxy;
+    tabs: MockChromeTabs;
+}
+
+declare global {
+    interface Window {
+        chrome?: any;
+    }
+}
+
+export const chrome: MockChrome = typeof window.chrome !== 'undefined' && window.chrome.runtime ? window.chrome : {
+    runtime: {
+        sendMessage: (message, responseCallback) => {
+            console.log('Mock sendMessage called with:', message);
+            if (responseCallback) responseCallback('response from mock');
+        },
+        onMessage: {
+            addListener: (callback) => {
+                console.log('Mock onMessage.addListener called');
+                callback({connected: true}, undefined, undefined)
+                // You can simulate incoming messages here if needed
+            }
+        }
+    },
+    proxy: {
+        settings: {
+            set: (value) => {
+                console.log('Mock proxy settings set with:', value);
+            },
+            get: (details, callback) => {
+                console.log('Mock proxy settings get called');
+                // Simulate proxy settings response
+                callback({mode: 'direct'});
+            }
+        }
+    },
+    tabs: {
+        query: (queryInfo, callback) => {
+            console.log('Mock tabs.query called with:', queryInfo);
+            // Simulate a tab query response
+            callback([{id: 1, url: 'http://example.com', title: 'Example'}]);
+        },
+        create: (createProperties, callback) => {
+            console.log('Mock tabs.create called with:', createProperties);
+            // Simulate creating a tab
+            if (callback) callback({id: 2, url: createProperties.url});
+        }
+    }
+};