Chrome Extension Inject Sidebar into Page

Chrome extension inject sidebar into page

Update

For anyone googling, overhauled this to reflect what I'm actually using in an app, use jQuery, have more safeguards, and be more respectful of current page css.

//height of top bar, or width in your case
var height = '30px';

//resolve html tag, which is more dominant than <body>
  var html;
  if (document.documentElement) {
    html = $(document.documentElement); //just drop $ wrapper if no jQuery
  } else if (document.getElementsByTagName('html') && document.getElementsByTagName('html')[0]) {
    html = $(document.getElementsByTagName('html')[0]);
  } else if ($('html').length > -1) {//drop this branch if no jQuery
    html = $('html');
  } else {
    alert('no html tag retrieved...!');
    throw 'no html tag retrieved son.';
  }

//position
if (html.css('position') === 'static') { //or //or getComputedStyle(html).position
  html.css('position', 'relative');//or use .style or setAttribute
}

//top (or right, left, or bottom) offset
var currentTop = html.css('top');//or getComputedStyle(html).top
if (currentTop === 'auto') {
  currentTop = 0;
} else {
  currentTop = parseFloat($('html').css('top')); //parseFloat removes any 'px' and returns a number type
}
html.css(
  'top',     //make sure we're -adding- to any existing values
  currentTop + parseFloat(height) + 'px'
);

You're almost done. You've styled the page html. You might have noticed css from the page affects your stuff to. You can resolve this by containing it within an iframe:

var iframeId = 'someSidebar';
if (document.getElementById(iframeId)) {
  alert('id:' + iframeId + 'taken please dont use this id!');
  throw 'id:' + iframeId + 'taken please dont use this id!';
}
html.append(
  '<iframe id="'+iframeId+'" scrolling="no" frameborder="0" allowtransparency="false" '+
    'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;'+
           'height: '+height+';right: 0px;left: 0px;">'+
  '</iframe>'
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
  '<style type="text/css">\
    html, body {          \
      height: '+height+'; \
      width: 100%;        \
      z-index: 2147483647;\
    }                     \
  </style>                \
  <p>UNSTYLED HTML!</p>';

Yes, you have to append the iframe before setting the innerHTML

You should be able to copy/paste and edit this and be one your way!

How to make side panel in chrome extension?

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

But you may do it in the same way that 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.

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(tab){
    chrome.tabs.sendMessage(tab.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

Create always-present sidebar with Chrome extension

You have to inject HTML into every page. There was an experimental Sidebar API for a while but it was never developed to state that the Chromium team was happy with. They are still keeping the issue open but it is not currently being developed. You should star the issue if you wish to get updates on it's progress.

Update:

The feature is removed and there is no further development on it.

Quoting from their site:

We will not be proceeding with this feature request. We recognize that there is a significant number of you who will be disappointed with this decision, evidenced in part by the many stars on this issue. We debated it extensively, both inside the team and with members of the community. In the end we decided that the WontFix resolution was more in keeping with Chrome's core value of simplicity.

Chrome extension using sidebar

The problem is that you are opening, theoretically, the sidebar inside your popup, not in the current page.

You should add a content script in the page, with a function that opens the sidebar. So, in your popup you should just retrieve the current tab then call this function from it.

Also, as Boris Smus said in your question, sidebars will be discontinued in future versions. So I advice you to create your own sidebar frame via content scripts.

Update

To help you, I've made a simple extension that create a sidebar on current page.

@Curtis hosted my sample extension on Github, you can clone it here.

how to built 300px sidebar with html content and inject into current page in chrome extension

You can inject a Javascript code that create a bar Example this developer "Proper Menubar" creates this. With a click it enable/disable the menubar on the top of Google website.
https://chrome.google.com/webstore/detail/proper-menubar/egclcjdpndeoioimlbbbmdhcaopnedkp

Chrome Extension - Turn my default Popup into a Sidebar

if I understood correctly, use content script

or execute script that add the iframe dynamically via the chrome.tabs.executeScript() method

Running javascript from contentscript is the best way to manipulate the DOM

Chrome Extension Inject Sidebar into Page