Ошибка при загрузке модуля электронных вкладок и невозможность создания вкладок в электронном

Я установил пакет электронных модулей для реализации вкладок в электроне, как показано ниже

package.json

{
  "name": "Backoffice",
  "version": "1.0.0",
  "description": "BackOffice application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Karthik",
  "license": "ISC",
  "devDependencies": {
    "electron": "^2.0.8",
    "electron-tabs": "^0.9.4"
  }
}

main.js

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const path = require("path");
const url = require("url");
const TabGroup = require("electron-tabs");

let win;
const tabGroup = new TabGroup();

function createWindow() {
    win = new BrowserWindow();
    win.loadURL(url.format({
        pathname:path.join(__dirname,'index.html'),
        protocol:'file',
        slashes:true
    }));

    win.on('closed',()=>{
        win = null;
    })
}

app.on('ready', function(){
    createWindow();
    const template = [
        {
            label : 'Backoffice',
            submenu: [
                {
                   label : 'Account Management',
                   click : function () {
                       let tab = tabGroup.addTab({
                       title: "Electron",
                       src: "http://electron.atom.io",
                       visible: true
                    });
                    }
                },
                {
                    label : 'HR Management',
                    click : function () {
                        console.log("CLICK HM menu");
                    }    
                },
             ]

        }
]
    const menu = Menu.buildFromTemplate(template);
    Menu.setApplicationMenu(menu);
});

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>BackOffice</title>
        <link rel="stylesheet" href="styles.css">
        <link rel="stylesheet" href="node_modules/electron-tabs/electron-tabs.css">
    </head>
    <body>
        <h1>BackOffice</h1>
        <div class="etabs-tabgroup">
            <div class="etabs-tabs"></div>
            <div class="etabs-buttons"></div>
        </div>
        <div class="etabs-views"></div>
    </body>
</html>

При запуске npm я получаю следующую ошибку

App threw an error during loadReferenceError: document is not defined at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:3:1)
    at Object.<anonymous> (C:\workspace\nodejs_workspace\electron\menu-demo\node_modules\electron-tabs\index.js:421:3)
    at Module._compile (module.js:642:30)
    at Object.Module._extensions..js (module.js:653:10)
    at Module.load (module.js:561:32)
    at tryModuleLoad (module.js:504:12)
    at Function.Module._load (module.js:496:3)
    at Module.require (module.js:586:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\DEV_2018\nodejs_workspace\electron\menu-demo\main.js:11:18)

Почему я не могу загрузить пакет электронных модулей.
Что вызывает эту ошибку? Как создать новую вкладку при нажатии на меню приложения в электронном?

Ответ 1

Как пояснил @coolreader18, вы должны использовать electron-tabs в процессе Renderer

Это означает, что вы должны уведомить html из main.js, когда вы нажимаете элемент меню. Щелчок MenuItem предоставляет вам BrowserWindow чтобы вы могли отправить ему сообщение.

main.js

 ...
 {
   label: 'Account Management',
   click: function (menuItem, browserWindow, event) {
     browserWindow.webContents.send('add-tab', {
       title: 'Electron',
       src: 'http://electron.atom.io',
       visible: true
     })
   }
 },
 ...

index.html

<body>
  ...
  <script>
    const { ipcRenderer } = require('electron')
    const TabGroup = require('electron-tabs')
    const tabGroup = new TabGroup()

    ipcRenderer.on('add-tab', (event, arg) => {
      tabGroup.addTab(arg)
    })
  </script>
</body>

Ответ 2

В документации для electron-tabs он упоминает о вызове из процесса рендеринга, но вы делаете это в основном процессе. Основной процесс - это то, где вы управляете электронным apis, например, открываете окна, как в main.js Каждое окно браузера создает новый процесс визуализации, который может связываться с основным процессом или управлять собственным документом и веб-APIS.

Ошибка, которую вы получаете, document is not defined, потому что основной процесс не имеет доступа к DOM, поскольку вы можете открывать несколько браузеров из одного и того же основного процесса; он не знал бы, что использовать. Так что вам нужно сделать, это поместить скрипт в процесс рендеринга. Создайте renderer.js и поместите код electron-tabs (const TabGroup = require("electron-tabs");). Затем в вашем index.html поместите <script src="renderer.js"></script>, и он должен работать.

Ответ 3

Может быть, потому что вы звоните

const tabGroup = new TabGroup();

до того, как страница завершит загрузку.

Попробуйте разбить его на

let tabGroup;

и внутри createWindow():

tabGroup = new TabGroup();

Изменить: вы должны изменить const, чтобы позволить или var, а потом, извините