Navigation-related listeners are not called after opening an embedded Web page

I made a Safari Web extension that's supposed to work like this:

• WHEN: Safari is opening http://example.com/
• THEN: The extension opens a page embedded in the extension instead.

This is the implementation of background.js:

browser.tabs.onUpdated.addListener(async function (tabId) {
    const tab = await browser.tabs.get(tabId);
    if (tab.url == "http://example.com/") {
        const destination = browser.runtime.getURL("embedded-page.html");
        browser.tabs.update(tabId, { url: destination });
    }
}, null);

This is the source project: https://www.icloud.com/iclouddrive/042qIjivEoJ0V3qIcLGcytAPA

When opening http://www.example.com/ for the first time, it successfully navigates to the embedded page. However, once that navigation is done, the extension no longer works that way unless I re-enable the extension. It's like the listeners are removed by that navigation.

This is the video of this issue: https://www.icloud.com/iclouddrive/0f9Yl1jC9eQ8OmgH8vAtEA6Pw

Can you replicate this on your Mac? And do you know what's the cause?

This happens for a listener of browser.webNavigation.onBeforeNavigate too. Maybe more.

On the other hand, when I set a normal page such as https://www.apple.com/ to destination, It always works fine for me. So I'm wondering if this issue is related to the embedded page.

FYI, I already reported this issue as FB9967637 on 27th March but no reply from Apple as of now.

My environment

• macOS Monterey 12.3.1 (21E258)
• Safari 15.4