I am taking a course about browsers in tech school.
I have absolutely 0 knowledge in this field.
We were tasked with creating a simple chrome extension that runs at the background and when you are in https://www.linkedin.com/jobs it constantly searches for elements with the class jobs-apply-button.
Once it finds the element it prints it.

So I found what element contains the jobs-apply-button class. Its the Apply button:

So I created the following chrome extension:
manifest.json:

{
  "manifest_version": 3,
  "name": "Job Apply Button Checker",
  "version": "1.0",
  "description": "Logs elements with the class 'jobs-apply-button' every second.",
  "permissions": [
    "activeTab",
    "tabs",
    "webNavigation"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.linkedin.com/jobs/*"],
      "js": ["content.js"]
    }
  ]
}

background.js:

chrome.webNavigation.onCompleted.addListener((details) => {
  if (details.url.includes('linkedin.com/jobs')) {
    chrome.scripting.executeScript({
      target: { tabId: details.tabId },
      files: ['content.js']
    });
  }
}, { url: [{ urlMatches: 'linkedin.com/jobs' }] });

content.js:

function checkForJobApplyButtons() {
  const elements = document.querySelectorAll('.jobs-apply-button');
  if (elements.length > 0) {
    console.log('Found jobs-apply-button elements:', elements);
  }
}
setInterval(checkForJobApplyButtons, 1000);

Then I go to a LinkedIn -> Jobs -> Specific job that has that button.
But it doesn’t work at first, nothing is logged to the console.
Only after I refresh the page its start working.
I tried multiple content.js techniques but same issue always.
Why does it work only after a page refresh, and how can I fix it?