so I am making a chrome extension that displays a box overlayed on the tabs displaying the current spotify song you are playing. I have gotten everything to work except for the fact that when I click on the tab to display the box, only certain websites like chatgpt and my own localhost show the box, with all other websites (like stackoverflow and youtube) not showing anything. Below, I’ve attached my manifest.json and script.js files which should have the necessary permissions to modify the tabs and the code itself but any advice and help would be appreciated. In the code below I attached some code ti display the error if the tab doesn’t allow the box and this is the error that appears:”Cannot access contents of the page. Extension manifest must request permission to access the respective host.” The amount of hello’s I have in this code is because of me using hello to display the box before I integrated the Spotify API so I apologize if that causes some confusion. Thank you.

manifest.json file
{
  "manifest_version": 3,
  "name": "Spotify Song Shower",
  "version": "1.0",
  "type": "module",
  "description": "A simple Chrome extension that displays the current song playing from Spotify in the top left corner of the window.",
  "action": {
    "default_popup": "index.html"
  },
  "dependencies": {
    "express": "^4.17.1",
    "node-fetch": "^3.0.0",
    "querystring": "^0.2.0"
  },
  "permissions": ["tabs", "scripting", "activeTab", "notifications"],
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": ["<all_urls>", "http://*/*", "https://*/*"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["script.js"]
    }
  ]
}

script.js file (the file that runs and displays the box)

async function addbox(TrackName) {
  // Creating and styling the box. It is on the top left of the screen and should show the current song playing
  const helloBox = document.createElement("div");
  helloBox.id = "hello-box";
  helloBox.style.position = "fixed";
  helloBox.style.top = "0px";
  helloBox.style.left = "0px";
  helloBox.style.padding = "5px 10px 5px 10px";
  helloBox.style.backgroundColor = "black";
  helloBox.style.color = "green"; // Font color of the text
  helloBox.style.zIndex = "1000";
  helloBox.style.borderRadius = "0 0 10px 0"; // Rounded bottom-right corner
  helloBox.style.fontSize = "16px";
  helloBox.style.textAlign = "center";
  helloBox.style.whiteSpace = "nowrap";
  helloBox.style.display = "inline-block"; // Size the box based on content width

  //console.log(typeof TrackName);
  //console.log(TrackName);
  helloBox.innerText = "Song: " + TrackName;
  document.body.appendChild(helloBox);
}
// When the button in index.html is clicked this is triggered causing the events inside to happen
document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("showHello").addEventListener("click", async () => {
    chrome.tabs.query({}, (tabs) => {
      for (let tab of tabs) {
        // Loops through every tab that is open
        console.log("Testing track name: " + currentTrackName); // Logging in console current song playing
        chrome.scripting.executeScript(
          // Adds the box to the tab
          {
            target: { tabId: tab.id },
            func: addbox,
            args: [currentTrackName],
          },
          (results) => {
            // Returns console log on if box is added to tab or not
            if (chrome.runtime.lastError) {
              console.error(chrome.runtime.lastError); **// This is where all the error message is coming up from**
            } else {
              console.log("Script executed on tab ID:", tab.id);
            }
          }
        );
      }
    });
 });
});