中文 | English

Easy Interceptor is a Chrome extension that intercepts HTTP requests in the form of XMLHttpRequest data requests. It intercepts and modifs data by overwriting the Response and responseText fields. It is mainly used for debugging Web pages.

• Manual
• How to use

Imagine that it is obviously to verify a very simple thing, but the preconditions for the recurrence of this problem are too difficult to complete, causing pain. The difficulty may be:

• The working process is too long (not familiar with the process or do not want to go through it again)
• The test environment to be verified cannot be solved through front-end hard coding
• It is difficult to modify the database (without conditions, will not change, or does not want to bother the back-end)
• Do not want to use the agent software (unnecessary, unused, or difficult to install and configure)

How to solve the above problems? If you can intercept and modify the data before the client receives it, you can achieve the goal. Easy Interceptor makes use of the above ideas. It can intercept http requests in XMLHttpRequest and fetch data requests, and modify data by overwriting the response and responseText fields. As a chrome extension, it is naturally integrated in the user test environment, so the mental burden on users is minimal.

• xhr: a fake XMLHttpRequest is implemented

• fetch: a fake fetch is implemented

Notice:

The extension is only valid for content type: json type. Please close the extension when do not use

If you are skilled and have a perfect agent environment, you don't need to use it

If you use the cdn version, make sure you can access https://unpkg.com. The first load will be slow. Or use the local version directly

• Free advertising free promotion, better user interaction, and dark mode
• Provide monitoring of current requests (omit the trouble of manual filling)
• Import/export, project serialization - has certain js programming ability, can dynamically process data, and can print and output information
• Integrated monaco editor for more convenient text editing and processing
• Use cdn to greatly reduce the installation package (only cdn version)
• Support modifying response headers, actively sending requests, and modifying request parameters (params, headers, body)
• Fake mode, which is used to adapt to different scenarios (it is closed by default and may fail in some scenarios)
• Support multiple workspaces

• gray: Closed（The number corner shows how many pieces of data are in the current list）
• orange: Watching（The number corner shows how many pieces of data are in the current list）
• purple: Intercepting（The digital corner shows how many pieces of data are intercepted in the current list）
• black: Intercepting-Fake Mode（The digital corner shows how many pieces of data are intercepted in the current list）

• [Add]: add a datum
• [Remove]: remove a datum
• [Export, Import]: serialize project
• [Refresh]: refresh, will reset count field
• [Switch Theme]: light | dark
• [Fake Mode]: turn on fake mode, default turn off, Only intercept requests, relying on back-end services; When enabled, a simulated object will be used, which can be independent of back-end services

• [Close]: close this extension
• [Watching]: watching fetch（just work on Content-Type is json）
• [Intercepting]: custome responseText

• [Setting]: Setting
• [Work Space]: Switch work space
• [Run At]: four options can be choose. start (js injected will be work)，end (DOMContentLoaded)，delay (delay some times)，trigger (match a url)，override (window.XMLHttpRequest or window.fetch was override)
• [Ban Type]: Ban type, xhr or fetch
• [Quota]: Percent of quota

call hooks function to modify data, support there hooks

• onMatching
• onResponding
• onResponseHeaders
• onRequestHeaders
• onRedirect

onRedirect((rule: Rule) => {
    return Math.random() > 0.5 ? 'http://foo.com' : 'http://bar.com'
})

onMatching((rule: Rule) => {
    // shallow merge
    return {
        delay: 1000
    }
})

onResponding((context: Context) => {
    // shallow merge
    return {
        status: 504
    }
})

declare interface Rule {
    count?: number
    delay?: number
    url?: string
    description?: string
    test: string
    type?: 'xhr' | 'fetch'
    method?: 'get' | 'post' | 'delete' | 'put' | 'patch'
    body?: any
    params?: [string, string][]
    requestHeaders?: Record<string, string>
    status?: number
    response?: any
    responseText?: string
    responseHeaders?: Record<string, string>
    redirectUrl?: string
}
interface Context {
    xhr?: XMLHttpRequest
    response?: Response
    rule: Rule
}
declare function onResponseHeaders(fn: (headers: Record<string, string>) => Record<string, string> | void): void
declare function onRequestHeaders(fn: (headers: Record<string, string>) => Record<string, string> | void): void
declare function onRedirect(fn: (rule: Rule) => string | void): void
declare function onMatching(fn: (rule: Rule) => MatchingRule | void): void
declare function onResponding(fn: (context: Context) => ResponseRule | void): void
interface ResponseRule {
    response?: any
    responseText?: string
    status?: number
}
interface MatchingRule extends ResponseRule {
    delay?: number
    responseHeaders?: Record<string, string>
}

It can help you quickly fill in the interface information to be intercepted, and then re request the interface

Select the interception mode, tick the interface to be intercepted, and then re request the interface

The extension provides the function of testing the back-end interface. You can understand it as a simple postman. Since the extension side does not have the problem of cross domain, no proxy is required, and the corresponding request header can be set.

The dev environment page is loaded faster, The script has not been injected yet but the request has been finished. You can appropriately delay the request

perharps cached data, you can disable cache from network panel in devtool

It is recommended to use the cdn version (ensure access to https://unpkg.com). The offline version with local is more suitable for LAN users

This is due to browser restrictions. The maximum support for the form of popup is 800x600. The advantage of this form is that it does not affect the project itself as much as possible (the disadvantage is that the page will be reloaded every time, so the extension does a lot of serialization to ensure a better user interaction)

There are two ways to deal with some scenarios:

-If a single piece of data is relatively large and the number of fields to be changed is relatively small, you can modify the real data through js in the code panel to achieve the modification effect -Use the redirectUrl option

Here, for the convenience of writing programs, y=f(x)=log2(x), an equal difference number sequence 18, 20, 22 with a tolerance of 2 is taken; That is, 2^18=262144, and these values are also appropriate.

At first, it was intended to solve the problem of the recurrence of some scenarios in the self-test phase (the modern project of front-end and back-end interactions are basically of the json type). Some agent software had strong functions, but I didn't like too much configuration, and the use environment should be as single as possible.

AGPL