Skip to content

Commit fd6efb4

Browse files
Corb3nikCorb3nik
authored
add docs (#89)
1 parent bb76534 commit fd6efb4

File tree

3 files changed

+459
-0
lines changed

3 files changed

+459
-0
lines changed

‎src/guides/filters.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,96 @@ To delete a filter:
5151
await sdk.filters.delete(filterId);
5252
```
5353

54+
### Getting the Current Filter
55+
56+
To get the currently selected filter:
57+
58+
```ts
59+
const currentFilter = sdk.filters.getCurrentFilter();
60+
```
61+
62+
Returns the currently selected filter, or `undefined` if no filter is selected.
63+
64+
### Subscribing to Filter Changes
65+
66+
To subscribe to changes in the currently selected filter:
67+
68+
```ts
69+
const handler = sdk.filters.onCurrentFilterChange((event) => {
70+
console.log(`Filter ${event.filterId} got selected!`);
71+
});
72+
73+
// Later, stop listening
74+
handler.stop();
75+
```
76+
77+
The callback receives an event object with a `filterId` property that contains the ID of the newly selected filter, or `undefined` if no filter is selected.
78+
79+
::: info
80+
The subscription handler returns an object with a `stop()` method that can be called to unsubscribe from filter changes.
81+
:::
82+
83+
## Adding Components to Filter Slots
84+
85+
You can add custom components to filter slots to extend the Filters page UI. Available slots are:
86+
87+
- `FilterSlot.CreateHeader` - The header area of the preset form create component
88+
- `FilterSlot.UpdateHeader` - The header area of the preset form update component
89+
90+
### Adding a Button to a Slot
91+
92+
Add a button with a label, icon, and click handler:
93+
94+
```ts
95+
import { FilterSlot } from "@caido/sdk-frontend";
96+
97+
sdk.filters.addToSlot(FilterSlot.UpdateHeader, {
98+
type: "Button",
99+
label: "My Button",
100+
icon: "my-icon",
101+
onClick: () => {
102+
console.log("Button clicked");
103+
},
104+
});
105+
```
106+
107+
### Adding a Command to a Slot
108+
109+
Add a button that triggers a registered command:
110+
111+
```ts
112+
import { FilterSlot } from "@caido/sdk-frontend";
113+
114+
// First register the command
115+
sdk.commands.register("my-command", {
116+
name: "My Command",
117+
run: () => {
118+
sdk.window.showToast("Command executed", { variant: "info" });
119+
},
120+
});
121+
122+
// Then add to slot
123+
sdk.filters.addToSlot(FilterSlot.UpdateHeader, {
124+
type: "Command",
125+
commandId: "my-command",
126+
icon: "my-icon",
127+
});
128+
```
129+
130+
### Adding a Custom Component to a Slot
131+
132+
Add a custom Vue component:
133+
134+
```ts
135+
import { FilterSlot } from "@caido/sdk-frontend";
136+
import MyComponent from "./MyComponent.vue";
137+
138+
sdk.filters.addToSlot(FilterSlot.CreateHeader, {
139+
type: "Custom",
140+
definition: MyComponent,
141+
});
142+
```
143+
54144
## Setting HTTPQL Queries on Pages
55145

56146
### HTTP History
@@ -206,3 +296,64 @@ const filter = await sdk.filters.create({
206296
// Use the filter in a query
207297
sdk.httpHistory.setQuery("preset:success-get");
208298
```
299+
300+
### Tracking Current Filter Changes
301+
302+
This example subscribes to filter selection changes and logs information about the currently selected filter whenever it changes.
303+
304+
```ts
305+
import type { Caido } from "@caido/sdk-frontend";
306+
307+
export type CaidoSDK = Caido;
308+
309+
export const init = (sdk: CaidoSDK) => {
310+
const handler = sdk.filters.onCurrentFilterChange((event) => {
311+
if (event.filterId) {
312+
const filter = sdk.filters.getCurrentFilter();
313+
if (filter) {
314+
sdk.log.info(`Filter selected: ${filter.name} (${filter.alias})`);
315+
sdk.log.info(`Query: ${filter.query}`);
316+
}
317+
} else {
318+
sdk.log.info("No filter selected");
319+
}
320+
});
321+
322+
// Store handler for cleanup if needed
323+
// handler.stop();
324+
};
325+
```
326+
327+
### Adding Custom Actions to Filter Slots
328+
329+
This example adds a custom button to the filter update header that duplicates the current filter when clicked.
330+
331+
```ts
332+
import type { Caido } from "@caido/sdk-frontend";
333+
import { FilterSlot } from "@caido/sdk-frontend";
334+
335+
export type CaidoSDK = Caido;
336+
337+
export const init = (sdk: CaidoSDK) => {
338+
sdk.filters.addToSlot(FilterSlot.UpdateHeader, {
339+
type: "Button",
340+
label: "Duplicate Filter",
341+
icon: "fas fa-copy",
342+
onClick: async () => {
343+
const currentFilter = sdk.filters.getCurrentFilter();
344+
if (currentFilter) {
345+
const duplicated = await sdk.filters.create({
346+
name: `${currentFilter.name} (Copy)`,
347+
alias: `${currentFilter.alias}-copy`,
348+
query: currentFilter.query,
349+
});
350+
sdk.window.showToast(`Filter "${duplicated.name}" created`, {
351+
variant: "success",
352+
});
353+
} else {
354+
sdk.window.showToast("No filter selected", { variant: "warning" });
355+
}
356+
},
357+
});
358+
};
359+
```

‎src/guides/match_replace.md‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,96 @@ To clear the selection:
122122
sdk.matchReplace.selectRule(undefined);
123123
```
124124

125+
### Getting the Current Rule
126+
127+
To get the currently selected rule:
128+
129+
```ts
130+
const currentRule = sdk.matchReplace.getCurrentRule();
131+
```
132+
133+
Returns the currently selected rule, or `undefined` if no rule is selected.
134+
135+
### Subscribing to Rule Changes
136+
137+
To subscribe to changes in the currently selected rule:
138+
139+
```ts
140+
const handler = sdk.matchReplace.onCurrentRuleChange((event) => {
141+
console.log(`Rule ${event.ruleId} got selected!`);
142+
});
143+
144+
// Later, stop listening
145+
handler.stop();
146+
```
147+
148+
The callback receives an event object with a `ruleId` property that contains the ID of the newly selected rule, or `undefined` if no rule is selected.
149+
150+
::: info
151+
The subscription handler returns an object with a `stop()` method that can be called to unsubscribe from rule changes.
152+
:::
153+
154+
## Adding Components to Match and Replace Slots
155+
156+
You can add custom components to match and replace slots to extend the Match and Replace page UI. Available slots are:
157+
158+
- `MatchReplaceSlot.CreateHeader` - The header area of the rule form create component
159+
- `MatchReplaceSlot.UpdateHeader` - The header area of the rule form update component
160+
161+
### Adding a Button to a Slot
162+
163+
Add a button with a label, icon, and click handler:
164+
165+
```ts
166+
import { MatchReplaceSlot } from "@caido/sdk-frontend";
167+
168+
sdk.matchReplace.addToSlot(MatchReplaceSlot.UpdateHeader, {
169+
type: "Button",
170+
label: "My Button",
171+
icon: "my-icon",
172+
onClick: () => {
173+
console.log("Button clicked");
174+
},
175+
});
176+
```
177+
178+
### Adding a Command to a Slot
179+
180+
Add a button that triggers a registered command:
181+
182+
```ts
183+
import { MatchReplaceSlot } from "@caido/sdk-frontend";
184+
185+
// First register the command
186+
sdk.commands.register("my-command", {
187+
name: "My Command",
188+
run: () => {
189+
sdk.window.showToast("Command executed", { variant: "info" });
190+
},
191+
});
192+
193+
// Then add to slot
194+
sdk.matchReplace.addToSlot(MatchReplaceSlot.UpdateHeader, {
195+
type: "Command",
196+
commandId: "my-command",
197+
icon: "my-icon",
198+
});
199+
```
200+
201+
### Adding a Custom Component to a Slot
202+
203+
Add a custom Vue component:
204+
205+
```ts
206+
import { MatchReplaceSlot } from "@caido/sdk-frontend";
207+
import MyComponent from "./MyComponent.vue";
208+
209+
sdk.matchReplace.addToSlot(MatchReplaceSlot.CreateHeader, {
210+
type: "Custom",
211+
definition: MyComponent,
212+
});
213+
```
214+
125215
## Examples
126216

127217
### Auto-Enable Rules
@@ -176,3 +266,67 @@ export const init = (sdk: CaidoSDK) => {
176266
});
177267
};
178268
```
269+
270+
### Tracking Current Rule Changes
271+
272+
This example subscribes to rule selection changes and logs information about the currently selected rule whenever it changes.
273+
274+
```ts
275+
import type { Caido } from "@caido/sdk-frontend";
276+
277+
export type CaidoSDK = Caido;
278+
279+
export const init = (sdk: CaidoSDK) => {
280+
const handler = sdk.matchReplace.onCurrentRuleChange((event) => {
281+
if (event.ruleId) {
282+
const rule = sdk.matchReplace.getCurrentRule();
283+
if (rule) {
284+
sdk.log.info(`Rule selected: ${rule.name}`);
285+
sdk.log.info(`Query: ${rule.query}`);
286+
sdk.log.info(`Enabled: ${rule.isEnabled}`);
287+
}
288+
} else {
289+
sdk.log.info("No rule selected");
290+
}
291+
});
292+
293+
// Store handler for cleanup if needed
294+
// handler.stop();
295+
};
296+
```
297+
298+
### Adding Custom Actions to Match and Replace Slots
299+
300+
This example adds a custom button to the rule update header that duplicates the current rule when clicked.
301+
302+
```ts
303+
import type { Caido } from "@caido/sdk-frontend";
304+
import { MatchReplaceSlot } from "@caido/sdk-frontend";
305+
306+
export type CaidoSDK = Caido;
307+
308+
export const init = (sdk: CaidoSDK) => {
309+
sdk.matchReplace.addToSlot(MatchReplaceSlot.UpdateHeader, {
310+
type: "Button",
311+
label: "Duplicate Rule",
312+
icon: "fas fa-copy",
313+
onClick: async () => {
314+
const currentRule = sdk.matchReplace.getCurrentRule();
315+
if (currentRule) {
316+
const duplicated = await sdk.matchReplace.createRule({
317+
collectionId: currentRule.collectionId,
318+
name: `${currentRule.name} (Copy)`,
319+
query: currentRule.query,
320+
section: currentRule.section,
321+
sources: [],
322+
});
323+
sdk.window.showToast(`Rule "${duplicated.name}" created`, {
324+
variant: "success",
325+
});
326+
} else {
327+
sdk.window.showToast("No rule selected", { variant: "warning" });
328+
}
329+
},
330+
});
331+
};
332+
```

0 commit comments

Comments
 (0)