Merge pull request #194 from psiinon/autodownload

Auto-download the script if stopped from the notification panel.

Author: thc202

CHANGELOG.md

@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 - Help screen
 
+### Changed
+- Auto-download the script if stopped from the notification panel.
+
 ## 0.0.15 - 2025-05-28
 
 ### Added

CHANGELOG.rec.md

@@ -8,6 +8,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 ### Added
 - Help screen
 
+### Changed
+- Auto-download the script if stopped from the notification panel.
+
 ## 0.0.3 - 2025-05-28
 
 ### Added

source/Background/index.ts

@@ -23,12 +23,13 @@ import {ReportedStorage} from '../types/ReportedModel';
 import {ZestScript, ZestScriptMessage} from '../types/zestScript/ZestScript';
 import {ZestStatementWindowClose} from '../types/zestScript/ZestStatement';
 import {
+  DOWNLOAD_RECORDING,
+  GET_ZEST_SCRIPT,
   IS_FULL_EXTENSION,
   LOCAL_STORAGE,
   REPORT_EVENT,
   REPORT_OBJECT,
   RESET_ZEST_SCRIPT,
-  SAVE_ZEST_SCRIPT,
   SESSION_STORAGE,
   SET_SAVE_SCRIPT_ENABLE,
   STOP_RECORDING,
@@ -172,6 +173,33 @@ function sendZestScriptToZAP(
   }
 }
 
+function downloadZestScript(zestScriptJSON: string, title: string): void {
+  const blob = new Blob([zestScriptJSON], {type: 'application/json'});
+  const url = URL.createObjectURL(blob);
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = title + (title.slice(-4) === '.zst' ? '' : '.zst');
+  link.style.display = 'none';
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+
+  URL.revokeObjectURL(url);
+}
+
+function pad(i: number): string {
+  return `${i}`.padStart(2, `0`);
+}
+
+function getDateString(): string {
+  const now = new Date();
+  return `${now.getFullYear()}-${pad(now.getMonth())}-${pad(
+    now.getDay()
+  )}-${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+}
+
 async function handleMessage(
   request: MessageEvent,
   zapurl: string,
@@ -229,7 +257,7 @@ async function handleMessage(
       break;
     }
 
-    case SAVE_ZEST_SCRIPT:
+    case GET_ZEST_SCRIPT:
       return zestScript.getZestScript();
 
     case RESET_ZEST_SCRIPT:
@@ -249,7 +277,17 @@ async function handleMessage(
       }
       break;
     }
-
+    case DOWNLOAD_RECORDING: {
+      zestScript.getZestScript().then((items) => {
+        const msg = items as ZestScriptMessage;
+        let site = '';
+        if (request.data) {
+          site = `${request.data}-`;
+        }
+        downloadZestScript(msg.script, `zap-rec-${site}${getDateString()}.zst`);
+      });
+      break;
+    }
     case SET_SAVE_SCRIPT_ENABLE:
       Browser.storage.sync.set({
         zapenablesavescript: zestScript.getZestStatementCount() > 0,

source/ContentScript/recorder.ts

@@ -30,7 +30,14 @@ import {
   ZestStatementSwitchToFrame,
 } from '../types/zestScript/ZestStatement';
 import {getPath} from './util';
-import {STOP_RECORDING, ZEST_SCRIPT} from '../utils/constants';
+import {
+  DOWNLOAD_RECORDING,
+  STOP_RECORDING,
+  ZEST_SCRIPT,
+} from '../utils/constants';
+
+const STOP_RECORDING_ID = 'ZAP-stop-recording-button';
+const STOP_RECORDING_TEXT = 'Stop and Download Recording';
 
 class Recorder {
   readonly timeAdjustmentMillis: number = 3000;
@@ -344,7 +351,16 @@ class Recorder {
   }
 
   initializationScript(loginUrl = ''): void {
-    Browser.storage.sync.set({initScript: false, loginUrl: ''});
+    Browser.storage.sync.set({
+      initScript: false,
+      loginUrl: '',
+      downloadScript: true,
+    });
+    const stopRecordingButton = document.getElementById(STOP_RECORDING_ID);
+    if (stopRecordingButton) {
+      // Can happen if recording restarted in browser launched from ZAP recorder
+      stopRecordingButton.textContent = STOP_RECORDING_TEXT;
+    }
 
     this.sendZestScriptToZAP(
       new ZestStatementComment(
@@ -445,6 +461,7 @@ class Recorder {
     textElement.textContent = 'ZAP Browser Extension is Recording...';
 
     const buttonElement = document.createElement('button');
+    buttonElement.id = STOP_RECORDING_ID;
     buttonElement.style.all = 'initial';
     buttonElement.className = 'ZapfloatingDivElements';
     buttonElement.style.marginTop = '10px';
@@ -457,10 +474,32 @@ class Recorder {
     buttonElement.style.cursor = 'pointer';
     buttonElement.style.fontFamily = 'Roboto';
     buttonElement.textContent = 'Stop Recording';
+    Browser.storage.sync
+      .get({
+        downloadScript: false,
+      })
+      .then((items) => {
+        if (items.downloadScript) {
+          buttonElement.textContent = STOP_RECORDING_TEXT;
+        }
+      });
 
     buttonElement.addEventListener('click', () => {
       this.stopRecordingUserInteractions();
       Browser.runtime.sendMessage({type: STOP_RECORDING});
+      Browser.storage.sync
+        .get({
+          downloadScript: false,
+        })
+        .then((items) => {
+          if (items.downloadScript) {
+            Browser.runtime.sendMessage({
+              type: DOWNLOAD_RECORDING,
+              data: window.location.hostname,
+            });
+            Browser.storage.sync.set({downloadScript: false});
+          }
+        });
     });
 
     floatingDiv.appendChild(textElement);

source/Popup/index.tsx

@@ -22,9 +22,9 @@ import './styles.scss';
 import i18n from './i18n';
 
 import {
+  GET_ZEST_SCRIPT,
   IS_FULL_EXTENSION,
   RESET_ZEST_SCRIPT,
-  SAVE_ZEST_SCRIPT,
   SET_SAVE_SCRIPT_ENABLE,
   STOP_RECORDING,
   UPDATE_TITLE,
@@ -220,7 +220,7 @@ async function handleSaveScript(): Promise<void> {
   if (storageItems.zaprecordingactive) {
     await Browser.runtime.sendMessage({type: STOP_RECORDING});
   }
-  Browser.runtime.sendMessage({type: SAVE_ZEST_SCRIPT}).then((items) => {
+  Browser.runtime.sendMessage({type: GET_ZEST_SCRIPT}).then((items) => {
     const msg = items as ZestScriptMessage;
     downloadZestScript(msg.script, msg.title);
   });

source/utils/constants.ts

@@ -41,9 +41,10 @@ export const ZAP_START_RECORDING = 'zapStartRecording';
 export const SET_SAVE_SCRIPT_ENABLE = 'setSaveScriptEnable';
 export const ZEST_SCRIPT = 'zestScript';
 
+export const DOWNLOAD_RECORDING = 'downloadRecording';
 export const STOP_RECORDING = 'stopRecording';
 export const RESET_ZEST_SCRIPT = 'resetZestScript';
-export const SAVE_ZEST_SCRIPT = 'saveZestScript';
+export const GET_ZEST_SCRIPT = 'getZestScript';
 export const UPDATE_TITLE = 'updateTitle';
 
 export const REPORT_EVENT = 'reportEvent';

views/help.html

@@ -13,6 +13,15 @@ <h2>Summary</h2>
     This extension allows you to record all of the actions you take in the browser as a Zest script. 
 	It can be used to record things like authentication scripts or other complex interactions.
 	Zest scripts can be replayed in ZAP, whether in the desktop or in automation.
+	<p>
+	When the extension is recording then a notification panel will be shown at the bottom of the page.
+	Clicking on the "Stop and Download Recording" button will stop the recording and automatically download the
+	recording using a filename based on the hostname of the current page and the current date / time.
+	<p>
+	You can also stop the recording via the extension dialog and then download the recording using a filename you specify.
+	<p>
+	If you are using the full ZAP extension and start recording in ZAP then the Zest script will be automatically updated in
+	the ZAP Script Console so you do not need to download it manually.
 
     <h2>Recorder Advice and Guidance</h2>
     If you are going to use the recorded script for authentication then you need to make sure that the browser
@@ -27,6 +36,9 @@ <h2>Recorder Advice and Guidance</h2>
     <p>
     It is often better to use private/incognito mode when recording so that the browser will not have any existing 
     application state.
+    <p>
+    The 'buttons' on some modern web apps can be complicated HTML components that are sometimes hard to click on using automation.
+    If your forms can be submitted using the RETURN key then that is often a better option to use when recording.
 
     <h2>Recorder Dialog</h2>
     Clicking on the ZAP Extension icon will display the Recorder Dialog.<br>
@@ -45,7 +57,10 @@ <h3>Login URL Field</h3>
 	the URL you have given and open it in a new tab.
 
     <h3>Script Name Field</h3>
-	The name of the script that the recorder will download.
+	The name of the script that the recorder will download from this dialog.
+	<p>
+	If you stop recording via the "Stop and Download Recording" button in the notification panel then the extension will
+	automatically download the recording using an auto-generated filename.
 
     <h3>Download Script Button</h3>
 	Clicking on this button will download any recorded script using the name in the above field.