During development, often times front-end devs have to wait for the back-end devs to offer an API to work on. Even after the API is given, if the front-end team wants a different set of data to work on, they again need to wait for the changes to be made and hosted. We, front-end developers resort to techniques like storing the data in a variable or using mock API’s.
To overcome this, we are working on a browser extension
Interceptor, which lets you define your own response, and everytime the browser requests data from a particular URL, returns you with mock data instead of, from the server.
Interceptor in action
Let’s say we are developing a simple web-app which tries to autocomplete the name of the countries that we are typing - We would code it as such. An
'onkeyup' eventListener is added to the
input element and everytime we type a character, an
XHR is fired to https://restcountries.eu to query for all the country names that contain the typed characters. The server returns an array of objects that contain the names of the countries. We further loop through this array and create an
HTML string that is appended to the parent
Listening to requests
If you go to the full-screen mode for the above jsbin, open up
Interceptor, start listening to requests by clicking the
START LISTENING button, and type any letter, then
Interceptor would list all the requests that we sent to
restcountries.eu API. Since we are making a request on
'onkeyup' event, the number of requests fired would be equal to the number of characters typed. The screenshot below shows the list of requests made when
IN is typed in. The number of requests made are displayed in a small badge as seen. The blue coloured badge-icon signifies that the interception mode is
ON which means that
Interceptor would return mock data for all the intercepted requests. On toggling the intercept-mode to
OFF state, the bagde-icon turns
red and all requests will query the backend server instead of being intercepted by the extension.
Suppose one wants to display just one name
Afghanistan when the character
a is typed as opposed to many countries whose name starts with the letter
A gif below demonstrates how one can intercept the corresponding request and change its response for the above use case.
This README describes all the available features of the extension. We currently support Chrome and Firefox browsers.
Interceptor is an open-source project. The github repo can be found here. You can find all the releases here. Please feel free to contribute to the project - Create/review PR’s. Do report issues if you find any.