brrd / electron-tabs Goto Github PK
View Code? Open in Web Editor NEWTab component for Electron
License: MIT License
Tab component for Electron
License: MIT License
Due to a security warning, I've had to disable webPreferences.nodeIntegration
in the BrowserWindow
and use a preload
script. This means require()
is not defined / available in the renderer thread.
How can I load electron-tabs
in my renderer thread?
<body>
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
<script>
const TabGroup = require("electron-tabs");
</script>
</body>
Line 19:
const TabGroup = require("electron-tabs");
Uncaught ReferenceError: require is not defined
at ui.html:19
Cannot read property 'appendChild' of undefined
at C:\App\node_modules\electron-tabs\index.js:25:45
at Object.<anonymous> (C:\App\node_modules\electron-tabs\index.js:26:3)
at Object.<anonymous> (C:\App\node_modules\electron-tabs\index.js:421:3)
...
Do I have to use SystemJS / Browserify?
Add getTabs method under the TabGroup class so that people can easily loop through the list of tabs in TabGroup.
getTabs () {
return this.tabs;
}
I've stumbled upon another problem with webviews. At least on Windows, when I close an application with several tabs with webviews completely loaded, electron (or an apackaged with electron-packager) goes to background processes and hangs in there indefinitely. That behaviour was observed with Youtube video loaded in one of the tabs.
After having excluded every other component of the app from the suspect list, I tried to close all the tabs before closing the app itself. That solved the problem.
Apparently, webviews still attached to the DOM don't behave nicely on exit.
I suggest to add a note to the documentation stating this observation and the recommended solution for Electron 2.0.x
I understand that the problem has little to do with electron-tabs itself, but I thought it might save someone hair on their head.
I'll make a PR to update the docs.
Hi,
Is there a way to set tabs on top or bottom ?
By default, the tabs are settings at the bottom of the page
Hi,
I'm using your module electron-tabs to display tabs with Electron. It is very useful.
I want to extend it to be able to display two webviews in the same tab.
Trying to do this, I made some changes in you index.js file :
const styles = `
webview {
display: flex;
flex: 0 1;
width: 0px;
height: 0px;
}
webview.visible {
width: calc(100% - 170px);
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
float: right;
}
webview1 {
display: flex;
flex: 0 1;
width: 0px;
height: 0px;
}
webview1.visible {
width: 170px;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
float: left;
}
`;
and in the function "initWebview" :
initWebview: function () {
this.webview = document.createElement("webview");
//---
this.webview1 = document.createElement("webview");
const tabWebviewDidFinishLoadHandler = function (e) {
this.emit("webview-ready", this);
};
//---
const load = () => {
this.webview1.removeEventListener('did-finish-load', load);
this.webview1.src = "http://www.example.org";
this.webview1.id="webview1"
};
this.webview1.addEventListener('did-finish-load', load)
this.webview.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
//---
this.webview1.addEventListener("did-finish-load", tabWebviewDidFinishLoadHandler.bind(this), false);
this.webview.classList.add(this.tabGroup.options.viewClass);
if (this.webviewAttributes) {
let attrs = this.webviewAttributes;
for (let key in attrs) {
this.webview.setAttribute(key, attrs[key]);
}
}
this.tabGroup.viewContainer.appendChild(this.webview);
//---
this.tabGroup.viewContainer.appendChild(this.webview1);
},
The problem is that the webview1, is never displayed...
Can you help me fix this problem? I want just to display another webview in the "etabs-views".
This picture shows what i have :
Thank you
I have the following code:
<div class="flex-container">
<div class="etabs-tabgroup
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
</div>
.flex-container {
display: flex;
}
const TabGroup = require('electron-tabs');
let tabGroup = new TabGroup();
let tab = tabGroup.addTab({
title: "[email protected]",
src: "https://mail.protonmail.com/login",
visible: true
});
tab.activate();
let tab2 = tabGroup.addTab({
title: "[email protected]",
src: "https://mail.protonmail.com/login",
visible: true
});
When does it not render:
When does it render:
electron 1.6.6
electron-tabs 0.6.0
OS: Mac OS 10.12.4
I found the following electron/electron#8505 and thought it may be correlated?
Hi,
Is there a way to isolate cookies between the tabs ?
Like I would like to open 2 different Gmail tabs, for 2 different account.
Thanks
I'm not sure if this is possible, but it would be great if we could pin a tab. Basically, this is just changing the width of the tab, so any other mechanism that could change the width of the tab would be acceptable.
If you load a website with onbeforeevent to prevent reload the tab will still close without any hint.
It would be nice if the close will respect the unload event.
BTW: It is possible to cancel the closing from within 'closing' event?
I want to create separate instances of WhatsApp Web in the same apps as tabs, but since the tabs share the same local storage, I am not able to create separate WhatsApp instances. So, is it possible to have separate local storages for separate tabs or maybe some kind of workaround?
It is a known issue that a webview may behave unusually when it is hidden using "hidden" attribute or using "display: none" style - official source
It turns out it also does not behave nice when being resized in order to be hidden, which is current implementation.
Official documentation provides recommendations on which style to use to hide webviews.
As each tab has it's own webview
, I wanted to know if I could specify a preload script?
I'd like to set a variable on the window
object. My web application (loaded in a tab) can detect the variable and behave accordingly.
Example: https://medium.com/cameron-nokes/how-to-create-a-hybrid-electron-app-53553ece0889
I've tried specifying a preload
script in webviewAttributes
in tab options when adding a tab to the tab group, the script never runs though.
Is there another way to specify a preload script for a tab?
I'm using electron 1.8.8 and electron-tabs 0.9.4.
I need to add the partition attribute to the web views in each tab. I tried the below. But it does not work.
const TabGroup = require("electron-tabs");
let tabGroup = new TabGroup();
let tab1 = tabGroup.addTab({
title: "Tab - 1",
src: "www.google.com",
visible: true,
webviewAttributes: "partition:tab1"
});
let tab2 = tabGroup.addTab({
title: "Tab - 2",
src: "www.bing.com",
visible: true,
webviewAttributes: "partition:tab2"
});
Ever since I upgraded to Electron 3+ (which incidentally upgraded Chromium), webview has been working oddly when loading in the tabs. Essentially, the tab and the html appears to render with the css, but, certain things are not loading, such as highlight effects when clicking in the inputs, and the cursor does not show up. If I click on the tab, the page then functions as normal. It's a minor issue, and definitely not a deal breaker, but, I imagine this was some kind of change in the Chromium webview behavior. Oddly enough, if I open a dev tools window, focus is correctly applied to the webview.
As discussed:
Add an attribute "iconName" that can be used instead of iconURL, if wanting to work with libraries like Font Awesome.
Thanks :-)
In tab.setPosition()
and tab.getPosition()
, first tab is index 1. It should be index 0 to be consistent with the standard way to do in javascript.
It is a breaking change, so it will be fixed in the next major release.
Hi,
I'm using electron-tabs to manages my tabs in Electron.
When I add many tabs and the tabs (in "etabs-tabs") return to line, the add button ("etabs-buttons") is placed in the third line instead of the second line.
Here is a screen shot:
Can you tell me how to keep the "add button" ("etabs-buttons") on the left of the last added tab? and avoid returning to the line.
Thank you
is typescript source file supported?
It'll give us a better hints while typing codes
When I navigate, i cant set tab title as web page title element
I have the following code:
$('document').ready(function () { $('#nav-refresh').click(function () { tabGroup.getActiveTab().webview.reload(); }) });
When I click the refresh button, the site disappears, although I can still interact with the components in the site, I use the site https://demo.codeforgeek.com/notification/ as an example, I still click the "Show me notification" button even if it's a blank page. Thank you!
Video description:
https://youtu.be/o9YQyirasGE
Hi,
I want to use your example, it looks very interesting and i would like to test it.
1/ I downloaded it from git : git clone https://github.com/brrd/electron-tabs.git
2/ cd electron-tabs
3/ npm install --save electron-tabs
I have this result :
D:\electron\electron-tabs>npm install --save electron-tabs
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install" "--save" "electron-tabs"
npm ERR! node v6.11.0
npm ERR! npm v3.10.10
npm ERR! code ENOSELF
npm ERR! Refusing to install electron-tabs as a dependency of itself
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! D:\electron\electron-tabs\npm-debug.log
Can you help me fix it?
Thank you
I'm likely just missing an option but can't seem to figure out what it is. Thanks for any help!
The example code from README.md works fine:
<div class="etabs-tabgroup">
<div class="etabs-tabs"></div>
<div class="etabs-buttons"></div>
</div>
<div class="etabs-views"></div>
...
const TabGroup = require("electron-tabs");
let tabGroup = new TabGroup({
closeButtonText: "+",
});
let tab = tabGroup.addTab({
title: "Electron",
src: "http://electron.atom.io",
visible: true
});
How come this won't work?
<div class="foo-tabgroup">
<div class="foo-tabs"></div>
<div class="foo-buttons"></div>
</div>
<div class="foo-views"></div>
...
const TabGroup = require("electron-tabs");
let tabGroup = new TabGroup({
closeButtonText: "+",
tabClass: 'foo-tab',
viewContainerSelector: 'foo-views',
tabContainerSelector: 'foo-tabs',
buttonsContainerSelector: 'foo-buttons',
viewClass: 'foo-view'
});
let tab = tabGroup.addTab({
title: "Electron",
src: "http://electron.atom.io",
visible: true
});
src加载的页面,webview中的元素怎么获取到?
Hi,
bootstrap.css is conflicting with the property "box-sizing" of etabs.
So, the render of .etabs-tabs borders is not correct.
I want it to be able to add a tab at specified index ...for example i created a "+" tab and when i click it a new tab should be created before "+" tab ,not after "+" tab ..so how can i do it? is it possible to set index of a tab?
setActiveTab
runs this.tabs.unshift(tab)
which will make the tab added multiple times, since addTab
already runs this.tabs.push(tab)
.
Does this.tabs.unshift(tab)
have any function? I tried to remove it and everything seems to work perfect.
Hi,
Is it possible to get the demo from the screenshot ?
Thanks
Using "electron-tabs": "^0.9.4",
the function
getTab(id: string): ElectronTabs.Tab | null;
is not working correctly because of type equality, this.tabs[id].id returns an integer
getTab (id) {
for (let i in this.tabs) {
if (this.tabs[i].id === id) {
return this.tabs[i];
}
}
return null;
}
I'm not exactly sure what is happening, but I've tracked the cause down to line 291 of index.js: this.webview.focus();
. With this line in place, I start with this:
which looks fine/correct.
However, as soon as I click on a tab, the UI "shifts" up and I end up with this:
Notice how the Angular Material Stepper control ("Getting Started", "Sites", etc) is only barely visible now under the top blue banner
If I comment out line 291, then the UI doesn't shift and everything appears to work still.
Any idea what is going on?
Thanks!
How do I implement JavaScript functions in the webview of electron tabs? What is the correct way?
The last update broke TabGroup.getTabs()
.
At line 104 it should be this.tabs.slice()
instead of this.slice().tabs
.
Version 0.9.3
Now I have a requirement to load an electron application when creating a new tab page, in the format of asar. So how do I load it?
when addTab,src loads the page,how do I get the elements in webview?
Just trying to build a context menu for the tab group so I can right click tabs etc. The issue I'm having is some of the functions don't seem to fully run. Seems to only close a random amount of tabs that are currently open. I don't know if it is a timing issue or something else.
I am assuming this might be asking for a bit much but I think Close, Close Others and Close All would be good use cases for other functions an example being VScode or Atom Tabs.
Just realised this line in close causes the delay so maybe you know whats up?
TabGroupPrivate.removeTab.bind(tabGroup)(this, true);
According to http://electron.atom.io/docs/api/webview-tag/#methods:
The webview element must be loaded before using the methods.
An event such as tab.on("webview-ready", (tab) => { ... })
would be useful to use webview methods.
add tab with options like this
let tab = tabGroup.addTab({
title: title,
src: src,
active: true, // this option will trigger the bug
visible: true,
closable: closable,
webviewAttributes: {nodeintegration: true}
})
then when I output the tabs, I found there are two duplicate tabs in the tabs array.
I check the source code and found the reason:
addTab (args = this.options.newTab) {
if (typeof args === "function") {
args = args(this);
}
let id = this.newTabId;
this.newTabId++;
let tab = new Tab(this, id, args); // if active equals true, this code will delete the tab and add the tab on the front of tabs array.
this.tabs.push(tab); // this code will add one more tab into the tabs array, so there will be two same tab in tabs array.
this.emit("tab-added", tab, this);
return tab;
}
I hope this bug could be fixed, thanks.
I'm cant call an internal function that I've written while using electron-tabs.
I would like to use the tab functionality but create my own "views" so to speak.
I have the views populating with the static data I want (used for a demo at the moment) but I cant seem to be able to submit anything from a button click.
I get the error regarding document being null on line 3 in your index.js before my app can actually be rendered when I have const TabGroup = require('electron-tabs')
up by the rest of my const ... require lines.
But when I put it immediately after the main window is created it fails after window is drawn however still similar document not found error in a popup window.
const path = require('path')
const electron = require('electron')
const BrowserWindow = electron.BrowserWindow
const app = electron.app
const debug = /--debug/.test(process.argv[2])
app.setName('Testapp')
var mainWindow = null
function initialize() {
function createWindow() {
var windowOptions = {
width: 895,
minWidth: 895,
height: 560,
title: app.getName()
}
if (process.platform === 'linux') {
windowOptions.icon = path.join(__dirname, '/assets/app-icon/jack.png')
}
mainWindow = new BrowserWindow(windowOptions)
mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))
mainWindow.setMenu(null)
const TabGroup = require('electron-tabs')
let tabGrid = new TabGroup()
let genTab = tabGrid.addTab({
title: "General",
iconUrl: path.join('file://', __dirname, '/assets/icons/green%20vault%20symbol.png'),
src: path.join('file://', __dirname, '/general.html'),
visible: true
});
let charTab = tabGrid.addTab({
title: "Character",
iconUrl: path.join('file://', __dirname, '/assets/icons/red%20skull.png'),
src: path.join('file://', __dirname, '/character.html'),
visible: true
});
let vehTab = tabGrid.addTab({
title: "Vehicle",
iconUrl: path.join('file://', __dirname, '/assets/icons/wheel.png'),
src: path.join('file://', __dirname, '/vehicle.html'),
visible: true
});
let moneyTab = tabGrid.addTab({
title: "Currency",
iconUrl: path.join('file://', __dirname, '/assets/icons/pink%20seraph%20crystal.png'),
src: path.join('file://', __dirname, '/currency.html'),
visible: true
});
let travelTab = tabGrid.addTab({
title: "Fast Travel",
iconUrl: path.join('file://', __dirname, '/assets/icons/fast%20travel.png'),
src: path.join('file://', __dirname, '/fasttravel.html'),
visible: false
});
let backpackTab = tabGrid.addTab({
title: "Backpack (0)",
iconUrl: path.join('file://', __dirname, '/assets/icons/backpack.png'),
src: path.join('file://', __dirname, '/backpack.html'),
visible: true
});
let bankTab = tabGrid.addTab({
title: "Bank (0)",
iconUrl: path.join('file://', __dirname, '/assets/icons/bank.png'),
src: path.join('file://', __dirname, '/bank.html'),
visible: true
});
let rawTab = tabGrid.addTab({
title: "Raw",
iconUrl: path.join('file://', __dirname, '/assets/fugue/document-binary.png'),
src: path.join('file://', __dirname, '/raw.html'),
visible: true
});
let aboutTab = tabGrid.addTab({
title: "About",
iconUrl: path.join('file://', __dirname, '/assets/icons/question%20mark.png'),
src: path.join('file://', __dirname, '/about.html'),
visible: true
});
// Launch fullscreen with DevTools open, usage: npm run debug
if (debug) {
mainWindow.webContents.openDevTools()
mainWindow.maximize()
require('devtron').install()
}
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', function () {
createWindow()
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})
}
initialize()
Would be nice to have a way to restore all tabs if I close the app (cmd+Q) and open again.
Is it possible to call the insertCSS function of electron webView();? if so how do I do that? I tried
tab = tabGroup.addTab({
title: 'Electron',
src: path.join(appBase, '/views/main-frame/index.html')
visible: true,
active: true,
webviewAttributes: {
nodeintegration: true,
plugins: true
},
ready: function (tab) {
tab.webview.insertCSS("background-color:red;");
}
});
Hi,
I'm using your module electron-tabs to handle tabs il my Electron application.
I want to know how is it possible to open a new tab from an existing one. I want that the links existing in my webview can be opened in a new tab.
I added this coded in my referer.js :
const Menu = require('electron').remote.Menu;
document.querySelector('.etabs-views').addEventListener('contextmenu', (event) => {
event.preventDefault();
const template = [
{
label: 'open in a new tab,
click: () => {
let tab = tabGroup.addTab(function(){
let tab = {
title: 'new tab',
src: 'http://www.example.com',
visible: true,
closable: true,
active: true,
ready: tab => {
let webview = tab.webview;
}
};
tabId++;
return tab;
});
}
}
];
const menu = remote.Menu.buildFromTemplate(template);
menu.popup();
});
With this code, i can display the context menu when i click right, but I want to :
1/ display this menu only on clickable link
2/ open link in a new tab
Is it possible with your module?
Thank you
I currently am using the files from the demo but have adapted them slightly to instead of pointing to google in the first tab, make it point to a local file instead and set it as the active and visible tab. However, the code in the script tags aren't executing. Would I have to run those via ipc then, or is there something which I don't seem to be able to understand about how this loads the webpages?
The contents of the loaded html file are as follows:
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
Hi,
I'm using ur module electron-tabs to manage tabs in my Electron application.
I have a quick and urgent question:
I'm using WebRequest to intercept requests
I have only one BrowserWindow with many tabs (webviews).
How is it possible to know from which tab (webview) a request is sent?
Thank you in advance
I use electron-tabs in an app with several BrowserWindows. Unfortunatly, closures in private implementation keep TabGroupPrivate / TabPrivate static and statefull in all instance of TabGroup...
I could contribute to fix this issue, Could we discuss about the better way to do this ?
cc @rriclet
From #19:
(...) Add a method to export/import tabs from/to tabGroup as JSON objects which you could use it to save tabs when the app is closing and to recreate then when it is opened again.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.