How to make Chrome Extension title bar like Google Hangouts?

Question

This isn't working:

How to build an chrome extension like Google Hangouts

My question is similar to this:

How do I customize the title bar of a popup in a chrome extension?

I used chrome.windows.create({...type:panel}); but its appearance is like this:

Is it possible to customize 'Normal title bar' area ?

codes here.

var createWindow = function (tab) {
  if (appWindow) {
    chrome.windows.remove(appWindow.id);
  }
  chrome.windows.create({
    tabId: tab.id,
    url: 'http://localhost:8080', 
    left: Math.round(screen.width - 300),
    top: Math.round(screen.height - 500),
    width: 300,
    height: 500,
    type: 'panel'
  }, function(win) {
    appWindow = win;
    chrome.tabs.executeScript(appWindow.tabs[0].id, { file: './js/app_inject.js'}, function(){
         // console.log('inject executed'); 
        });
  });
};
chrome.browserAction.onClicked.addListener(createWindow);

"//localhost:8080" is my local server page.

Answer 1

I believe your (apparently simple) question implies a couple more questions, so I'll try to split that up and address each one separately:

---

1. Why does my "panel" look different than Hangouts ?

Hangouts opens as a panel (so it is styled as such).
Your "panel" opens as a popup (so it is styled as such).

---

2. Why does my "panel" open as a popup ?

In order for an extension to be able to open panel-windows, the user must have this (experimental) feature enabled (and of course the underlying OS must support it). If panels are not enabled, all windows of type 'panel' or 'detached_panel' open as type 'popup' (documentation).

---

3. How can a user enable panels ?

Navigate to chrome://flags/#enable-panels and click Enable.

---

4. How is it possible for Hangouts to open panel-windows when the flag is disabled ?

Short answer: It is white-listed in the source code.
Longer answer: Take a look at this answer.

---

5. Can I style the title-bar of a popup ?

Not really. The title-bar displays (among other things) the title of the page, so you can customize that part :)

---

6. Do I have an alternative ?

If you absolutely need to be able to style your window, you could use a Packaged App. Apps can open frameless windows, so you can create (and style) a title-bar using HTML/CSS.

Answer 2

If you just want to start a hangout and copy a link to that hangout with 1 click, check out this extension (this is apparently still not an easy thing to do with Google+):

https://chrome.google.com/webstore/detail/one-click-google-hangout/aokjakdncnbbfhhammcdkbblmcglpobn