From 8eb37bc12b4069738c71c7b16715ea1ec56ee13f Mon Sep 17 00:00:00 2001
From: ninjeeter <168739736+ninjeeter@users.noreply.github.com>
Date: Mon, 12 Aug 2024 19:49:20 +0000
Subject: [PATCH] Updated - 8/12/24
---
README.md | 63 +++++++++++++++++++++++++++++----
public/style.css | 65 ++++++++++++++++++++++++----------
src/index.ts | 92 +++++++++++++++++++++++++++++++++++++-----------
src/types.ts | 2 +-
4 files changed, 175 insertions(+), 47 deletions(-)
diff --git a/README.md b/README.md
index bdd05d9..3b5ce30 100644
--- a/README.md
+++ b/README.md
@@ -18,13 +18,62 @@
-# Notebook
+# Notebook [](https://twitter.com/ninjeeter)
-A note taking plugin for Caido.
+**Notebook** is a frontend note taking plugin for [Caido](https://github.com/caido).
-## 🏎️ Usage
+This plugin gives you the ability to consolidate your notes as you work directly within the Caido application.
-1. `pnpm install`
-1. Make some modifications in `src`
-1. `pnpm build`
-1. Upload the plugin.zip in the `dist-zip` folder to your Caido instance
+## Features/Abilities:
+
+- Notes can be added manually or via highlight selecting and using the context menu shortcut.
+- Easily send requests and responses to be added as note entries.
+- Note entries include date and time stamps.
+- If you were working within a Project when the note was added - the Project name will be included.
+- Note row panes can be expanded/condensed.
+- Add additional comments to the note entries - helpful for providing additional information on requests/responses.
+- Notes are available globally across all Projects.
+- Easily edit notes after they have been added.
+- Delete individual notes or clear the entire table at once.
+
+
+
+## Installation: Documentation Example
+
+If you are looking for the version of the **Notebook** plugin created in the [documentation guide](https://docs.caido.io/guides/plugins/notebook.html):
+
+1. Go to the [Notebook Releases tab](https://github.com/caido-community/notebook/releases) and download the latest `notebook_v1.0.0.zip` package.
+2. In your Caido instance, navigate to the `Plugins` page, click `Install Package` and select the downloaded `notebook_v1.0.0.zip` package.
+3. Done! 🎉
+
+## Installation: Latest
+
+For **Notebook** with additional features:
+
+1. Go to the [Notebook Releases tab](https://github.com/caido-community/notebook/releases) and download the latest release.
+2. In your Caido instance, navigate to the `Plugins` page, click `Install Package` and select the downloaded package.
+3. Done! 🎉
+
+## Instructions
+
+### To add a note:
+ 1. Supply input in the textarea located at the bottom and click the `Add Note` button.
+ 2. Highlight select text within a request/response pane and click the `>_ Commands` button located at the topbar in the upper-right corner. Search/Select `Add Note to Notebook`.
+ 3. Highlight select text within a request/response pane and open the context menu by right-clicking. Hover over the `Plugins` item and select `Add Note to Notebook`.
+ 4. `CTRL+C` within request and response panes and `CTRL+V` into the textarea.
+
+### To edit a note:
+ 1. Click inside the note column.
+ 2. Unfocus once done.
+
+### To add a comment:
+ 1. Supply input in the textarea in the third column.
+ 2. Unfocus once done.
+
+### To clear all notes:
+ ***This will reset the notes in storage. This action cannot be undone.***
+ 1. Click the `>_ Commands` button located at the topbar in the upper-right corner. Search/Select `Clear Notes in Notebook`.
+
+## Contribution
+
+If you'd like to request a feature, suggest an improvement or report a bug - please [create a Github Issue](https://github.com/caido-community/notebook/issues).
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 83fef32..798a3cf 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4,21 +4,21 @@
#notesTable {
width: 100%;
- border-collapse: collapse;
+ border-collapse: collapse; /* Ensures that table borders do not double up */
}
/* Allow user to select text */
-#notesTable tbody {
- user-select: text;
- -webkit-user-select: text;
+#notesTable td {
+ user-select: auto;
+ -webkit-user-select: auto;
}
#notesTable td:nth-child(1) {
width: 200px;
white-space: pre-wrap;
text-align: left;
- border: 1px solid black;
- padding: 5px;
+ padding: 8px;
+ box-sizing: border-box;
}
#notesTable td:nth-child(2) {
@@ -26,41 +26,63 @@
white-space: pre-line;
word-wrap: break-word;
text-align: left;
- border-top: 1px solid black;
- border-bottom: 1px solid black;
- border-left: 1px solid black;
- padding-right: 5px;
- padding-left: 5px;
+ padding: 8px;
+ box-sizing: border-box;
}
#notesTable td:nth-child(3) {
- width: 50px;
- border-right: 1px solid black;
- border-bottom: 1px solid black;
- border-top: 1px solid black;
- vertical-align: top;
+ width: 250px;
+ white-space: pre-wrap;
+ text-align: left;
+ padding: 8px;
+ box-sizing: border-box;
}
+/* Style for the textareas in the third column */
.text-area {
width: 100%;
resize: none;
+ box-sizing: border-box;
}
-.center {
- text-align: center;
+.text-area-edit {
+ width: 100%;
+ resize: vertical;
+ overflow: auto;
+ box-sizing: border-box;
+ white-space: pre-wrap;
+ word-wrap: break-word;
}
+/* Additional styling for textarea in table */
+.comment-text-area {
+ border: 1px solid #ccc;
+ padding: 4px;
+ border-radius: 4px;
+ min-width: 230px;
+ min-height: 75px;
+ color: goldenrod;
+}
+
+/* General table styling */
.table-container {
overflow: auto;
max-height: 100%;
max-width: 100%;
}
+.table-container table td {
+ border: 1px solid black;
+ padding: 5px;
+}
+
+/* Button container styling */
.button-container {
display: flex;
justify-content: space-between;
}
+/* Text and color styling */
.bold-brown {
font-weight: bold;
color: #b49566;
@@ -82,4 +104,9 @@
.datetime-cell {
vertical-align: top;
color: #d1bfa5;
-}
\ No newline at end of file
+}
+
+/* Center align utility */
+.center {
+ text-align: center;
+}
diff --git a/src/index.ts b/src/index.ts
index 742d45e..a7fa307 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -23,9 +23,10 @@ const addNoteStorage = async (
datetime: string,
note: string,
projectName?: string,
+ comment?: string,
) => {
const currentNotes = getNotes(caido);
- const updatedNotes = [...currentNotes, { datetime, note, projectName }];
+ const updatedNotes = [...currentNotes, { datetime, note, projectName, comment: "" }];
await caido.storage.set({ notes: updatedNotes });
// Print added note to console.
@@ -64,6 +65,8 @@ const addNoteMenu = async (caido: Caido) => {
// Add the note to storage.
await addNoteStorage(caido, datetime, currentSelect, projectName);
+
+ caido.window.showToast(`${currentSelect} added to Notebook.`, {variant: "info", duration: 5000})
}
}
};
@@ -85,9 +88,17 @@ const addPage = (caido: Caido) => {
const instructions = document.createElement("p");
instructions.innerHTML = `To add a note:
1. Supply input in the textarea located at the bottom and click the Add Note button.
- 2. Click the >_ Commands button located at the topbar in the upper-right corner. Search/Select Add Note to Notebook. Supply input in the prompt and click OK.
+ 2. Highlight select text within a request/response pane and click the >_ Commands button located at the topbar in the upper-right corner. Search/Select Add Note to Notebook.
3. Highlight select text within a request/response pane and open the context menu by right-clicking. Hover over the Plugins item and select Add Note to Notebook.
- 4. CTRL+C and CTRL+V within request and response panes is available as well but ensure to deselect the text and unfocus the pane to avoid needing to restart the Caido application.
***Copying within panes using Copy from the right-click context menu is functional as normal.***
+ 4. CTRL+C within request and response panes and CTRL+V into the textarea.
+
+ To edit a note:
+ 1. Click inside the note column.
+ 2. Unfocus once done.
+
+ To add a comment:
+ 1. Supply input in the textarea in the third column.
+ 2. Unfocus once done.
To clear all notes:
***This will reset the notes in storage. This action cannot be undone.***
@@ -170,33 +181,74 @@ const displayNotes = (caido: Caido, notes: PluginStorage["notes"] | undefined) =
const row = table.insertRow();
const datetimeCell = row.insertCell();
const noteCell = row.insertCell();
- const removeCell = row.insertCell();
+ const commentCell = row.insertCell(); // New cell for comments
- datetimeCell.textContent = `${note.datetime} Project: ${note.projectName}`;
- datetimeCell.classList.add("datetime-cell");
- noteCell.textContent = note.note;
+ // Create container for datetime text and delete button
+ const datetimeContainer = document.createElement("div");
+ datetimeContainer.classList.add("datetime-container");
+
+ // DateTime text
+ const datetimeText = document.createElement("span");
+ datetimeText.textContent = `${note.datetime} Project: ${note.projectName}`;
+ datetimeText.classList.add("datetime-text");
- // `Remove note.` button.
+ // `Remove note.` button
const removeNoteButton = caido.ui.button({
variant: "primary",
label: "Delete",
trailingIcon: "fas fa-trash-can",
size: "small"
});
-
+
removeNoteButton.addEventListener("click", async () => {
const currentNotes = getNotes(caido);
- const indexToRemove = currentNotes.length - 1;
-
- if (indexToRemove !== -1) {
- currentNotes.splice(indexToRemove, 1);
- await caido.storage.set({ notes: currentNotes });
-
- displayNotes(caido, currentNotes);
- }
- });
- removeCell.appendChild(removeNoteButton);
- });
+ const updatedNotes = currentNotes.filter((_, i) => i !== index);
+
+ await caido.storage.set({ notes: updatedNotes });
+ displayNotes(caido, updatedNotes);
+ });
+
+ // Append text and button to container
+ datetimeContainer.appendChild(datetimeText);
+ datetimeContainer.appendChild(removeNoteButton);
+
+ // Add container to datetime cell
+ datetimeCell.appendChild(datetimeContainer);
+ datetimeCell.classList.add("datetime-cell");
+
+ // Editable div for note
+ const editableNote = document.createElement("div");
+ editableNote.contentEditable = "true";
+ editableNote.spellcheck = false;
+ editableNote.textContent = note.note;
+ editableNote.classList.add("text-area-edit");
+
+ editableNote.addEventListener("blur", async () => {
+ // Update the note in storage when editing is finished
+ const updatedNotes = [...notes];
+ updatedNotes[index].note = editableNote.textContent || "";
+ await caido.storage.set({ notes: updatedNotes });
+ displayNotes(caido, updatedNotes);
+ });
+
+ noteCell.appendChild(editableNote);
+
+ // Create textarea for comments
+ const commentTextarea = document.createElement("textarea");
+ commentTextarea.placeholder = "Add your comments here...";
+ commentTextarea.value = note.comment || ""; // Use existing comment if present
+ commentTextarea.classList.add("comment-text-area");
+
+ commentTextarea.addEventListener("blur", async () => {
+ // Update the comment in storage when editing is finished
+ const updatedNotes = [...notes];
+ updatedNotes[index].comment = commentTextarea.value;
+ await caido.storage.set({ notes: updatedNotes });
+ displayNotes(caido, updatedNotes);
+ });
+
+ commentCell.appendChild(commentTextarea);
+ })
};
export const init = (caido: Caido) => {
diff --git a/src/types.ts b/src/types.ts
index 1f956cd..ffc5316 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,3 +1,3 @@
export type PluginStorage = {
- notes: { datetime: string; note: string; projectName?: string }[];
+ notes: { datetime: string; note: string; projectName?: string; comment?: string; }[];
}