How to make side panel in chrome extension?
<p>I have been learning to create a chrome extension. I have tried hello world example and it was working fine. Now I have been trying to add custom code and make some changes in the hello world code according to my requirements.</p>
<p>What I am trying to create is when the user clicks on the icon in the address bar, it should open <strong>popup.html</strong> <strong>below address bar</strong> as shown in the picture. The screenshot is from extension called <strong>raindrop.io</strong></p>
<p>They are doing is within chrome extension. When I click on the icon it opens the right drawer on top of the existing webpage and below the address bar to show all my saved bookmarks. I wanted to achieve the same effect but I don't know where to start. I have heard that there was some experimental side pane but google has removed it.</p>
<p><a href="https://i.stack.imgur.com/qANPC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qANPC.png" alt="Raindrop.io extension" /></a></p>
<p><strong>EDIT</strong></p>
<p>I have taken the suggestions and tried to implement that. Now I am stuck at two places -</p>
<ol>
<li>How to open the window when clicked on the icon in the address bar. Right now it just opens automatically by itself. I want it open when the user clicks on the icon.</li>
<li>I am doing all this to create a note taking the extension and I have done creating a note-taking extension but it works in popup interface but I wanted to implement in sidebar interface.</li>
</ol>
<p><strong>Here is my code for -</strong></p>
<p><strong>A. Side Window Interface in Chrome Extension</strong></p>
<p><strong>manifest.json</strong></p>
<pre><code>    {
    &quot;manifest_version&quot;: 2,

    &quot;name&quot;: &quot;Hello World&quot;,
    &quot;description&quot;: &quot;This extension to test html injection&quot;,
    &quot;version&quot;: &quot;1.0&quot;,
    &quot;content_scripts&quot;: [{
        &quot;run_at&quot;: &quot;document_end&quot;,
        &quot;matches&quot;: [
            &quot;https://*/*&quot;,
            &quot;http://*/*&quot;
        ],
        &quot;js&quot;: [&quot;js/jquery-1.11.3.js&quot;, &quot;js/content-script.js&quot;],
        &quot;css&quot;: [&quot;css/custom.css&quot;]
    }],
    &quot;browser_action&quot;: {
        &quot;default_icon&quot;: &quot;icon.png&quot;
    },
    &quot;permissions&quot;: [
        &quot;activeTab&quot;,
        &quot;https://ajax.googleapis.com/&quot;
    ]
  }
</code></pre>
<p><strong>Content Script.js</strong></p>
<pre><code>var iframe = document.createElement('iframe'); 
iframe.style.background = &quot;green&quot;;
iframe.style.height = &quot;100%&quot;;
iframe.style.width = &quot;360px&quot;;
iframe.style.position = &quot;fixed&quot;;
iframe.style.top = &quot;0px&quot;;
iframe.style.right = &quot;0px&quot;;
iframe.style.zIndex = &quot;9000000000000000000&quot;;
iframe.frameBorder = &quot;none&quot;; 
 
document.body.appendChild(iframe);
</code></pre>
<p><strong>B. Note Taking App Extension</strong></p>
<p><strong>popup.html</strong></p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;SideNotes&lt;/title&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
    &lt;script src=&quot;popup.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
        &lt;div id=&quot;toolbar&quot;&gt;
          &lt;p id=&quot;title&quot;&gt;S I D E N O T E S &lt;/p&gt; 
          &lt;img id=&quot;logo&quot; src=&quot;image/icon.png&quot; alt=&quot;&quot;&gt;
        &lt;/div&gt;
        &lt;div id=&quot;all-notes&quot;&gt;
            &lt;ul id=&quot;todo-items&quot;&gt;&lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id=&quot;take-note&quot;&gt;
            &lt;form id=&quot;new-todo-form&quot; method=&quot;POST&quot; action=&quot;#&quot;&gt;
                &lt;textarea id=&quot;new-todo&quot;&gt;&lt;/textarea&gt;
                &lt;input type=&quot;image&quot; src=&quot;image/done.svg&quot; id=&quot;submitButton&quot;&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/custom.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/db.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;js/app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p><strong>Screenshot of my app, it works locally</strong>
<a href="https://i.stack.imgur.com/kctvL.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kctvL.png" alt="enter image description here" /></a></p>