How to make side panel in chrome extension?

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.

What I am trying to create is when the user clicks on the icon in the address bar, it should open popup.html below address bar as shown in the picture. The screenshot is from extension called raindrop.io

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.

EDIT

I have taken the suggestions and tried to implement that. Now I am stuck at two places -

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.
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.

Here is my code for -

A. Side Window Interface in Chrome Extension

manifest.json

    {
    "manifest_version": 2,

    "name": "Hello World",
    "description": "This extension to test html injection",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": [
            "https://*/*",
            "http://*/*"
        ],
        "js": ["js/jquery-1.11.3.js", "js/content-script.js"],
        "css": ["css/custom.css"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
    ]
  }

Content Script.js

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "360px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none"; 

document.body.appendChild(iframe);

B. Note Taking App Extension

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>SideNotes</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="popup.js"></script>
</head>

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

</html>

Screenshot of my app, it works locally

There is no right-side panel in chrome extension API.

By you may do it in the same way, as your example extension does:

Create background.js listening messages from the tab
Create a content script sends the message to background.js if the tab is injectable (if you need your extension work correct on system pages)
If tab is injectable, with chrome.tabs.executeScript inject your menu div to the page / inject listener, which opens your menu.
Profit.

More details about how to do it below.

Create background.js listening browser icon clicks and notify your content script about clicks.
Prevent showing of popup.html in default popup.

manifest.js

....
"browser_action": {
},
"background": {
    "scripts":["background.js"]
},
...

background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,"toggle");
    })
});

In content-script.js create an invisible iframe, with your popup.html (with zero width on with display:none; style). I use zero width because of you may want to animate your menu display by jquery as example extension does.
In content-script add message listener for receive messages sent from background.js script.
When receiving the message, show or hide menu block

content-script.js

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg == "toggle"){
        toggle();
    }
})

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none"; 
iframe.src = chrome.extension.getURL("popup.html")

document.body.appendChild(iframe);

function toggle(){
    if(iframe.style.width == "0px"){
        iframe.style.width="400px";
    }
    else{
        iframe.style.width="0px";
    }
}

Make popup.html and scripts you load from extension context visible for browser HTML context:

manifest.json

"web_accessible_resources": ["popup.html"]

Chrome Tabs API:https://developer.chrome.com/extensions/tabs
Chrome message passing: https://developer.chrome.com/extensions/messaging
Browser action click processing: https://developer.chrome.com/extensions/browserAction#event-onClicked
Content script injection: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/executeScript