Question

I’m trying to create a devtools extension, starting with adding a panel. I’m simply calling chrome.devtools.panels.create from an external script loaded onto my extension’s page. But when I select the toolbar button for my extension, a new instance of the panel is created with a corresponding button appearing to the right of the original. Selecting that new button instance repeats the behavior.

I’ve followed Google’s example and a detailed blog post, but in neither of them am I seeing anything where this should be called from an event listener. I also can’t find any way of detecting other instances of the panel, so I’m not sure how to avoid this issue. I’m not sure if I’ve possibly run into a new bug, or I’m overlooking something fundamental here…

Answer 1

I had the same issue. My problem was that I had a loop of calling that panels.create() method.

Inducing the loop

My manifest.json file showed:

"devtools_page": "devtools.html"

My devtools.html included devtools.js, which called panels.create() like this:

chrome.devtools.panels.create('Title', 'iconfile', 'devtools.html');

This was the issue because my panels.create() method was creating a new panel consisting of devtools.html which would recall panels.create() in a loop.

Fixing the loop

This method should call a separate html file that will house all of your actual panel content, like:

chrome.devtools.panels.create('Title', 'iconfile', 'panel.html');

panel.html cannot include devtools.js or you’ll have the same issue again.

I hope this helps.