title: How to make side panel in chrome extension?
body: <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>