I’m making a desktop app using electron. What I would like to do is change the colour of a number of different div components in my index.html file, after clicking on an icon in the bar.html file. Is there something that i can add to the browserWindows web preferences, that will allow me to have easy access to all the elements within the index.html file? At the moment i can only manipulate the appearance of the components in my bar.html file, which is no good for what i would like to accomplish.
Below is the code from my index.JS file.
ipcMain.on('state', (event, arg) => {
horizontalWindow();
event.returnValue = "toggle not ready test";
})
function horizontalWindow()
{
sidebar = new BrowserWindow({height:80, width:2000, transparent:true, frame:false, titleBarStyle: 'none', resizable: false, webPreferences: { nodeIntegration: true,
contextIsolation: false, enableRemoteModule: true}})
sidebar.loadFile('bar.html')
sidebar.setPosition(0, 100, true)
//sidebar.setSize(1800, 80, true)
sidebar.setMenuBarVisibility(false)
sidebar.setAlwaysOnTop(true, 'floating')
}
function createWindow(){
mainWindow = new BrowserWindow({ height: 10, width: 100, frame: false,titleBarStyle: 'none', parent:mainWindow, backgroundColor: '#283243', resizable: true, webPreferences: { nodeIntegration: true,
contextIsolation: false, enableRemoteModule: true }})
mainWindow.setAlwaysOnTop(true, 'normal')
mainWindow.setVisibleOnAllWorkspaces(true);
mainWindow.loadFile('index.html')
mainWindow.setMenuBarVisibility(false)
mainWindow.setResizable(false)
mainWindow.moveTop()
mainWindow.setPosition(0,0)
}
app.on('ready', () => {
createWindow();
})
app.on('closed', () => {
win = null;
})
app.on('window-all-closed', () => {
app.quit();
})
Renderer.js file:
const State = document.getElementById('state')
State.addEventListener('click', function(){
ipcRenderer.sendSync("State")
});
Any advice would be much appreciated!, as I’ve been stuck on this for a while now.