How to share variables between JS scripts in a chrome extension

Question

Suppose the following situation :

In a chrome extension, I have 1 popup.html, in which a scirpt runs, popup.js like so :

<div class="container">
        <h2 class="title">Hello World</h2>
        <button id="button">
            <div class="btnText">UNLOCK</div>
        </button>
        <script src="popup.js" charset="utf-8"></script>
</div>

With the following popup.js:

document.addEventListener("DOMContentLoaded", function () {
        document.querySelector("button").addEventListener("click", onclick, false)
        function onclick () {
            chrome.tabs.query({currentWindow: true, active: true},
            function (tabs) {
                chrome.tabs.sendMessage(tabs[0].id, "")
            })
        }
}, false)

But I also have a content.js

const url = document.location.href
const hostname = window.location.hostname
const ac_websites = ["sciencedirect.com", "ncbi.nlm.nih.gov", "pubmed.ncbi.nlm.nih.gov", "ieeexplore.ieee.org", "ci.nii.ac.jp", "researchgate.net", "link.springer.com", "academia.edu"]

chrome.runtime.onMessage.addListener(function (request) {
    if (ac_websites.includes(hostname)) {
        alert("Authorized website");
        var auth_web = 1;
    }
})

How can I share the value of var auth_web = 1; to popup.js so that I can use it in the script ? Like so in popup.js:

if (auth_web == 1) {
   //do something here
}

Here is my manifest.json:

{
        "matches": ["<all_urls>"],
        "js": ["content.js", "popup.js"] 
}

I have considered using getBackgroundPage() but it doesn't work. I might need to use a foo() function as discussed HERE

Is there a specific way to "share" variable data between javascripts ?