Add more types to variables

Author: brunoais

src/background/index.ts

@@ -8,6 +8,8 @@
 import '../../src/polyfills';
 import { logger as console } from '../shared/logger';
 import { IS_EVENTPAGE, IS_FIREFOX, IS_MV3 } from '../env';
+import { ExtensionRequestMessage, ExtensionResponseMessage } from '../types/extension';
+import { WebSocketIncomingMessage } from '../types/websocket';
 import Config from './config';
 import { findTm } from './find_tm';
 import Storage from './storage';
@@ -146,14 +148,14 @@ const init = async () => {
     const setupWebSocketRelay = (wsClient: LocalWebSocketClient) => {
         const allowedActions = ['list', 'get', 'set', 'patch'];
 
-        wsClient.listen(async (msg: any) => {
+        wsClient.listen(async (msg: WebSocketIncomingMessage) => {
             console.log('WebSocket message received:', msg);
 
-            if (!msg?.action || !allowedActions.includes(msg.action)) return;
+            if (!msg?.action || !allowedActions.includes(msg.action as string)) return;
 
             msg = { method: 'userscripts', args: {...msg, messageId: msg.messageId, activeUrls: [MAIN_URL]} };
 
-            await handleMessage(msg, (response: any) => {
+            await handleMessage(msg, (response?: ExtensionResponseMessage) => {
                 try {
                     wsClient.send({ id: msg.messageId, response });
                 } catch (e) {
@@ -163,13 +165,13 @@ const init = async () => {
         });
     };
 
-    runtime.onMessage.addListener((request: any, sender: any, sendResponse: any) => {
+    runtime.onMessage.addListener((request: ExtensionRequestMessage, sender: { id: string }, sendResponse: ExtensionResponseMessage) => {
 
         if (sender.id === runtime.id) {
             switch(request.method){
                 case 'connectWebSocket': {
                     console.log('Connecting WebSocket client with request:', request);
-                    const { authorization, port } = request.args || {};
+                    const { authorization, port } = (request.args as { authorization?: string; port?: number }) || {};
                     if (!authorization || !port) {
                         sendResponse({ ok: false, error: 'Missing authorization or port' });
                         return true;

src/background/websocket.ts

@@ -1,18 +1,26 @@
+import { WebSocketIncomingMessage } from '../types/websocket';
+
+interface Alarm {
+    name: string;
+    scheduledTime: number;
+    periodInMinutes?: number;
+}
+
 export class LocalWebSocketClient {
     private ws: WebSocket;
     public connected: Promise<this>;
     private resolveConnected!: (value: this) => void;
-    private rejectConnected!: (reason?: any) => void;
-    private messageListeners: Array<(msg: any) => void> = [];
+    private rejectConnected!: (reason?: Event | Error | string) => void;
+    private messageListeners: Array<(msg: WebSocketIncomingMessage) => void> = [];
 
     constructor(auth: string, port: number) {
         const wsUrl = `ws://localhost:${port}`;
-        this.connected = new Promise(() => {}); // Appease the Typescript gods
+        this.connected = new Promise(() => void(0)); // Appease the Typescript gods
         this._prepareConnection();
         try {
             this.ws = new WebSocket(wsUrl);
         } catch (err) {
-            this.rejectConnected(err);
+            this.rejectConnected(err as Error);
             throw err;
         }
         this.ws.onopen = async () => {
@@ -23,7 +31,7 @@ export class LocalWebSocketClient {
 
             (async function (socket: LocalWebSocketClient) {
 
-                async function keepGoingAlarm(alarm: any) {
+                async function keepGoingAlarm(alarm: Alarm) {
                     if (alarm.name !== 'KeepWebsocketAlive') return;
                     console.debug('Websocket keepAlive PING');
 
@@ -69,31 +77,31 @@ export class LocalWebSocketClient {
             chrome.alarms.clear('KeepWebsocketAlive')
         };
 
-        this.ws.onmessage = (event) => {
+        this.ws.onmessage = (event: MessageEvent) => {
             try {
-                const data = JSON.parse(event.data);
+                const data: { method: string; token: string } = JSON.parse(event.data);
                 if (data.method !== 'auth' || data.token !== auth[1]) {
                     console.error('WebSocket authentication failed', data.method, port);  // Not mentioning the auth purposefully
                     this.rejectConnected('Server Auth failed');
                     this.ws.close();
                 }
 
-                this.ws.onmessage = (event) => {
-                    let msg = event.data;
+                this.ws.onmessage = (event: MessageEvent) => {
+                    let msg: string | WebSocketIncomingMessage = event.data;
                     try {
-                        msg = JSON.parse(event.data);
+                        msg = JSON.parse(event.data) as WebSocketIncomingMessage;
                     } catch {}
                     if (data.method === 'ping') {
                         console.debug('pong!');
                         return this.ws.send(JSON.stringify({ method: 'pong' }));
                     }
-                    this.messageListeners.forEach(fn => fn(msg));
+                    this.messageListeners.forEach(fn => fn(msg as WebSocketIncomingMessage));
                 };
                 this.ws.send(JSON.stringify({ method: 'authOK' }));
                 this.resolveConnected(this);
                 console.log('Ready for messaging:');
             } catch (e) {
-                this.rejectConnected(e);
+                this.rejectConnected(e as Error);
                 throw e;
             }
         };
@@ -128,11 +136,11 @@ export class LocalWebSocketClient {
     }
 
 
-    public listen(listener: (msg: any) => void) {
+    public listen(listener: (msg: WebSocketIncomingMessage) => void) {
         this.messageListeners.push(listener);
     }
 
-    public send(msg: any) {
+    public send(msg: string | Record<string, unknown>) {
         if (this.ws.readyState == WebSocket.OPEN) {
             this.ws.send(typeof msg === 'string' ? msg : JSON.stringify(msg));
         } else {

src/popup/popup_code_input.ts

@@ -1,5 +1,6 @@
 /// <reference types="chrome" />
 import { hasHostPermission, requestHostPermission } from '../shared/host_permission';
+import { WebSocketConnectResponse, VSCodeDevConfigResponse } from '../types/extension';
 
 const { runtime } = chrome;
 
@@ -19,7 +20,7 @@ function connect(authorization: string, port: number) {
     runtime.sendMessage({
         method: 'connectWebSocket',
         args: { authorization, port }
-    }, (response: any) => {
+    }, (response: WebSocketConnectResponse) => {
         const feedback = document.getElementById('result') as HTMLDivElement;
         if (response.ok) {
             feedback.textContent = `WebSocket connection initiated.`;
@@ -34,7 +35,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     let openOnline = document.getElementById('openOnline') as HTMLButtonElement;
     openOnline.disabled = true;
 
-    let vscodeConf = await runtime.sendMessage({ method: 'vscodeDevConfig' });
+    let vscodeConf = await runtime.sendMessage({ method: 'vscodeDevConfig' }) as VSCodeDevConfigResponse;
 
     let hpp = await hasHostPermission(vscodeConf.host);
 

src/types/extension.d.ts

@@ -0,0 +1,44 @@
+// Chrome Extension Message Types
+
+export interface ChromeExtensionRequest {
+    method: string;
+    args?: Record<string, unknown>;
+}
+
+export interface WebSocketConnectRequest extends ChromeExtensionRequest {
+    method: 'connectWebSocket';
+    args: {
+        authorization: string;
+        port: number;
+    };
+}
+
+export interface UserscriptsRequest extends ChromeExtensionRequest {
+    method: 'userscripts';
+    args: Record<string, unknown>;
+}
+
+export interface MethodRequest extends ChromeExtensionRequest {
+    method: 'openOnlineEditor' | 'vscodeDevConfig';
+}
+
+export type ExtensionRequestMessage =
+    | ChromeExtensionRequest
+    | MethodRequest
+    | UserscriptsRequest
+    | WebSocketConnectRequest;
+
+
+export interface WebSocketConnectResponse {
+    ok: boolean;
+    error?: string;
+}
+
+export interface VSCodeDevConfigResponse {
+    host: string;
+}
+
+export type ExtensionResponseMessage =
+    | WebSocketConnectResponse
+    | VSCodeDevConfigResponse
+    | Record<string, unknown>;

src/types/websocket.d.ts

@@ -0,0 +1,46 @@
+// WebSocket Communication Types
+
+export interface WebSocketMessage {
+    method: string;
+    [key: string]: unknown;
+}
+
+
+export interface WebSocketMethodMessage extends WebSocketMessage {
+    method: 'authOK' | 'ping' | 'pong';
+}
+
+export interface WebSocketAuthMessage extends WebSocketMessage {
+    method: 'auth';
+    token: string;
+}
+
+export interface WebSocketClosedMessage extends WebSocketMessage {
+    method: 'closed';
+    reason: string;
+}
+
+export interface WebSocketActionMessage extends WebSocketMessage {
+    action: 'list' | 'get' | 'set' | 'patch';
+    messageId: string;
+    [key: string]: unknown;
+}
+
+export type WebSocketIncomingMessage =
+    | WebSocketAuthMessage
+    | WebSocketMethodMessage
+    | WebSocketClosedMessage
+    | WebSocketActionMessage
+    | WebSocketMessage;
+
+
+export interface WebSocketResponse {
+    id: string;
+    response: unknown;
+}
+
+export type WebSocketOutgoingMessage =
+    | WebSocketAuthMessage
+    | WebSocketMethodMessage
+    | WebSocketResponse
+    | WebSocketMessage;