【问题标题】：How to create chrome like tab on Electron如何在 Electron 上创建类似 chrome 的标签
【发布时间】：2016-11-11 00:57:38
【问题描述】：

我正在使用 Github Electron 制作桌面应用程序，并且想知道如何制作类似于标签的 chrome。

就像当我们打开任何浏览器或者说 chrome 时，我们可以在同一个窗口中添加创建新选项卡，同样我希望在我的桌面应用程序中完成此操作。我挖掘了电子文档和社区包，但一无所获。

【问题讨论】：

标签： electron

【解决方案1】：

var shell = require('electron').shell;
event.preventDefault();
shell.openExternal('https://github.com');

【讨论】：

@Ravindra Barthwal Webking，我刚得到这个，我也面临同样的问题，无法解决
那么您可以更新您的代码以在浏览器窗口中打开新标签页吗？

【解决方案2】：

找到this thing。文档出奇地稀缺。但是当您查看 index.html 时，这很容易。随便放

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

还有 javascript：

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

它已经完成了。

编辑

附加信息

要使用 chrome-tabs，您需要包含 draggabilly 和 chrome-tabs：

<script src="https://unpkg.com/draggabilly@2.1.1/dist/draggabilly.pkgd.min.js"></script>
<script src="js/chrome-tabs.js"></script>

您可能对其他事件侦听器感兴趣：

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))

编辑结束

添加标签：

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

要删除标签：

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

但您需要手动编写内容面板（可能是 webview 元素）及其 css。

其他选择是使用electron-tabs。但是当我尝试使用它时，当我调用tabGroup.addTab() 时，它在 javascript 中创建了两个选项卡。所以我不能推荐它。

【讨论】：

chrome-tabs 没有唯一的 id 供我们将其映射到 BrowserView ？
@Vickmaniac，我认为你可以只添加属性，或者使用 vue 或 angular 来跟踪 id 和 browserview。