Add to Chrome app titlebar

Question

I would like to add a button in the titlebar of a Chrome app. Most of my research has lead me to believe that the only way to do this is by disabling the default titlebar and making my own. Is there a way to simply add a button to the existing titlebar? If not, is there a resource that has detailed tutorials or examples of removing the default titlebar and making a custom titlebar?

Answer 1

Nope, there isn't a way to add buttons to "default" titlebars. That wouldn't be portable anyway.

What you can do is create a frameless app window:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    },
    'frame': 'none' // It will be a rectangle filled with your HTML
  });
});

There is a sample app that implements this and also a draggable title bar.

You can use any kind of framework to make an area that looks like a title bar on your page's top, like Bootstrap's navbar, and implement actions like close/maximize/minimize using chrome.app.window API - get a reference to the current AppWindow and use its methods.