Manifest V3 DeclarativeNetRequest: modify headers rule is not taking effect without a tab reload

Question

I am migrating a chrome extension from V2 to V3. However WebRequestBlocking is being deprecated in V3, so to intercept and modify outgoing request headers I have to use DeclarativeNetRequest. The rules are supposed to intercept all outgoing network requests after filling up and submitting a form. After filling the form the url is also modified to navigate to that page, but the headers are not being added unless a tab reload is forced to happen.

I have tried to apply the rules based on a listener on tab being updated, from chrome.tabs.onUpdated. I have also tried adding the listener to chrome.webNavigation.onBeforeNavigate and chrome.webRequest.onBeforeSendHeaders. But none of these solutions have applied the rules without a tab reload.

This is the V3 code for backgroud.ts that I am using to trigger the action when the form is submitted.

// Handle submission of new data
chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {

const tabId = sender?.tab?.id ?? message.tabId;
const tab = await chrome.tabs.get(tabId!);

switch (message.type) {
    case 'submit':
        const options = await getOptions();
        
        newUrl.searchParams.set('value', message.value);

        // If the new Url would be the same as the old URL, don't update the tab
        if (newUrl.toString() === tab.url) {
            return;
        }
        chrome.tabs.update(tabId, {url: newUrl.toString()}, (r) => {
            console.log('updated tab', r);
        });
        break;
    case 'log':
        console.log(`${message.message}:`, message);
        break;
}
});

chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
console.log('On Tab Updated');
if (tab.status !== 'loading') {
    return;
}
// Get the declarative net request rules for this session
const allRules = await chrome.declarativeNetRequest.getSessionRules();

// Get the current rules for this tab
const currentRulesForTab = allRules.filter((rule) => {
    return rule.condition?.tabIds?.includes(tabId);
});

if (
    condition
) {
    const newRulesForTab = await getRules();

    if (!currentRulesForTab.length) { 
        await chrome.tabs.sendMessage(tabId, {
            type: 'log',
            message: 'Initializing session rules for this tab',
            rules: newRulesForTab
        });
        await chrome.declarativeNetRequest.updateSessionRules({
            addRules: newRulesForTab
        });
        // Reload this tab again
        await chrome.tabs.reload(tabId);
    } else { 
        if (currentRules !== newRules) {
            // Send chrome message to this tab to log that the tab is being updated
            await chrome.tabs.sendMessage(tabId, {
                type: 'log',
                message: 'Updating session rules for this tab',
                rules: newRulesForTab
            });
            await chrome.declarativeNetRequest.updateSessionRules({
                removeRuleIds: currentRulesForTab.map((rule) => rule.id),
                addRules: newRulesForTab
            });
            // Reload this tab again
            await chrome.tabs.reload(tabId);
        }
    }
} else { 
    if (currentRulesForTab.length) {
        // Send chrome message to this tab to log that the tab is being updated
        await chrome.tabs.sendMessage(tabId, {
            type: 'log',
            message: 'Removing session rules for this tab',
            rules: currentRulesForTab
        });
        await chrome.declarativeNetRequest.updateSessionRules({
            removeRuleIds: currentRulesForTab.map((rule) => rule.id)
        });
        // Reload this tab again
        await chrome.tabs.reload(tabId);
    }
}
});