document.querySelector("video, audio"); is returning NULL value

Question

I am trying to make a volume booster extension but every time I try to get the media element using document.querySelector("audio, video") it returns null even when there is media running in the background. I tried running it on different websites just to make sure.

Full Code:

slider = document.querySelector("input");
slider.oninput = function () {
  progressBar = document.querySelector("progress");
  progressBar.value = slider.value;
  sliderValue = document.querySelector(".sliderValue");
  sliderValue.innerHTML = slider.value;

  console.log(slider.value);

  // Get the current volume and adjust it based on your desired boost amount.
  // sliderValue = document.querySelector(".sliderValue");
  boostFactor = slider.value / 100; // You can change this value to your desired boost amount.
  mediaElements = document.querySelector("video");
  console.log(boostFactor);
  // Function to boost media volume
  function boostMediaVolume(mediaElement) {
    if (!mediaElement) return;
    mediaElement.volume *= boostFactor;
  }
  console.log(mediaElements);
  boostMediaVolume(mediaElements);
};