Declarative net request rule.json is not working

Question

I'm trying to block a website with a chrome extension that uses the new declarative net request API for Manifest V3, but it isn't working. I have added the permission in the manifest and made sure to add the priority, id, action and conditions, but it still doesn't do anything at all. I am trying to modify the response headers. Here is the applicable part of my manifest.

Manifest.json

"background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css": ["base.css"],
      "js": [
        "jquery-1.10.2.js",
        "inboxsdk.js",
        "loader.js"
      ]
    },
    {
      "matches": [
        "https://mail.google.com/*",
        "https://localhost:1234/*",
        "http://localhost:1234/*",
        "http://localhost:5000/*"
      ],
      "js": [
        "version.js"
      ]
    }
  ],
  "host_permissions": [
    "*://*.google.com/*",
    "*://*.googleusercontent.com/*",
    "https://localhost:1234/*",
    "http://localhost:1234/*",
    "http://localhost:5000/*"
  ],
  "web_accessible_resources": [{
    "resources": [
      "icon128.png",
      "logo-pink.svg",
      "logo-white.png",
      "logo.png"
    ],
    "matches": [
      "https://mail.google.com/*",
      "https://localhost:1234/*",
      "http://localhost:1234/*",
      "http://localhost:5000/*"
    ]
  }],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  },
  "permissions": [
    "scripting",
    "declarativeNetRequest",
    "declarativeNetRequestWithHostAccess",
    "declarativeNetRequestFeedback"
  ],
  "manifest_version": 3
}

rules.json

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "script-src",
          "operation": "set",
          "value": "script-src https://localhost:7000"
        }
      ]
    },
    "condition": {
      "regexFilter": "/content-security-policy/i",
      "resourceTypes": [
        "main_frame",
        "sub_frame",
        "script",
        "object",
        "xmlhttprequest",
        "csp_report"
      ]
    }
  }
]

Is there any Idea how to test whether the headers are being modified or not

Answer 1

There are several problems.

1. regexFilter doesn't support JS RegExp literal syntax.

   Solution: Remove / and the i flag.

2. regexFilter is for the URL of the request, not for a header name. Currently there's no way to match requests by checking a header.

   Solution: Remove regexFilter or use a valid expression for the URL or use other types of conditions like urlFilter or requestDomains, see the documentation.

3. "header": "script-src" should be "header": "content-security-policy"

Example:

[{
  "id": 1,
  "action": {
    "type": "modifyHeaders",
    "responseHeaders": [{
      "header": "content-security-policy",
      "operation": "set",
      "value": "script-src https://localhost:7000"
    }]
  },
  "condition": {
    "requestDomains": ["example.com"],
    "resourceTypes": ["main_frame", "sub_frame"]
  }
}]

P.S. To change script-src it's sufficient to process main_frame and sub_frame types.