electron-tabsの紹介

electron-tabsとは

npmパッケージで、electronでタブ機能を簡単に追加することができます。
https://www.npmjs.com/package/electron-tabs
タブ機能を1から実装するのは面倒ですが、このパッケージを使うことで簡単にタブ機能を実装できます。

実装方法

npm install electron-tabs
インストールはこれで済みます

index.html

<div class="etabs-tabgroup">
    <div class="etabs-tabs"></div>
    <div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>

index.html(electronで指定したファイル)の好きなところに配置してください

tab.js

const TabGroup = require("electron-tabs");

let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
    title: "Electron",
    src: "http://electron.atom.io",
    visible: true
});

これだけでタブを一つ追加できます
srcのurlを変えると表示するページを変更できます
addTabのオプションは下で解説してます

addTabのオプション解説

ここではよく使うオプションを数個解説します
全オプション一覧はリファレンスを読んでみてください
title　タブのタイトル
src　タブにロードされるURL　webページやローカルファイル
iconURL タブのアイコン
webviewAttributes electronのwebviewの属性を指定できる webviewの属性を参照
active タブを最初からアクティブ状態にできる

実装例

test.htmlを表示してtest.jsをロードする場合

tab.js

const TabGroup = require("electron-tabs");

let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
    title: "testPage",
    src: "test.html",
    visible: true,
    webviewAttributes:{
        preload : "test.js"
    },
});