Merge pull request #11 from caido-community/use-slot-api

Author: bebiksior

caido.config.ts

@@ -13,7 +13,7 @@ export default defineConfig({
   id,
   name: "Drop",
   description: "Drop - a plugin for collaboration in Caido.",
-  version: "0.1.7",
+  version: "0.1.8",
   author: {
     name: "Justin Gardner",
     email: "justin@caido.io",

packages/frontend/package.json

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

packages/frontend/src/dom/DOMInjectionManager.ts

@@ -4,7 +4,6 @@ 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";
 import "./styles/index.css";
@@ -55,13 +54,64 @@ export const init = async (sdk: FrontendSDK) => {
 
   sdk.replay.addToSlot("session-toolbar-secondary", {
     type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.filters.addToSlot("create-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.filters.addToSlot("update-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.scopes.addToSlot("create-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.scopes.addToSlot("update-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.httpHistory.addToSlot("toolbar-primary", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
 
+  sdk.search.addToSlot("search-toolbar-primary", {
+    type: "Custom",
     definition: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      component: DropToButton as any,
+      component: DropToButton,
     },
   });
 
-  const domInjectionManager = new DOMInjectionManager(sdk);
-  domInjectionManager.start();
+  sdk.matchReplace.addToSlot("update-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
+
+  sdk.matchReplace.addToSlot("create-header", {
+    type: "Custom",
+    definition: {
+      component: DropToButton,
+    },
+  });
 };

packages/frontend/src/index.ts

@@ -107,6 +107,7 @@ export const claimTamper = async (
     section: section,
     query: query,
     collectionId: "1",
+    sources: [],
   });
   return res;
 };

packages/frontend/src/utils/claimUtil.ts

@@ -11,27 +11,26 @@ import { eventBus } from "@/utils/eventBus";
 
 const callbacks = {
   "#/replay": async (sdk: FrontendSDK, connection: DropConnection) => {
-    const button = document.querySelector(
-      '[data-is-selected="true"][data-session-id]',
-    );
-    if (!button) {
-      sdk.window.showToast("Please select a replay tab first.", {
+    const selectedSession = sdk.replay.getCurrentSession();
+    if (!selectedSession) {
+      sdk.window.showToast("Please select a replay session first.", {
         variant: "error",
         duration: 5000,
       });
       return;
     }
-    const id = button?.getAttribute("data-session-id");
-    if (!id) {
-      sdk.window.showToast("Please select a replay session first.", {
+
+    const session = await sdk.graphql.replayEntriesBySession({
+      sessionId: selectedSession.id,
+    });
+
+    if (!session || !session.replaySession) {
+      sdk.window.showToast("Error while getting replay session entries.", {
         variant: "error",
         duration: 5000,
       });
       return;
     }
-    const session = await sdk.graphql.replayEntriesBySession({
-      sessionId: id,
-    });
 
     const activeEntry = session?.replaySession?.activeEntry?.id;
     if (!activeEntry) {
@@ -50,6 +49,7 @@ const callbacks = {
       });
       return;
     }
+
     const data = {
       session: session.replaySession,
       entry: entryData.replayEntry,
@@ -127,20 +127,16 @@ const callbacks = {
   },
 
   "#/tamper": (sdk: FrontendSDK, connection: DropConnection) => {
-    const preset = document.querySelector(
-      '.c-tree-rule[data-is-active="true"]',
-    );
-    const id = preset?.getAttribute("data-rule-id");
-    if (!id) {
+    const currentRule = sdk.matchReplace.getCurrentRule();
+    if (!currentRule) {
       sdk.window.showToast("Please select a rule first.", {
         variant: "error",
         duration: 5000,
       });
       return;
     }
-    const rules = sdk.matchReplace.getRules();
-    const rule = rules.find((rule) => rule.id === id);
-    if (JSON.stringify(rule).indexOf('"kind":"ReplacerWorkflow"') > -1) {
+
+    if (JSON.stringify(currentRule).indexOf('"kind":"ReplacerWorkflow"') > -1) {
       sdk.window.showToast("Sorry, we don't support workflow M&R rules yet.", {
         variant: "error",
         duration: 5000,
@@ -149,7 +145,7 @@ const callbacks = {
     }
     const payload: DropPayload = {
       id: uuidv4(),
-      objects: [{ type: "Tamper", value: rule }],
+      objects: [{ type: "Tamper", value: currentRule }],
       notes: "M&R Rule drop",
     };
 
@@ -161,18 +157,14 @@ const callbacks = {
   },
 
   "#/filter": (sdk: FrontendSDK, connection: DropConnection) => {
-    const parent = document.querySelector(".c-list-items__well");
-    const preset = parent?.querySelector('[data-is-selected="true"]');
-    const id = preset?.getAttribute("data-preset-id");
-    if (!id) {
+    const filter = sdk.filters.getCurrentFilter();
+    if (!filter) {
       sdk.window.showToast("Please select a filter first.", {
         variant: "error",
         duration: 5000,
       });
       return;
     }
-    const filters = sdk.filters.getAll();
-    const filter = filters.find((filter) => filter.id === id);
     const payload: DropPayload = {
       id: uuidv4(),
       objects: [{ type: "Filter", value: filter }],
@@ -187,17 +179,14 @@ const callbacks = {
   },
 
   "#/scope": (sdk: FrontendSDK, connection: DropConnection) => {
-    const preset = document.querySelector('.c-preset[data-is-selected="true"]');
-    const id = preset?.getAttribute("data-preset-id");
-    if (!id) {
+    const scope = sdk.scopes.getCurrentScope();
+    if (!scope) {
       sdk.window.showToast("Please select a scope first.", {
         variant: "error",
         duration: 5000,
       });
       return;
     }
-    const scopes = sdk.scopes.getScopes();
-    const scope = scopes.find((scope) => scope.id === id);
     const payload: DropPayload = {
       id: uuidv4(),
       objects: [{ type: "Scope", value: scope }],