Why does a rule added and immediately removed with declarativeNetRequest.updateDynamicRules not get removed even after the extension is reloaded?

Question

I am trying to write an extension in Manifest Version 3, where I want to modify cookie headers for certain requests. Since the rule will only be applied to specific requests that meets my conditions,

I thought of adding a dynamic rule temporarily for that request, modify the cookie header, and immediately remove it. Here's the function for that rule.

if (condition) {
 function makeNewRule(url) {
    chrome.declarativeNetRequest.updateDynamicRules(
        { 
            addRules:
            [
                {
                    "id": 1000,
                    "priority": 100,
                    
                    "action": {
                        "type": "modifyHeaders",
                        "requestHeaders": [
                            {
                            "header": "cookie",
                            "operation": "set",
                            "value": "Modified cookie value 1"
                            }
                        ]
                    },
                
                    "condition": {
                        "urlFilter" : url,
                        "resourceTypes": 
                         ["csp_report", "font", "image", 
                            "main_frame", "media", "object", 
                            "other", "ping", "script", 
                            "stylesheet", "sub_frame", 
                            "webbundle", "websocket", 
                            "webtransport"]
                    }
                }
            ],

            removeRuleIds: [1000],

        });
    
 }
}

While this works for all requests that meet my condition, and the cookies are being modified observed in the chrome developers tool network window, the rule persists for a later session, even if I reload/update the unpacked extension. If I change the value of the cookie header to ""Modified cookie value 2", the developers tools still shows the previous "Modified cookie value 1". Therefore, I am assuming that the rule that I added is not being removed, and it is persisting across browser sessions. I tried cleaning the cache and reloading the browser. Additionally,

chrome.declarativeNetRequest.getDynamicRules(
    e => console.log(e)
);

The snippet above shows the existence of the rule even when removed. How do I remove the rule that I added dynamically within that session?

Answer 1

I update my dynamic rules by removing and then adding them, I'll share my code with you, I hope it helps.

To update rules

function UpdateIntercept(token: string) {
    chrome.declarativeNetRequest.updateDynamicRules({
        removeRuleIds: GetInterceptRules(token).map((rule) => rule.id), // remove existing rules
        addRules: GetInterceptRules(token)

    });
    chrome.declarativeNetRequest.getDynamicRules(
        e => console.log(e)
    );
}

then when I intercept the url

function GetInterceptRules(token: string) {
    const allResourceTypes =
        Object.values(chrome.declarativeNetRequest.ResourceType);

    return [
        {
            id: 1,
            priority: 1,
            action: {
                type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
                requestHeaders: [
                    {
                        operation: chrome.declarativeNetRequest.HeaderOperation.SET,
                        header: 'Authorization',
                        value: 'Bearer ' + token,
                    },
                ]
            },
            condition: {
                urlFilter: liveApiUrl,
                initiatorDomains: ["mail.google.com"],
                resourceTypes: allResourceTypes,
            }
        },
        {
            id: 2,
            priority: 1,
            action: {
                type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
                requestHeaders: [
                    {
                        operation: chrome.declarativeNetRequest.HeaderOperation.SET,
                        header: 'Authorization',
                        value: 'Bearer ' + token,
                    },
                ]
            },
            condition: {
                urlFilter: testApiUrl,
                initiatorDomains: ["mail.google.com"],
                resourceTypes: allResourceTypes,
            }
        }
    ];
}

To intercept the url you want

function interceptURL(requestDetails: chrome.webRequest.WebRequestBodyDetails) {
    console.log('intercepted: ' + requestDetails.url);
    if (requestDetails.url.includes(liveApiUrl) || requestDetails.url.includes(testApiUrl)) { //maybe the inclue
        chrome.runtime.sendMessage({ "message": "refresh_token" }, (token: string) => {
            console.log('refreshed token: ' + token)
            if (token == undefined) {
                chrome.runtime.sendMessage({ "message": "get_token" });
            }
        });
    }
}

I use onBeforeRequest

chrome.webRequest.onBeforeRequest.addListener(
    interceptURL,
    { urls: [liveApiUrl, testApiUrl] }
)

In my case, I need to pass a refresh token everytime I intercept that url still have a couple of things to work on, but hopefully it gives you some direction.