How do I intercept an API call and display data from it using a UserScript?

Question

There's a webapp that makes a request (let's call it /api/item). This request returns a json body with a field called itemData which is normally hidden from the user, but I want to make that shown.

So how do I make a userscript that listens for the request at /api/item and displays the itemData field?

For reference the way the webapp is making the request is:

return Promise.resolve(new Request(e,r)).then(sendCookies).then(addLangParam).then(addCacheParam).then(addXsrfKey).then(checkZeroRating).then(function(e) {
            return fetch(e)
        }).then(checkStatus).then(checkApiVersionMismatch).then(checkApiResponse)

Most of that is irrelevant, but the important part is Request (I think).

Answer 1

This webapp is not using XMLHttpRequest, but the Fetch API.

You can use the fetch-intercept npm module to intercept fetch requests. Example code:

import fetchIntercept from 'fetch-intercept'

fetchIntercept.register({
  response(response) {
    console.log(response)
    return response
  }
})