How can I intercept only one endpoint of a domain for my browser API calls?

Question

Suppose I enter a (public) website that makes 3 XHR/fetch calls on 3 different endpoints:

• https://api.example.com/path1
• https://api.example.com/path2
• https://api.example.com/path3

What I want to achieve is intercept the call to https://api.example.com/path2 only, redirect it to a local service (localhost:8000) and let path1 and path3 through to the original domain.

What kind of options do I have here? I have studied a lot of approaches to this issue:

• DNS rewriting - this solution is not suitable as I still have to intercept path1 and path3, only redirect them to the original IPs and try to mimic the headers as much as possible - which means I would have to do a specific proxy configuration for each intercepted domain - this is unfeasible
• Chrome extensions - found none to deal specifically with single endpoint intercepting
• Overwriting both fetch and XmlHttpRequest after page load - still doesn't cover all scenarios, maybe some websites cache the values of fetch and XmlHttpRequest before page load (?)

Answer 1

Combining the chrome extension and fetch overwrite will work.

1. download an webextension that let you load javascript code before a given page loads, e.g. User JavaScript and CSS
2. Add the following script to run before your page loads, base on: Intercepting JavaScript Fetch API requests and responses

    const { fetch: originalFetch } = window;
    window.fetch = async (...args) => {
      let [resource, config ] = args;
    
      // request interceptor starts
      resource = resource === "https://api.example.com/path2" ? "http://localhost:8000/path2" : resource
      // request interceptor ends
    
      const response = await originalFetch(resource, config);
    
      // response interceptor here
      return response;
    };