I’m currently working on some JavaScript code for a project. My goal is to make Electron open all links that would normally result in “pop-ups” to open in new tabs under the electron-tabs package.
I’m fairly new to js/electron, but after a few hours of debugging I’m at a loss. I’m not sure if the mouse-click-listener needs to go into the app.js or main.html file, but either way I can’t seem to get anything to work – below is a snippet:
app.js:
const electron = require("electron");
const app = electron.app;
app.on("ready", function () {
const mainWindow = new electron.BrowserWindow({
webPreferences: {
webviewTag: true
}
});
mainWindow.loadURL("file://" + __dirname + "/main.html");
});
main.html:
<!DOCTYPE html>
<html>
<head>
<title>Explorer</title>
</head>
<body style="margin:0">
<tab-group new-tab-button="true" sortable="true">
<style>
/* Add custom styles */
.my-badge {
background-color: #Green;
}
.my-custom-tab {
color: #d135d1;
font-style: italic;
font-weight: bold;
}
</style>
</tab-group>
<script src="node_modules/electron-tabs/dist/electron-tabs.js"></script>
<script>
const tabGroup = document.querySelector("tab-group");
tabGroup.addTab({
title: "Function Designer",
src: "https://localhost",
active: true
});
tabGroup.addTab({
title: "UI Designer",
src: "https://localhost/ui-designer",
active: true,
});
tabGroup.addTab({
title: "Configuration Browser",
src: "https://localhost/configuration-browser",
active: true
});
tabGroup.addTab({
title: "Documentation Browser",
src: "https://localhost/documentation-browser",
active: true
});
tabGroup.setDefaultTab({
title: "Function Designer",
src: "https://localhost",
active: true
});
document.addEventListener("click", (event) => {
if (event.target.tagName === "A") {
const clickedLinkURL = event.target.href;
tabGroup.addTab({
title: "New Tab",
src: clickedLinkURL
});
}
});
</script>
</body>
</html>
I want to write a click listener and forward all clicks that would normally result in new tabs on chrome/Firefox, to result in new tabs under the electron-tabs package. I cannot seem to do this.
Edit: Forgot to mention, I also read the documentation for Electron-Tabs and I didn’t see anything remotely close to what I needed.
Alex is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.