'chrome.devtools.panels.create is undefined

I'm trying to create a Chrome extension and want to in different ways interact with the devtools. To create a foundation I decided to follow this guide, however it doesn't seem to be working at all. The errors arrive from this piece of code:

chrome.devtools.panels.create(
  "My Panel",
  "/icons/star.png",
  "/devtools/panel/panel.html"
).then((newPanel) => {
  newPanel.onShown.addListener(handleShown);
  newPanel.onHidden.addListener(handleHidden);
}); 

The errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'then')
Ignoring unauthorized client request from null

A panel is successfully created however when trying to view it just says "It may have been moved, edited or deleted". If instead of doing then add a callback function. The TypeError is removed, but the Ignoring unauthorized client request persists.

This is my first time working with Chrome extensions or anything with devtools API, however I have not been able to find any sufficient help online.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source