how make to changes to user interface of chrome extension based on a function running in background

I am building a chrome extension and its a progress bar with a button. onclicking the button it fetches the no of buttons clicks on them and then updates the progress bar.so how do get the count from utilites .js to popup.js

manifest

{
 "manifest_version": 2,
  "name": "test",
  "description": "test",
  "version": "1.0",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Fill</title>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    
    <div class="container">
      <div class="circular-progress">
        <div class="value-container">0%</div>
      </div>
      <button id="connect">start</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

style.css

button {
  margin: auto;
}
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 250px;
  width: 200px;
  background: #1c2649;
  /* background: black; */
}
.heading {
  background-color: #3c3f48;
}
.container {
  height: 150px;
  width: 100px;
  background-color: #1c2649;
  position: absolute;
  left: 30%;

  border-radius: 8px;

  display: grid;
  place-items: center;
}
.circular-progress {
  position: relative;
  height: 100px;
  width: 100px;
  background: green;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
}
.circular-progress:before {
  content: '';
  position: absolute;
  height: 85%;
  width: 85%;
  background: white;
  border-radius: 50%;
}
.value-container {
  position: relative;
  font-size: 25px;
}

popup.js

function injectTheScript() {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    chrome.tabs.executeScript(tabs[0].id, { file: 'utilities.js' })
  })
}

document.getElementById('connect').addEventListener('click', injectTheScript)
let connectButton = document.getElementById('connect')
let progressBar = document.querySelector('.circular-progress')
let valueContainer = document.querySelector('.value-container')

let progressValue = 0
let progressEndvalue = 65
let speed = 10
let progress = setInterval(() => {
  progressValue++
  valueContainer.textContent = `${progressValue}`
  if (progressValue == progressEndvalue) {
    clearInterval(progress)
    progressBar.style.background = `conic-gradient(
     green ${progressValue * 3.6}deg,
     white ${progressValue * 3.6}deg
    )`
  }
})

utilities.js

function connectToPeople() {
  var buttons = document.getElementsByClassName(
    'artdeco-button artdeco-button--2 artdeco-button--secondary ember-view'
  )
  let count=0

  for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].textContent.trim() == 'Connect') {
      count++;
      buttons[i].click
    }
  }
}

connectToPeople()

so how do i update progressEndValue present in popup.js with the count variable in utilities.js