I want to add a custom title for my frameless window with custom buttons.
I have two script files - index.js, which runs automatically on Electron launching, and app.js, which added in index.html with <script src> tag.
There's a problem - require() doesn't let the script work - none of lines is running if I require any module, nevermind what it is.
index.html:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="app.js"></script>
...
</head>
index.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const sass = require('sass')
const fs = require('fs')
// Creates a main window
function createWindow () {
renderStylesheets()
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
resizable: true,
transparent: true,
frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html').then(() => {})
}
...
app.js
alert("This alert won't show.")
// If I remove these lines, alerts and jQuery's "$(callback)" will run, but
// button actions won't work :(
const { BrowserWindow, app } = require('electron').remote;
let window = BrowserWindow.getFocusedWindow();
alert("This alert won't show and the $(() => {}) won't run too.")
...
Where is the problem? If it is in index.html then the problem is with line 4 of what is shown. Make sure that you are referencing the correct website and that you are referencing the correct data.
If the problem is in index.js then the problem may be on line 8 of what is shown as you need to make sure that the variable "app" is mentioned or stated with a value before line 8.
Those are the only two things that I see right away that might be contributing to this problem.
Hope that this helps.
The problem is that app.js and any other scripts have not a require function. To add an access to Node.js function outside the main script, I set nodeIntegration: true and contextIsolation: false into the window initializer:
mainWindow = new BrowserWindow({
width: 900,
height: 600,
resizable: true,
transparent: true,
show: true,
frame: false,
center: true,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true, // <- This one
contextIsolation: false, // <- And this one
}
})