Request Rules

JSON files inside app/request-rules can modify or block the network request. The below rule block the network request if the URL contains developer.mozilla.org.

{
  "$schema": "https://supex.dev/schemas/request-rules/0.0.1.json",
  "rules": [
    {
      "action": {
        "type": "block"
      },
      "condition": { 
        "urlFilter": "developer.mozilla.org" 
      }
    } 
  ],
  "enabled": true
}

Note: To block or modify network request, we need declarativeNetRequest or declarativeNetRequestWithHostAccess permission. Please learn more here.

{
  "permissions": {
    "required": ["declarativeNetRequest"]
  },
}

Now, if you try to visit https://developer.mozilla.org, it will fail.

rules

Each network rules is defined by three fields:

• action: The action to take when the rule is matched.
• condition: The condition under which this rule is triggered.
• priority: The priority of the rule which should be >= 1. Learn more about matching precedents here.

enabled

A boolean value indicates whether the rule should be enabled by default.

Enable or disable rules on runtime

Network rules can be enabled or disabled at runtime. From the above block-mozilla code, we change the enabled to false.

{
  "$schema": "https://supex.dev/schemas/request-rules/0.0.1.json",
  "rules": [
    {
      "action": {
        "type": "block"
      },
      "condition": { 
        "urlFilter": "developer.mozilla.org" 
      }
    } 
  ],
  "enabled": false
}

If you visit https://developer.mozilla.org, it will work since the rule is disabled. We can enable the rule by using declarativeNetRequest.updateEnabledRulesets.

...

const enableMozillaRule = () => {
  declarativeNetRequest.updateEnabledRulesets({ enableRulesetIds: ['block-mozilla'] });
};

function Action() {
  return <div onClick={enableMozillaRule}>Enable Network Rule</div>
}

...

After you click the Enable Network Rule from action popup, the https://developer.mozilla.org will be blocked.

Note: For enableRulesetIds & disableRulesetIds of updateEnabledRulesets method, please use the filename of the request rules. In the above example, we used block-mozilla which is the filename of the network rule.