Google Chrome Extension - DOM Manipulation Not Working After Page Refresh

Question

I have this very simple Google Chrome extension that manipulates any anchor tag element with has value callto. The problem is it is working only at the initial load of extension but once I refreshed the page it is not working anymore. Please watch this video regarding the behavior of the issue.

In my Content.Js below is my code.

function SoftPhone() { 
    const links = document.querySelectorAll('[href^=callto]');

    links.forEach(link => {

        link.getAttribute("href");
        link.setAttribute("href",
            "https://app.callrail.com/lead-center");
        link.textContent = "Call with SoftPhone";
    });
}

window.addEventListener('load', SoftPhone);

Here's my manifest file, very basic.

{
"manifest_version" : 2,
"name": "SoftPhone",
"version": "1.0.0",
"content_scripts" : [
    {
    "matches": ["<all_urls>"],
    "js": ["Content.js"]
    }
    
    ]
}

I'm using it on Podio.com for their standard phone field element below.

<a href="callto:3213211234" data-reactid=".b.0.2.$0.$callto.0">
  <span class="phone-field-component__icon phone-field-component__icon-phone" data-reactid=".b.0.2.$0.$callto.0.0"></span>
  <span data-reactid=".b.0.2.$0.$callto.0.1">Call</span>
</a>

To test it, you may login using free account I setup below in Podio.com

Username: marlontc18@gmail.com Password: Marlz2022!

Then access this item - https://podio.com/marlz/project-management/apps/contacts-2/items/1

and look for Phone Number field