Format code

Author: Sytten

caido.config.ts

@@ -29,19 +29,19 @@ export default defineConfig({
         build: {
           rollupOptions: {
             external: [
-            '@caido/frontend-sdk', 
-            "@codemirror/autocomplete", 
-            "@codemirror/commands", 
-            "@codemirror/language", 
-            "@codemirror/lint", 
-            "@codemirror/search", 
-            "@codemirror/state", 
-            "@codemirror/view", 
-            "@lezer/common", 
-            "@lezer/highlight", 
-            "@lezer/lr",
-            "vue"
-          ]
+              "@caido/frontend-sdk",
+              "@codemirror/autocomplete",
+              "@codemirror/commands",
+              "@codemirror/language",
+              "@codemirror/lint",
+              "@codemirror/search",
+              "@codemirror/state",
+              "@codemirror/view",
+              "@lezer/common",
+              "@lezer/highlight",
+              "@lezer/lr",
+              "vue",
+            ],
           },
         },
         resolve: {

packages/frontend/package.json

@@ -16,8 +16,8 @@
     "vue": "3.5.13"
   },
   "devDependencies": {
-    "@caido/sdk-backend": "latest",
-    "@caido/sdk-frontend": "latest",
+    "@caido/sdk-backend": "0.53.1",
+    "@caido/sdk-frontend": "0.53.1",
     "@codemirror/view": "6.28.1",
     "@openpgp/web-stream-tools": "0.1.3",
     "@types/crypto-js": "^4.2.2",

packages/frontend/src/api/dropService.ts

@@ -44,9 +44,7 @@ export const DropAPI = {
     }
   },
 
-  sendMessage: async (
-    message: DropSendMessage,
-  ): Promise<void> => {
+  sendMessage: async (message: DropSendMessage): Promise<void> => {
     const apiServer = ConfigService.getApiServer();
     const response = await fetch(`${apiServer}/api/v1/send`, {
       method: "POST",

packages/frontend/src/components/DropToButton.vue

@@ -1,22 +1,22 @@
 <template>
   <div v-if="connections.length > 0">
-  <Select
-    v-model="selectedConnection"
-    :options="connections"
-    :loading="isLoading"
-    option-label="alias"
-    placeholder="Drop to..."
-    class="w-full"
-    :filter="true"
-    @change="handleConnectionSelect"
-  >
-    <template #option="slotProps">
-      <div class="flex items-center gap-2">
-        <span>{{ slotProps.option.alias || "Unnamed Connection" }}</span>
-      </div>
-    </template>
-  </Select>
-</div>
+    <Select
+      v-model="selectedConnection"
+      :options="connections"
+      :loading="isLoading"
+      option-label="alias"
+      placeholder="Drop to..."
+      class="w-full"
+      :filter="true"
+      @change="handleConnectionSelect"
+    >
+      <template #option="slotProps">
+        <div class="flex items-center gap-2">
+          <span>{{ slotProps.option.alias || "Unnamed Connection" }}</span>
+        </div>
+      </template>
+    </Select>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -25,8 +25,8 @@ import { onMounted, ref } from "vue";
 
 import { ConfigService } from "@/services/configService";
 import { type DropConnection, type DropPluginConfig } from "@/types";
-import { logger } from "@/utils/logger";
 import { callbacks } from "@/utils/dropTo";
+import { logger } from "@/utils/logger";
 
 const isLoading = ref(false);
 const connections = ref<DropConnection[]>([]);

packages/frontend/src/dom/DOMInjectionManager.ts

@@ -31,16 +31,15 @@ export class DOMInjectionManager {
         handler: this.handleScopeActions.bind(this),
       },
       {
-        selector:
-          'div.c-card__header:has(span.fa-undo)',
+        selector: "div.c-card__header:has(span.fa-undo)",
         locationCondition: "#/tamper",
         handler: this.handleTamperActions.bind(this),
-      }, 
+      },
       {
         selector: ".c-card__header",
         locationCondition: "(#/http-history|#/search)",
         handler: this.handleHttpHistoryActions.bind(this),
-      }
+      },
     ];
   }
 
@@ -64,8 +63,12 @@ export class DOMInjectionManager {
   }
 
   private checkForInjectionPoints() {
-    for (const { selector, handler, locationCondition } of this.injectionHandlers) {
-      if (locationCondition && !window.location.hash.match(new RegExp(locationCondition))) {
+    for (const { selector, handler, locationCondition } of this
+      .injectionHandlers) {
+      if (
+        locationCondition &&
+        !window.location.hash.match(new RegExp(locationCondition))
+      ) {
         continue;
       }
 
@@ -76,10 +79,7 @@ export class DOMInjectionManager {
     }
   }
 
-  private generateButton(
-    container: Element,
-    customClasses?: string,
-  ) {
+  private generateButton(container: Element, customClasses?: string) {
     // Create the button container
     const buttonContainer = document.createElement("div");
     buttonContainer.className =

packages/frontend/src/index.ts

@@ -3,6 +3,7 @@ import PrimeVue from "primevue/config";
 import ToastService from "primevue/toastservice";
 import { createApp } from "vue";
 
+import DropToButton from "./components/DropToButton.vue";
 import { DOMInjectionManager } from "./dom/DOMInjectionManager";
 import { SDKPlugin } from "./plugins/sdk";
 import "./styles/customInjectionGlobal.css";
@@ -12,7 +13,6 @@ import App from "./views/App.vue";
 
 import { ConfigService, initConfigService } from "@/services/configService";
 import { defaultStorage, type FrontendSDK } from "@/types";
-import DropToButton from "./components/DropToButton.vue";
 
 export const init = async (sdk: FrontendSDK) => {
   initConfigService(sdk);
@@ -55,10 +55,10 @@ export const init = async (sdk: FrontendSDK) => {
 
   sdk.replay.addToSlot("session-toolbar-secondary", {
     type: "Custom",
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    definition:{
+
+    definition: {
       component: DropToButton as any,
-    }
+    },
   });
 
   const domInjectionManager = new DOMInjectionManager(sdk);

packages/frontend/src/plugins/drop.ts

@@ -277,7 +277,10 @@ const handleClaimEvent = async (data: {
   }
 };
 
-const handleDeleteEvent = async (data: { payload: DropPayload }, silent: boolean = false) => {
+const handleDeleteEvent = async (
+  data: { payload: DropPayload },
+  silent: boolean = false,
+) => {
   const { payload } = data;
   logger.log("Processing delete message", payload);
 
@@ -289,7 +292,7 @@ const handleDeleteEvent = async (data: { payload: DropPayload }, silent: boolean
       );
       await ConfigService.updateConfig({ messages: updatedMessages });
     }
-    if (!silent) {  
+    if (!silent) {
       sdk.window.showToast("Deleted message", {
         variant: "info",
         duration: 2000,

packages/frontend/src/utils/claimUtil.ts

@@ -31,9 +31,9 @@ export const claimReplay = async (
       throw new Error("Session ID is null");
     }
     // Check for Drops collection and create if doesn't exist
-    const collections = await sdk.replay.getCollections();
-    let dropsCollectionId = collections.find(c => c.name === "Drops")?.id;
-    
+    const collections = sdk.replay.getCollections();
+    let dropsCollectionId = collections.find((c) => c.name === "Drops")?.id;
+
     if (!dropsCollectionId) {
       const newCollection = await sdk.replay.createCollection("Drops");
       dropsCollectionId = newCollection.id;