Chrome extension using sidebar

Question

I've been having a look at Chrome extensions and I'd like to create an extension that interacts with a web page using a sidebar. So, user clicks button to launch extension, and the current page splits, with the right hand portion displaying my extension. I tried below, but I see nothing (working or otherwise). I'm not overly surprised it's not working as I do not have a sidebar.html file for one thing. The reason I have that in the manifest is because I saw it in another post in this site. The suggestion there was to use the "sidebar" line in manifest.json, but "sidebar" isn't even mentioned in the documentation as being a valid part of the manifest syntax.

manifest.json:

{
  "name": "Test 1",
  "version": "1.0",
  "description": "Test Extension 1",
  "page_action": {
    "default_icon": "icon.png",
    "default_title": "Testing",
    "default_popup": "popup.html"
   },
  "sidebar" : {},
  "permissions": [
    "experimental"
  ]
}

popup.html:

<script>
  chrome.experimental.sidebar.show();
  chrome.experimental.sidebar.expand();
  chrome.experimental.sidebar.navigate({path: "sidebar.html"});
</script>

I've enabled 'experimental'.

Thanks for any help.

Answer 1

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.

Answer 2

I was looking for a sidebar solution as well and ended up at Implement chrome.sidebar API thread.

According to the Sidebar PRD, it is already possible to create sidebar by:

1. injecting a script into the page which edits the HTML of the page to display a sidebar by modifying the DOM to insert an iframe which loads the contents of the sidebar from a remote server.
2. the injected script can edit the DOM directly to display a sidebar, the contents of which are passed via message.

However, there are many downsides (explained in the same document) with regard to:

Usability, Performance, Security, Privacy (Extension sniffing as well as Third party cookies) and Accessibility.

You can watch a demo of what they are preparing for future Sidebar Component.

It might help in shipping the feature quicker if you star the thread.

update

Per this comment, Chrome will not get a built-in sidebar component.