How to make side panel in chrome extension?

Question

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

Answer 1

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

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

1. Create background.js listening messages from the tab
2. 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)
3. If tab is injectable, with chrome.tabs.executeScript inject your menu div to the page / inject listener, which opens your menu.
4. Profit.

More details about how to do it below.

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

manifest.js

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

background.js

chrome.browserAction.onClicked.addListener(function(tab){
    chrome.tabs.sendMessage(tab.id,"toggle");
});

3. 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.
4. In content-script add message listener for receive messages sent from background.js script.
5. 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";
    }
}

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

manifest.json

"web_accessible_resources": ["popup.html"]

Read more

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