fet-block

Hook the request in a web page, and replace the url to another domain. When the request is xmlHttpRequest, it can transform the request to another domain or another request tunnel.

All above are done by just one config file.

docs

link: https://www.cuiyongjian.com/docs-fetblock/

usage

install the npm package in your project

npm install fet-block

import it in your project entry file, as early as possible

import { init } from 'fet-block'
// start fetBlock
init()

You should use you own config url in prodution environment. So you should pass a config url to fetBlock:

import { init } from 'fet-block'
// start fetBlock
init({
    configUrl: 'https://yourdomain.com/config.json'
})

And now your project is ready to go!

Or you can use it with cdn link:

<script src="https://www.unpkg.com/browse/[email protected]/dist/[email protected]"></script>

config

If you want to replace a url domain to another domain, you can config your domain to another domain

// config.json
{
  "en": {
    "img.mydemo.com": "bak.img.mydemo.com",
    "api.mydemo.com": "bak.api.mydemo.com"
  }
}

And if you want to use a special tunnel to send a request( eg: jsbridge), you can config the tunnel api name in your project file like:

{
  "zh": {
    "img.mydemo.com": "sendRequestByJsBridge",
    "api.mydemo.com": "sendRequestByJsBridge"
  }
}

Like this, when the page send a request with img.mydemo.com domain, it will be replace to use the jsbridge api sendRequestByJsBridge to send. It is simple!

All of it occur under the mocked XmlHttpRequest hood.

develop

If you want to develop fetBlock, you can clone this repo and run npm install to install the dependencies. Then run npm run dev to start the dev server.

Then you can install a proxy tool whistle and config it :

npm  install whistle -g

Config the whistle, first, create a rule like this:

www.mydemo.com http://localhost:52000
www.mydemo.com resHeaders://{corsjson}

img.mydemo.com http://localhost:52000
img.mydemo.com resHeaders://{corsjson}

api.mydemo.com http://localhost:52000
api.mydemo.com resHeaders://{corsjson}

bak.img.mydemo.com http://localhost:52000
bak.img.mydemo.com resHeaders://{corsjson}

bak.api.mydemo.com http://localhost:52000
bak.api.mydemo.com resHeaders://{corsjson}

And create a value for the corsjson like this:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,POST,OPTIONS,PUT
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1

Then, you should config your chrome swichOmega plugin to use the whistle proxy.

Finally, You can visit https://www.mydemo.com to see the demo page, and change the code in src folder, and it will audo build the dist.