I have installed electron-modules package for implementing tabs in electron as shown below
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> I am getting the following error when I run npm start
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) Why am I not able to load electron-modules package.
What is causing this error? How to create a new tab on click on application menu in electron?
3 Answers
Answers 1
As @coolreader18 explained in details, you have to use electron-tabs in Renderer process
This means you have to notify the html from main.js when you click a menu item. MenuItem's click provides you the caller BrowserWindow so you can send message to it.
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> Answers 2
In the documentation for electron-tabs, it mentions to call it from the renderer process, yet you're doing it in the main process. The main process is where you control the electron apis from, e.g. opening windows like you are in main.js. Each browser window creates a new renderer process, which can communicate with the main process or manage its own document and Web APIS.
The error you're getting there, document is not defined, is because the main process does not have access to the DOM because you can open multiple browsers from the same main process; it wouldn't know which to use. So what you need to do is put a script in the renderer process. Create a renderer.js, and put the electron-tabs code (const TabGroup = require("electron-tabs");) there. Then, in your index.html, put <script src="renderer.js"></script>, and it should work.
Answers 3
Could be because you are calling
const tabGroup = new TabGroup(); before the page has finished loading.
Try splitting it up into
let tabGroup; and inside of createWindow():
tabGroup = new TabGroup(); Edit: You have to change const to let or var then, sorry
0 comments:
Post a Comment