Error When Toggling Audio Volume of Any Tab

[Somto U]

Context:
I am developing a custom web plugin to control the volume of audio or video playing in both active and inactive tabs. I am trying to refactor the current implementation as it only works on some sites. 

Question:

I know it is possible to mute any tab, but can I also control the volume of media (audio or video) in the active tab using my custom plugin? If so, what am I missing as I am encountering a permission error. I was following the documentation here but I kept running into the error below. For reference, I am new to web plugins and have included relevant parts of my manifest.json and content.js file.

Error:
index.html:1 Unchecked runtime.lastError: Extension has not been invoked for the current page (see activeTab permission). Chrome pages cannot be captured.

MANIFEST.JSON
"permissions": ["scripting", "tabCapture", "tabs", "activeTab"],

CONTENT.JS
document
  .getElementById('volume-slider')
  ?.addEventListener('input', async (event: Event) => {
    // Get the active tab in the current window
    chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
      // Capture the media stream from the active tab
      chrome.tabCapture.capture(
        {
          audio: true,
          video: false,
          audioConstraints: {
            mandatory: {
              chromeMediaSource: 'tab',
              chromeMediaSourceId: tabs[0].id // id is never undefined
            }
          }
        },
        (stream) => {
          // TODO: why is stream null?
          console.log('stream ', stream);
        }
      );
    });
  });