What's the right setting to prefix the request in chrome extension?

For years, I usually struggled at proxy and redirect thing, and it comes when I trying to make a chrome extension.

Now I'm making a manifest v3 extension with "chrome.declarativeNetRequest", instead of using "chrome.webRequest" which will no longer there soon.

And I'll try to make a Dynamic rediect with URL path later

But no luck even static rule, it proxy all the websites, not only the domain I declared in code.
Result should be

GET https://www.dmm.com/things
into
GET https://kcwiki.github.io/cache/things

in the end. But what's my misunderstanding ?

here's the code

{
    "manifest_version": 3,
    "name": "Dynamic Declarative Redirect Extension",
    "version": "1.0",
    "permissions": [
        "declarativeNetRequest"
    ],
    "host_permissions": [
        "file:///*",
        "*://*.dmm.com/*"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "web_accessible_resources": [
        {
            "resources": [
                "*/*"
            ],
            "matches": [
                "*://www.dmm.com/*",
                "*://osapi.dmm.com/*",
                "*://kcwiki.github.io/*"
            ]
        }
    ]
}

const initialRules = [
    {
        id: 1,
        priority: 1,
        action: {
            type: 'redirect',
            redirect: {
                url: 'https://kcwiki.github.io/cache'
            }
        },
        condition: {
            urlFilter: '*://test.example.com/*',
            resourceTypes: ["main_frame"]
        }
    }
];
chrome.runtime.onInstalled.addListener(async () => {
    // Get arrays containing new and old rules
    const oldRules = await chrome.declarativeNetRequest.getDynamicRules();
    const oldRuleIds = oldRules.map(rule => rule.id);

    await chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: oldRuleIds
    }, async () => {
        await chrome.declarativeNetRequest.updateDynamicRules({
            addRules: initialRules
        }, () => {
            console.log("Rule Set")
        });
    });
})

The Answer code sample and mark up my fault.

1. When redirecting, your "host_permissions" must include both the source and the target site.
2. To change parts of a URL use regexFilter + regexSubstitution.
3. To avoid an installation warning "This extension can block any URL" use "declarativeNetRequestWithHostAccess" instead of "declarativeNetRequest" in "permissions"

// manifest.json

  "permissions": ["declarativeNetRequestWithHostAccess"],
  "host_permissions": ["file:///*", "*://*.dmm.com/", "https://kcwiki.github.io/"],

// background.js

const initialRules = [{
  id: 1,
  action: {
    type: 'redirect',
    redirect: {
      regexSubstitution: 'https://kcwiki.github.io/cache/\\1',
    },
  },
  condition: {
    requestDomains: ['www.dmm.com'],
    regexFilter: '^https?://www\\.dmm\\.com/(.*)',
    resourceTypes: ['main_frame'],
  },
}];