title: Intended HTML content of the added devtools panel is not showing
body: <p>I'm trying to add a new devtools panel using my Chrome extension. I added <code>devtools_page</code> to <code>manifest.json</code> and was able to add a new panel to the Devtools, but I can't see the HTML content. When the panel is opened, I only see this.
  <a href="https://i.stack.imgur.com/TqepW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqepW.png" alt="enter image description here" /></a></p>
  <p><strong>manifest.json</strong></p>
  <pre><code>&quot;devtools_page&quot;: &quot;devtools.html&quot;,
  </code></pre>
  <p><strong>devtools.html</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script src=&quot;./devtools/devtools.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>devtools.js</strong></p>
  <pre><code>chrome.devtools.panels.create(
      &quot;Demo panel&quot;,
      &quot;panel.png&quot;,
      &quot;demo_panel.html&quot;,
      function (panel) {
        console.log(&quot;Panel created: &quot;, panel);
      }
  );
  </code></pre>
  <p>The folder structure is as follows.</p>
  <p><a href="https://i.stack.imgur.com/MhoBB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MhoBB.png" alt="enter image description here" /></a></p>
  <p>How can I show the HTML content of <code>demo_panel.html</code> under <em><strong>Demo Panel</strong></em> panel? Thanks for all helpful answers.</p>