How to create chrome like tab on Electron

Question

I am making a desktop application using Github Electron, and want to know how can I make chrome like tabs.

Like when we open any browser or let say chrome, we can add create new tab on the same window, likewise I want this to be done in my desktop app. I dig on electron doc's and community packages but find nothing.

Answer 1

Found this thing. The documentation is surprisingly scarse. But when you look into the index.html, it's quite easy. Just put

<div class="chrome-tabs">
    <div class="chrome-tabs-content"></div>
    <div class="chrome-tabs-bottom-bar"></div>
</div>

And the javascript:

var el = document.querySelector('.chrome-tabs');
var chromeTabs = new ChromeTabs();
chromeTabs.init(el, { tabOverlapDistance: 14, minWidth: 45, maxWidth: 243 });

And it's done.

---

EDIT

Additional information

To use chrome-tabs you need to include draggabilly and chrome-tabs:

<script src="https://unpkg.com/[email protected]/dist/draggabilly.pkgd.min.js"></script>
<script src="js/chrome-tabs.js"></script>

And you might be interested in additional event listener:

el.addEventListener('activeTabChange', ({ detail }) => console.log('Active tab changed', detail.tabEl))
el.addEventListener('tabAdd', ({ detail }) => console.log('Tab added', detail.tabEl))
el.addEventListener('tabRemove', ({ detail }) => console.log('Tab removed', detail.tabEl))

END OF EDIT

---

To add tab:

chromeTabs.addTab({
      title: 'New Tab',
      favicon: 'demo/images/default-favicon.png'
    });

To remove tab:

chromeTabs.removeTab(el.querySelector('.chrome-tab-current'));

But you need to code the content panel (probably webview element) and its css manually.

---

Other alternative is using electron-tabs. But when i tried using it, it created two tabs in the javascript when i call tabGroup.addTab(). So i can not recommend it.