[GH-ISSUE #335] [Scripting] #1 Script List + Script Editor #336

New issue

Open

opened 2026-03-03 19:49:57 +03:00 by kerem · 2 comments

kerem commented

2026-03-03 19:49:57 +03:00

Owner

Originally created by @NghiaTranUIT on GitHub (Nov 21, 2023).
Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/335

Originally assigned to: @kics223w1 on GitHub.

Description

It's time to implement the Scripting feature. We're going to break it down into small feasible tickets.

Acceptance Criteria

Add menu with shortcuts

1. Script List Requirement

Implement the basic UI of the Scripting List. It's okay to copy and reuse what we've done from the Breakpoint List.

Able to create a new Script
Right-Menu Context: Implement the following: New, Edit, Enable Rule, Import Setting / Export Settings, Show in Finder, Duplicate, Delete.

Verify all menu context shortcuts works
Able to reorder the scripting -> Make sure it's saved in the Data Source

New: Create a default Script. Make sure the ScriptEntry and the ScriptFile are created.
Duplicate: Duplicate the ScriptEntry and the ScriptFile
Delete: Delete the ScriptEntry and the ScriptFile
Import / Export: (Reserve for the future ticket)

Originally created by @NghiaTranUIT on GitHub (Nov 21, 2023). Original GitHub issue: https://github.com/ProxymanApp/proxyman-windows-linux/issues/335 Originally assigned to: @kics223w1 on GitHub. ## Description It's time to implement the Scripting feature. We're going to break it down into small feasible tickets. ## Acceptance Criteria - [x] Add menu with shortcuts <img width="272" alt="Screenshot 2023-11-21 at 08 59 53" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/98f00781-f3f7-4808-9d1d-9cb125df53ac"> ## 1. Script List Requirement - [x] Implement the basic UI of the Scripting List. It's okay to copy and reuse what we've done from the Breakpoint List. ![1](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/8212a772-e90c-43f7-9fdc-e61736267656) - [x] Able to create a new Script - [x] Right-Menu Context: Implement the following: New, Edit, Enable Rule, Import Setting / Export Settings, Show in Finder, Duplicate, Delete. <img width="295" alt="Screenshot 2023-11-21 at 08 58 57" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/2b06b686-ac0c-4e8d-8539-76ec1cfa37d8"> - [x] Verify all menu context shortcuts works - [x] Able to reorder the scripting -> Make sure it's saved in the Data Source ### Menu Action Requirement - [x] New: Create a default Script. Make sure the ScriptEntry and the ScriptFile are created. - [x] Duplicate: Duplicate the ScriptEntry and the `ScriptFile` - [x] Delete: Delete the ScriptEntry and the `ScriptFile` - [x] Import / Export: (Reserve for the future ticket)

kerem added the

✅ Done

enhancement

labels

2026-03-03 19:49:57 +03:00

kerem commented

2026-03-03 19:49:58 +03:00

Author

Owner

@NghiaTranUIT commented on GitHub (Nov 21, 2023):

2. Scripting Models

Ping @NghiaTranUIT to get all Scripting models from the macOS
Implement the ScriptEntry and ScriptService classes to Typescript
Script Entries are stored at user-data/ScriptService-RuleTree
One ScriptEntry is created -> Make sure we create a ScriptFile with a default Template. This file is created and saved at ..//scripts/1C2FD611.js -> 1C2FD611 is a random UUID string.

/// This func is called if the Request Checkbox is Enabled. You can modify the Request Data here before the request hits to the server
/// e.g. Add/Update/Remove: host, scheme, port, path, headers, queries, comment, color and body (json, form, plain-text, base64 encoded string)
///
/// Use global object `sharedState` to share data between Requests/Response from different scripts (e.g. sharedState.data = "My-Data")
///
async function onRequest(context, url, request) {
  // console.log(request);
  console.log(url);

  // Update or Add new headers
  // request.headers["X-New-Headers"] = "My-Value";

  // Update or Add new queries
  // request.queries["name"] = "Proxyman";

  // Body
  // var body = request.body;
  // body["new-key"] = "new-value"
  // request.body = body;

  // Done
  return request;
}

/// This func is called if the Response Checkbox is Enabled. You can modify the Response Data here before it goes to the client
/// e.g. Add/Update/Remove: headers, statusCode, comment, color and body (json, plain-text, base64 encoded string)
///
async function onResponse(context, url, request, response) {
  // console.log(response);

  // Update or Add new headers
  // response.headers["Content-Type"] = "application/json";

  // Update status Code
  // response.statusCode = 500;

  // Update Body
  // var body = response.body;
  // body["new-key"] = "Proxyman";
  // response.body = body;

  // Or map a local file as a body
  // response.bodyFilePath = "~/Desktop/myfile.json"

  // Done
  return response;
}

Implement the Delete, Duplicate and create New Entry: Delete an entry will also delete a ScriptFile, Duplicate will also duplicate a new ScriptFile (new UUID).

@NghiaTranUIT commented on GitHub (Nov 21, 2023): ## 2. Scripting Models - [x] Ping @NghiaTranUIT to get all Scripting models from the macOS - [x] Implement the `ScriptEntry` and `ScriptService` classes to Typescript - [x] Script Entries are stored at `user-data/ScriptService-RuleTree` - [x] One ScriptEntry is created -> Make sure we create a ScriptFile with a default Template. This file is created and saved at `..//scripts/1C2FD611.js` -> `1C2FD611` is a random UUID string. ```js /// This func is called if the Request Checkbox is Enabled. You can modify the Request Data here before the request hits to the server /// e.g. Add/Update/Remove: host, scheme, port, path, headers, queries, comment, color and body (json, form, plain-text, base64 encoded string) /// /// Use global object `sharedState` to share data between Requests/Response from different scripts (e.g. sharedState.data = "My-Data") /// async function onRequest(context, url, request) { // console.log(request); console.log(url); // Update or Add new headers // request.headers["X-New-Headers"] = "My-Value"; // Update or Add new queries // request.queries["name"] = "Proxyman"; // Body // var body = request.body; // body["new-key"] = "new-value" // request.body = body; // Done return request; } /// This func is called if the Response Checkbox is Enabled. You can modify the Response Data here before it goes to the client /// e.g. Add/Update/Remove: headers, statusCode, comment, color and body (json, plain-text, base64 encoded string) /// async function onResponse(context, url, request, response) { // console.log(response); // Update or Add new headers // response.headers["Content-Type"] = "application/json"; // Update status Code // response.statusCode = 500; // Update Body // var body = response.body; // body["new-key"] = "Proxyman"; // response.body = body; // Or map a local file as a body // response.bodyFilePath = "~/Desktop/myfile.json" // Done return response; } ``` - [x] Implement the Delete, Duplicate and create New Entry: Delete an entry will also delete a ScriptFile, Duplicate will also duplicate a new ScriptFile (new UUID).

kerem commented

2026-03-03 19:49:58 +03:00

Author

Owner

@NghiaTranUIT commented on GitHub (Nov 21, 2023):

3. Script Editor

Implement the Script Editor view

Open a Script Editor as a New Tab (like Map Local). The Tab Title is the name of the Script
Reuse the Name, Rule, Method, Wildcard/Regex, GraphQL, ... from the Map Local
Two new checkboxes (onRequest and onResponse). Don't implement the Mock API
Implement the Editor by using the Monaco Editor (When introducing new logic into the Monaco Editor, make sure don't conflict with Map Local). Proxyman macOS is using the CodeEditor (legacy), but we plan to migrate to Monaco Editor

Behavior

The Script is not auto-saved by default
command+S (or Control + S) will save the Script -> Verify the content is written into the ScriptFile on disk
The Status Icon: 🟢 and 🟡 will update properly

4. Monaco Editor

Introduce a new mode for Monaco Editor for the Scripting
Define a list of new suggestions:
Basic suggestion: If the current curse is empty, it should suggest the basic suggestion depends on the current variables. For example: It suggests: request, response, context, url, console, console.log, delete, ... -> Everything from the Javascript mode
if it's from request, type . will suggest: method, scheme, host, port, path, queries, headers, body
if it's from response, type . will suggest: statusCode, statusPhrase, httpVersion, headers, body
if it's from context, type . will suggest: id, remoteDeviceIP, clientIPAddress, clientPort, serverIpAddress, serverPort

Implement the More Button: Beautify, Config and Documentation. Other features are not implemented in this ticket
I can use Control + B to beautify the Scritpt Content (Javascript Mode)

6. Console Log panel

Please open the ScriptEntry -> See how the ConsoleLog is implemented -> Implement it on TypeScript
Make sure the Console Log has many modes: userDebug, Debug, warning, Error, funcExecute, success, ...
Implement the Console Log Panel UI
As soon as the Log is updated -> Verify it's rendered on the ConsoleLog Panel.
Console Log is not saved into the JSON ScriptEntry. It will reset to empty if we quit the app.

@NghiaTranUIT commented on GitHub (Nov 21, 2023): ## 3. Script Editor - [x] Implement the Script Editor view ![CleanShot 2023-11-21 at 09 18 54@2x](https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/81c14e3b-66eb-4363-9626-fb13b09430cf) - [x] Open a Script Editor as a New Tab (like Map Local). The Tab Title is the name of the Script - [x] Reuse the Name, Rule, Method, Wildcard/Regex, GraphQL, ... from the Map Local - [x] Two new checkboxes (onRequest and onResponse). Don't implement the Mock API - [x] Implement the Editor by using the Monaco Editor (When introducing new logic into the Monaco Editor, make sure don't conflict with Map Local). Proxyman macOS is using the CodeEditor (legacy), but we plan to migrate to Monaco Editor ### Behavior - [x] The Script is not auto-saved by default - [x] command+S (or Control + S) will save the Script -> Verify the content is written into the ScriptFile on disk - [x] The Status Icon: 🟢 and 🟡 will update properly ## 4. Monaco Editor - [x] Introduce a new mode for Monaco Editor for the Scripting - [x] Define a list of new suggestions: - Basic suggestion: If the current curse is empty, it should suggest the basic suggestion depends on the current variables. For example: It suggests: request, response, context, url, console, console.log, delete, ... -> Everything from the Javascript mode - if it's from `request`, type `.` will suggest: method, scheme, host, port, path, queries, headers, body - if it's from `response`, type `.` will suggest: statusCode, statusPhrase, httpVersion, headers, body - if it's from `context`, type `.` will suggest: id, remoteDeviceIP, clientIPAddress, clientPort, serverIpAddress, serverPort ## 5. Menu Context - [x] Implement the More Button: Beautify, Config and Documentation. Other features are not implemented in this ticket - [x] I can use `Control + B` to beautify the Scritpt Content (Javascript Mode) <img width="328" alt="Screenshot 2023-11-21 at 09 21 29" src="https://github.com/ProxymanApp/proxyman-windows-linux/assets/5878421/16a1b811-6a63-43d3-b34f-c70151cffc81"> ## 6. Console Log panel - [x] Please open the ScriptEntry -> See how the ConsoleLog is implemented -> Implement it on TypeScript - [x] Make sure the Console Log has many modes: userDebug, Debug, warning, Error, funcExecute, success, ... - [x] Implement the Console Log Panel UI - [x] As soon as the Log is updated -> Verify it's rendered on the ConsoleLog Panel. - [x] Console Log is not saved into the JSON ScriptEntry. It will reset to empty if we quit the app.