Developing custom plugins for the Microsoft's Dev Proxy

This post is over a year old, some of this information may be out of date.

For a training project I was working on, I needed to be able to intercept some API calls for some audit logging. To do this, I decided to use Microsoft’s Dev Proxy tool, which you use to simulate, mock, and test APIs.

As the Dev Proxy did not have the functionality I needed out of the box, I decided to develop a custom plugin with the help of Waldek Mastykarz.

In this blog post, I will show you how you can develop custom plugins for the Dev Proxy.

Things you need to get started

Before you can start developing custom plugins for the Dev Proxy, you need to have the following tools installed:

.NET Core SDK
Visual Studio Code
C# Dev Kit Extension
The Dev Proxy Abstractions DLL

Setting up the project

Once you install all the prerequisites, you can start setting up the project.

Start creating the new project by running the following command in your terminal:

1
dotnet new classlib -n DevProxyCustomPlugin

Next, navigate to the newly created project folder:

1
cd DevProxyCustomPlugin

Open the project in Visual Studio Code
Add the Dev Proxy Abstractions DLL to the project
Open the DevProxyCustomPlugin.csproj file and add the following lines in the project group:

1
<ItemGroup>
2
  <Reference Include="dev-proxy-abstractions">
3
    <HintPath>.\dev-proxy-abstractions.dll</HintPath>
4
    <Private>false</Private>
5
    <ExcludeAssets>runtime</ExcludeAssets>
6
  </Reference>
7
</ItemGroup>

Add the required packages:

1
dotnet add package Microsoft.Extensions.Configuration
2
dotnet add package Microsoft.Extensions.Configuration.Binder
3
dotnet add package Titanium.Web.Proxy

Similar to the dev-proxy-abstractions.dll configuration, make sure to exclude the new packages’ assets by adding the ExcludeAssets property to the PackageReference element in the DevProxyCustomPlugin.csproj file:

1
<PackageReference Include="Microsoft.Extensions.Configuration" Version="6.0.0">
2
  <ExcludeAssets>runtime</ExcludeAssets>
3
</PackageReference>

Update the Class1.cs file with the name of your plugin class:

1
using Microsoft.DevProxy.Abstractions;
2
using Microsoft.Extensions.Configuration;
3

4
namespace DevProxyCustomPlugin;
5

6
public class RedirectCalls : BaseProxyPlugin
7
{
8
  public override string Name => nameof(RedirectCalls);
9

10
  public override void Register(IPluginEvents pluginEvents,
11
                                IProxyContext context,
12
                                ISet<UrlToWatch> urlsToWatch,
13
                                IConfigurationSection? configSection = null)
14
  {
15
    base.Register(pluginEvents, context, urlsToWatch, configSection);
16
  }
17
}

With this in place, you can start developing your custom plugin for the Dev Proxy.

Adding a before-request event handler

You can add a before-request event handler to the plugin to intercept the API calls. In the Register method, you can add the following code:

1
public override void Register(IPluginEvents pluginEvents,
2
                              IProxyContext context,
3
                              ISet<UrlToWatch> urlsToWatch,
4
                              IConfigurationSection? configSection = null)
5
{
6
  base.Register(pluginEvents, context, urlsToWatch, configSection);
7

8
  pluginEvents.BeforeRequest += OnBeforeRequest;
9
}

Create a new method, OnBeforeRequest to handle the event:

1
private void OnBeforeRequest(object sender, BeforeRequestEventArgs e)
2
{
3
  if (_urlsToWatch is null ||
4
    !e.HasRequestUrlMatch(_urlsToWatch))
5
  {
6
    // No match for the URL, so we don't need to do anything
7
    return Task.CompletedTask;
8
  }
9

10
  // Replace the following lines with your custom logic
11
  if (e.Session.HttpClient.Request.RequestUri.AbsoluteUri.Contains("https://frontmatter.codes"))
12
  {
13
    var url = e.Session.HttpClient.Request.RequestUri.AbsoluteUri;
14
    e.Session.HttpClient.Request.RequestUri = new Uri(url.Replace("https://frontmatter.codes", "http://localhost:3000"));
15
  }
16

17
  return Task.CompletedTask;
18
}

In this example, the OnBeforeRequest method checks if the request URL contains https://frontmatter.codes. If it does, it replaces the URL with http://localhost:3000. That way, I can test the API calls locally while developing the project.

Once you have added the OnBeforeRequest method’s code, you can build the plugin by running the following command in the terminal:

1
dotnet build

Testing the plugin

To test the plugin, add it to the Dev Proxy configuration. You can do this by adding the following lines to the devproxyrc.json file:

1
{
2
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.16.0/rc.schema.json",
3
  "plugins": [{
4
    "name": "RedirectCalls",
5
    "enabled": true,
6
    "pluginPath": "./bin/Debug/net8.0/DevProxyCustomPlugin.dll"
7
  }],
8
  "githubCopilotListener": {
9
    "logPath": "./logs"
10
  },
11
  "urlsToWatch": [
12
    "https://frontmatter.codes/api/*"
13
  ],
14
  "labelMode": "text",
15
  "logLevel": "debug",
16
  "newVersionNotification": "stable"
17
}

Start the Dev Proxy by running the following command in the terminal:

1
devproxy

Now, you can test the plugin by requesting the URL specified in the urlsToWatch configuration. In my example, when I call the https://frontmatter.codes/api/stars API, the request gets redirected to http://localhost:5000/api/stars, and I can see the response from my local API.

Adding some plugin configuration

To make the plugin more flexible, you can add some configuration options. For instance, you can define the root URL and the local URL to redirect the API calls to.

To do this, you can add the following configuration to the devproxyrc.json file:

1
{
2
  "$schema": "https://raw.githubusercontent.com/microsoft/dev-proxy/main/schemas/v0.15.0/rc.schema.json",
3
  "plugins": [{
4
    "name": "RedirectCalls",
5
    "enabled": true,
6
    "pluginPath": "./bin/Debug/net8.0/DevProxyCustomPlugin.dll",
7
    "configSection": "redirectCalls"
8
  }],
9
  "redirectCalls": {
10
    "fromUrl": "https://frontmatter.codes",
11
    "toUrl": "http://localhost:3000"
12
  },
13
  "urlsToWatch": [
14
    "https://frontmatter.codes/api/*"
15
  ],
16
  "labelMode": "text",
17
  "logLevel": "debug",
18
  "newVersionNotification": "stable"
19
}

In the RedirectCalls plugin sections, I added a configSection property with the value redirectCalls. This configuration allows me to access the plugin’s configuration.

In the redirectCalls section, I added the fromUrl and toUrl properties, which define the root URL and the local URL to which the API calls should be redirected.

To access the configuration in the plugin, you need to bind the configuration. The whole code for the plugin class should look like this:

1
using Microsoft.DevProxy.Abstractions;
2
using Microsoft.Extensions.Configuration;
3

4
namespace DevProxyCustomPlugin;
5

6
public class RedirectCallsConfiguration
7
{
8
  public string? FromUrl { get; set; }
9
  public string? ToUrl { get; set; }
10
}
11

12
public class RedirectCalls : BaseProxyPlugin
13
{
14
  public override string Name => nameof(RedirectCalls);
15
  private readonly RedirectCallsConfiguration _configuration = new();
16

17
  public override void Register(IPluginEvents pluginEvents,
18
                                IProxyContext context,
19
                                ISet<UrlToWatch> urlsToWatch,
20
                                IConfigurationSection? configSection = null)
21
  {
22
    base.Register(pluginEvents, context, urlsToWatch, configSection);
23

24
    configSection?.Bind(_configuration);
25

26
    pluginEvents.BeforeRequest += OnBeforeRequest;
27
  }
28

29
  private Task OnBeforeRequest(object sender, ProxyRequestArgs e)
30
  {
31
    if (_urlsToWatch is null ||
32
      !e.HasRequestUrlMatch(_urlsToWatch))
33
    {
34
      // No match for the URL, so we don't need to do anything
35
      return Task.CompletedTask;
36
    }
37

38
    var fromUrl = _configuration?.FromUrl ?? string.Empty;
39
    var toUrl = _configuration?.ToUrl ?? string.Empty;
40

41
    if (string.IsNullOrEmpty(fromUrl) || string.IsNullOrEmpty(toUrl))
42
    {
43
      return Task.CompletedTask;
44
    }
45

46
    if (e.Session.HttpClient.Request.RequestUri.AbsoluteUri.Contains(fromUrl))
47
    {
48
      var url = e.Session.HttpClient.Request.RequestUri.AbsoluteUri;
49
      e.Session.HttpClient.Request.RequestUri = new Uri(url.Replace(fromUrl, toUrl));
50
    }
51

52
    return Task.CompletedTask;
53
  }
54
}

With this configuration in place, you can test the plugin with the new configuration options.

The example above is available on my GitHub devproxy-redirect-plugin repository.

Conclusion

Developing custom plugins for Microsoft’s Dev Proxy is a great way to extend the tool’s functionality. With the help of the Dev Proxy Abstractions DLL, you can easily create custom plugins that can intercept API calls, modify requests and responses, and much more.

Developing custom plugins for the Microsoft's Dev Proxy

Things you need to get started

Setting up the project

Adding a before-request event handler

Testing the plugin

Adding some plugin configuration

Conclusion

Related articles

Using Dev Proxy in your GitHub Actions workflow on macOS

Using Dev Proxy in your GitHub Actions workflow on Ubuntu

Use Playwright with Microsoft Dev Proxy on GitHub Actions

Report issues or make changes on GitHub

Comments

Elio Struyf