my firefox extension’s background script isn’t being loaded in

i’ve been working on a firefox extension in which i created a devtools panel where i show some DOM data.

I want to refresh the data in my extension panel every time the url of the current tab changes.

I tried creating a background script which looks at tabupdates and then triggers an event that my panel script should be able to listen to, but it seems like the background script isnt being loaded in.

background.js
I’ve tested this by putting some console logs in and outside of the function but nothing ever gets triggered.

browser.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // Check if the URL has changed
  if (changeInfo.url) {
    // Send a message to the devtools panel to trigger a refresh
    browser.tabs.sendMessage(tabId, { action: "refresh" });
  }
});

manifest.json

{
  "description": "xxxx",
  "manifest_version": 3,
  "name": "xxxx",
  "version": "xxxx",
  "author": "xxxx",
  "icons": {
    "48": "icons/star.png"
  },
  "background": {
    "scripts": ["/background.js"],
    "persistent": false
  },
  "permissions": ["<all_urls>"],
  "devtools_page": "devtools/devtools-page.html"
}

panel.js listener snippet

browser.runtime.onMessage.addListener((message) => {
  if (message.action === "refresh") {
    browser.devtools.inspectedWindow.eval(`console.log('test');`);
  }
});