User-defined tabs (similar to the "Comment" tab)

ACATTAN commented 4 months ago

Description

It would be nice if we could use javascript to write information to "user-defined tabs", similar to the way we write to the "comment" tab. For example something like this:

request.userDefinedTab["myTab"] = "hello world";

If this is too complex, then we could have pre-defined user-defined tabs with predefined names. For example "tab1", "tab2" up to "tab9". And then we would do something like:

request.tab1 = "hello world";

Why this feature/change is important?

This feature can be useful if we have a lot of javascript code that extracts information from requests or responses, analyzes it, formats it etc. Currently we write everything to the "comment" tab, but it becomes cumbersome and hard to read. Using custom tabs could be very helpful for separation - write different information to different tabs.

Thanks for considering it! Ariel

NghiaTranUIT commented 4 months ago

Thanks for your suggestion @ACATTAN. For now, this feature is not possible.

May I ask some questions:

Do you write JSON Body to the comment tab too? If yes, do you need a JSON syntax highlighting? For now, you can select all JSON Text -> Right Click -> View as -> JSON Prettier -> It will open a small window (auto prettify and syntax highlighting)
What kind of data do you write to the comment tab?

There is a tip for you:

When using the Scripting, write a piece of data to your headers. For example:
```
response.headers["x-my-user-id"] = "abcef"
```
Use Custom Header Column (documents) and create a new column with name x-my-user-id for the Response
✅ it will show this data on your new columns. Make sure to resize and reorder, so it's easier to read 👍

ACATTAN commented 3 months ago

Thank you for the quick response and the tips! To your questions - we make a lot of use of the comments tab. We write a lot of things to it which is derived from requests/responses, such as validation information like missing fields in requests or responses and many more. The reason I asked for additional "custom tabs" is because, for example, one of the JSON fields in a request we have contains a complete log formatted in a proprietary way. It is not JSON, it contains many acronyms, and needs to be decoded and blown into a full log that is readable to a human eye by translating various acronyms, rearranging it etc. We can write a piece of javascript code that decodes and reformats this log, but we would have to output it into the comments tab. This will be mixed with other information we already write to the comments tab and becomes too cumbersome. That's why we wished we would be able to write such information to a tab of its own. Btw since we're talking about a lot of information - adding a column (such as your suggestion of custom headers) is not suited for that; it needs an entire tab that you can open and see its content.

NghiaTranUIT commented 3 months ago

May I ask: How many users in your company have the same problem?

From what I remember, there were some users requested this similar feature: "Ability to write a custom preview on a new tab, by using the Script"

ACATTAN commented 3 months ago

We are about 15 users using Proxyman for almost two years now. We find Proxyman very powerful and flexible, and are making extensive use of it, including a lot of scripting. Unfortunately most of our company still uses Charles out of habit, but it means there's a lot of additional potential :-) I don't think it was one of us asking for the feature you mentioned, but it does sound somewhat similar.

NghiaTranUIT commented 3 months ago

and what is the current solution for users who use Charles Proxy for their work? 🤔

I will keep this ticket open, and see if there are more requests 👍

ACATTAN commented 3 months ago

Users using Charles are in other R&D groups. We hope that at some points they will "see the light" and move to Proxyman :-) Anyway I appreciate the fact that you are keeping this ticket open. I realize this is not an ordinary request. Thanks a lot, Ariel

elijahdou commented 4 weeks ago

@NghiaTranUIT We also have similar requirements. We want to support "user-defined tabs" similar to the "comment" tab or custom options to "text selection".

NghiaTranUIT commented 3 weeks ago

@elijahdou can you share your user case what you need for the "User-defined tabs"?

Why do you need it?
What data are you going to display?

I'd like to understand to make a better decision 👍

Brontojoris commented 2 weeks ago

I am also interested in using some form of User Defined Tabs/Custom Preview.

I am testing Adobe Analytics tracking from a mobile app.

The tracking calls are url encoded POST requests, and the built in Form preview does a pretty good job, but I'd love a way to process the data a bit more, ideally reformatting into a JSON Treeview, removing some unnecessary fields, renaming others.

I'm already using the scripting feature to write some fields like app version, page name, action name, etc in the request to custom headers. Example. proxyman example Or could this be achieved using addons?

NghiaTranUIT commented 2 weeks ago

Thanks @Brontojoris for your insight 👍

Do you think that If I provide:

const myJSONString = "<My JSON String>"
request.userDefinedTab["myTab"] = myJSONString;

could solve your problem?

userDefinedTab["myTab"] only accepts a String, so you can craft any string that you need to display. It also automatically prettifies the JSON if the data is a JSON String.

Brontojoris commented 2 weeks ago

Yeah that would work for me.

NghiaTranUIT commented 1 week ago

@Brontojoris @elijahdou @ACATTAN good news 🎉

What's news:

Beta build: https://download.proxyman.io/beta/Proxyman_5.5.0_Support_Custom_Tab_with_scripting_v2.dmg
Able to create a new custom tab with a given name
Use Scripting to add data to this tab.
Support Request and Response Panel
Support String or JSON String (auto-prettify)

How to use

Click on the + button on the Request / Response Tab to open the Custom Previewer windows
Click on the Add custom tab button
Enter name
Proxyman will show how to use it with Javascript Code

Create a new script -> Add this code


// String
request.customPreviewerTabs["body"] = "My String";

// JSON const obj = {"name": "Proxyman"}; request.customPreviewerTabs["body"] = JSON.stringify(obj, null, 2);


7. Done. New tab will show your data

### Screenshots
![1](https://github.com/ProxymanApp/Proxyman/assets/5878421/24d2901d-10e3-4fa0-a472-579df7385358)
![Screenshot 2024-06-26 at 1 18 31 PM](https://github.com/ProxymanApp/Proxyman/assets/5878421/1a336092-5c50-4e23-afbb-9a41f9679bb9)
![Screenshot 2024-06-26 at 1 19 13 PM](https://github.com/ProxymanApp/Proxyman/assets/5878421/dc7e6346-9ac6-4601-b07a-8294de2c4a02)
![CleanShot 2024-06-26 at 1  17 49@2x](https://github.com/ProxymanApp/Proxyman/assets/5878421/d5eaca51-9243-4a78-9245-06effefee6ab)

ACATTAN commented 1 week ago

That is awesome!

ACATTAN commented 1 week ago

Btw, is it possible to also add the option to filter by some string inside a custom tab, like we can now search in the "comment" tab? Or is it asking for too much? :-)