Updated - 8/12/24

README.md

@@ -18,13 +18,62 @@
   <hr />
 </div>
 
-# Notebook
+# Notebook [![Twitter](https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20Me)](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.
+
+![image](https://raw.githubusercontent.com/caido-community/notebook/main/notebook_screenshot.png)
+
+## 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).

public/style.css

@@ -4,63 +4,85 @@
 
 #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) {
   width: auto;
   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;
-}
+}
+
+/* Center align utility */
+.center {
+  text-align: center;
+}

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 = `<span class="bold-brown">To add a note:</span><br>
   1. Supply input in the textarea located at the bottom and click the <span class="light-brown">Add Note</span> button.<br>
-  2. Click the <span class="light-brown">>_ Commands</span> button located at the topbar in the upper-right corner. Search/Select <span class="light-brown">Add Note to Notebook</span>. Supply input in the prompt and click <span class="light-brown">OK</span>.<br>
+  2. Highlight select text within a request/response pane and click the <span class="light-brown">>_ Commands</span> button located at the topbar in the upper-right corner. Search/Select <span class="light-brown">Add Note to Notebook</span>.<br>
   3. Highlight select text within a request/response pane and open the context menu by right-clicking. Hover over the <span class="light-brown">Plugins</span> item and select <span class="light-brown">Add Note to Notebook</span>.<br>
-  4. <span class="light-brown">CTRL+C</span> and <span class="light-brown">CTRL+V</span> within request and response panes is available as well but <span class="red">ensure to deselect the text and unfocus the pane to avoid needing to restart the Caido application.</span><br>***Copying within panes using <span class="light-brown">Copy</span> from the right-click context menu is functional as normal.***<br>
+  4. <span class="light-brown">CTRL+C</span> within request and response panes and <span class="light-brown">CTRL+V</span> into the textarea.<br>
+  <br>
+  <span class="bold-brown">To edit a note:</span><br>
+  1. Click inside the note column.<br>
+  2. Unfocus once done.<br>
+  <br>
+  <span class="bold-brown">To add a comment:</span><br>
+  1. Supply input in the textarea in the third column.<br>
+  2. Unfocus once done.<br>
   <br>
   <span class="bold-brown">To clear all notes:</span><br>
   <span class="bold-red">***This will reset the notes in storage. This action cannot be undone.***</span><br>
@@ -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) => {

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; }[];
 }