archive/yaklang-chrome-extension
1
0
Fork 0
mirror of https://github.com/yaklang/yaklang-chrome-extension.git synced 2026-09-22 03:10:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(wsc): fix

Browse Source
This commit is contained in:
go0p
2024-05-07 20:44:29 +08:00
parent 611d9543fe
commit 5424078d38
6 changed files with 132 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/background.js
+17 -48
View File
@@ -1,55 +1,21 @@
let socket;
const connectWebsocket = url => {
disconnectWebsocket()
socket = new WebSocket(url);
socket.onopen = () => {
chrome.runtime.sendMessage({ connected: true })
}
socket.onclose = () => {
chrome.runtime.sendMessage({ connected: false })
}
}
import {ActionType, WebSocketManager} from './connect.js';
const disconnectWebsocket = () => {
if (socket) {
try {
socket.close()
socket = null;
} catch (e) {
}
}
}
heartbeat = () => {
if (socket) {
if (socket.readyState === WebSocket.OPEN) {
try {
socket.send(JSON.stringify({
"type": "heartbeat",
}))
} catch (e) {
console.error("Error sending heartbeat:", e);
}
} else {
disconnectWebsocket()
}
}
}
heartbeat()
setInterval(heartbeat, 3000)
console.info("Chrome Extenstion Background is loaded")
const websocketManager = new WebSocketManager();
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === "connect") {
console.log("msg", msg)
if (msg.action === ActionType.CONNECT) {
console.info("Start to connect websocket")
const host = msg['host'] || "127.0.0.1"
const port = msg['port'] || 11212
connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
} else if (msg.action === 'disconnect') {
disconnectWebsocket()
} else if (msg.action === 'setproxy') {
websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
} else if (msg.action === ActionType.DISCONNECT) {
websocketManager.disconnectWebsocket()
} else if (msg.action === ActionType.SETPROXY) {
chrome.proxy.settings.set({
value: {
mode: "fixed_servers",
@@ -64,15 +30,18 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
scope: 'regular',
})
} else if (msg.action === 'clearproxy') {
} else if (msg.action === ActionType.CLEARPROXY) {
chrome.proxy.settings.clear({})
} else if (msg.action === 'proxystatus') {
} else if (msg.action === ActionType.PROXYSTATUS) {
chrome.proxy.settings.get({}, function (details) {
if (details.value && details.value.mode === "fixed_servers") {
let proxyConfig = details.value.rules.singleProxy;
chrome.runtime.sendMessage({ enable: true, proxy: `${proxyConfig.scheme}://${proxyConfig.host}:${proxyConfig.port}` })
chrome.runtime.sendMessage({
enable: true,
proxy: `${proxyConfig.scheme}://${proxyConfig.host}:${proxyConfig.port}`
})
} else {
chrome.runtime.sendMessage({ enable: false, proxy: "" })
chrome.runtime.sendMessage({enable: false, proxy: ""})
}
});
}
public/connect.js
+72
View File
@@ -0,0 +1,72 @@
export const ActionType = {
CONNECT: 'connect',
DISCONNECT: 'disconnect',
STATUS: 'status',
PROXYSTATUS: 'proxystatus',
SETPROXY: 'setproxy',
CLEARPROXY: 'clearproxy'
}
export class WebSocketManager {
constructor() {
this.socket = null;
this.intervalId = null;
}
connectWebsocket(url) {
this.disconnectWebsocket();
this.socket = new WebSocket(url);
this.socket.onopen = () => {
chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true});
this.startHeartbeat();
};
this.socket.onclose = () => {
chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false});
};
this.socket.onerror = (error) => {
console.error("WebSocket Error:", error);
};
}
disconnectWebsocket() {
if (this.socket) {
try {
this.socket.close();
} catch (e) {
console.error("Error closing websocket:", e);
}
this.socket = null;
this.stopHeartbeat();
}
}
startHeartbeat() {
this.intervalId = setInterval(() => this.heartbeat(), 3000);
}
stopHeartbeat() {
if (this.intervalId) {
clearInterval(this.intervalId);
this.intervalId = null;
}
}
heartbeat() {
if (this.isConnected()) {
try {
this.socket.send(JSON.stringify({"type": "heartbeat"}));
} catch (e) {
console.error("Error sending heartbeat:", e);
}
} else {
this.disconnectWebsocket();
}
}
isConnected() {
return this.socket && this.socket.readyState === WebSocket.OPEN;
}
}
public/manifest.json
+2 -1
View File
@@ -12,7 +12,8 @@
}
},
"background": {
"service_worker": "background.js"
"service_worker": "background.js",
"type": "module"
},
"permissions": [
"activeTab",
src/assets/icon/icon.tsx
+13 -13
View File
@@ -18,8 +18,8 @@ const X = () => (
<path
d="M4 12L12 4M4 4L12 12"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -41,8 +41,8 @@ const Check = () => (
<path
d="M3.33337 8.66669L6.00004 11.3334L12.6667 4.66669"
stroke="#56C991"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -64,8 +64,8 @@ const PencilAlt = () => (
<path
d="M7.33329 3.33334H3.99996C3.26358 3.33334 2.66663 3.93029 2.66663 4.66667V12C2.66663 12.7364 3.26358 13.3333 3.99996 13.3333H11.3333C12.0697 13.3333 12.6666 12.7364 12.6666 12V8.66667M11.7238 2.39052C12.2445 1.86983 13.0887 1.86983 13.6094 2.39052C14.1301 2.91122 14.1301 3.75544 13.6094 4.27614L7.88557 10H5.99996L5.99996 8.11438L11.7238 2.39052Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -87,8 +87,8 @@ const Refresh = () => (
<path
d="M2.66663 2.66669V6.00002H3.0543M13.292 7.33335C12.964 4.70248 10.7197 2.66669 7.99996 2.66669C5.76171 2.66669 3.84549 4.04547 3.0543 6.00002M3.0543 6.00002H5.99996M13.3333 13.3334V10H12.9456M12.9456 10C12.1544 11.9546 10.2382 13.3334 7.99996 13.3334C5.28021 13.3334 3.03595 11.2976 2.70789 8.66669M12.9456 10H9.99996"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -110,7 +110,7 @@ const Exit = () => (
<path
d="M9.33333 6.66668C9.10226 6.78107 8.87965 6.90988 8.66667 7.0519C7.05869 8.12418 6 9.95027 6 12.0227C6 15.3239 8.68629 18 12 18C15.3137 18 18 15.3239 18 12.0227C18 9.95027 16.9413 8.12418 15.3333 7.0519C15.1204 6.90988 14.8977 6.78107 14.6667 6.66668M12 5.33334V10.6667"
stroke="#F7544A"
stroke-linecap="round"
strokeLinecap="round"
/>
</svg>
);
@@ -132,8 +132,8 @@ const PlusSm = () => (
<path
d="M8 4V8M8 8V12M8 8H12M8 8L4 8"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
@@ -155,8 +155,8 @@ const Trash = () => (
<path
d="M12.6666 4.66667L12.0884 12.7617C12.0386 13.4594 11.458 14 10.7585 14H5.24145C4.54193 14 3.96135 13.4594 3.91151 12.7617L3.33329 4.66667M6.66663 7.33333V11.3333M9.33329 7.33333V11.3333M9.99996 4.66667V2.66667C9.99996 2.29848 9.70148 2 9.33329 2H6.66663C6.29844 2 5.99996 2.29848 5.99996 2.66667V4.66667M2.66663 4.66667H13.3333"
stroke="#F7544A"
stroke-linecap="round"
stroke-linejoin="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
src/components/Contro.tsx
+13 -9
View File
@@ -10,6 +10,7 @@ import {
} from "@assets/icon/icon";
import { wsc } from "@network/chrome";
import "./Contro.css";
import {ActionType} from "../../public/connect";
interface ControProps {}
export const Contro: React.FC<ControProps> = () => {
@@ -46,15 +47,18 @@ export const Contro: React.FC<ControProps> = () => {
const connectPort = (port: number) => {
wsc.connect(port);
wsc.onWSCMessage((req: { connected: boolean }) => {
if (req["connected"] === undefined) {
return;
}
setConnected(req.connected);
if (req.connected === false) {
setAutoFindFailedReason("Yakit WebSocket Controller Port is not right");
} else {
setAutoFindFailedReason("");
wsc.onWSCMessage((message) => {
if (message.action === ActionType.STATUS) {
console.log("onWSCMessage", message)
if (message.connected === undefined) {
return;
}
setConnected(message.connected);
if (message.connected === false) {
setAutoFindFailedReason("Yakit WebSocket Controller Port is not right");
} else {
setAutoFindFailedReason("");
}
}
});
};
src/network/chrome.ts
+15 -6
View File
@@ -1,9 +1,18 @@
import {chrome} from "./chromeapi";
enum ActionType {
CONNECT = 'connect',
DISCONNECT = 'disconnect',
STATUS = 'status',
PROXYSTATUS = 'proxystatus',
SETPROXY = 'setproxy',
CLEARPROXY = 'clearproxy'
}
export namespace wsc {
export function connect(port: number, host?: string) {
chrome.runtime.sendMessage({
action: 'connect',
action: ActionType.CONNECT,
host: host || '127.0.0.1',
port: port,
});
@@ -11,19 +20,19 @@ export namespace wsc {
export function disconnect() {
chrome.runtime.sendMessage({
action: 'disconnect',
action: ActionType.DISCONNECT,
});
}
export function updateWSCStatus() {
chrome.runtime.sendMessage({
action: 'status',
action: ActionType.STATUS,
});
}
export function updateProxyStatus() {
chrome.runtime.sendMessage({
action: 'proxystatus',
action: ActionType.PROXYSTATUS,
});
}
@@ -36,11 +45,11 @@ export namespace wsc {
}
export function setproxy(scheme: string, host: string, port: number) {
chrome.runtime.sendMessage({action: "setproxy", scheme, host, port})
chrome.runtime.sendMessage({action: ActionType.SETPROXY, scheme, host, port})
}
export function clearproxy() {
chrome.runtime.sendMessage({action: 'clearproxy'})
chrome.runtime.sendMessage({action: ActionType.CLEARPROXY})
}