Struggling to create an AI powered browser's navigation and tab handling - electron

Question

I am trying to make an electron based browser whose search engine is the rising "you.com". I got the website to load and even managed to get some basic navigation buttons, forward and back, but I am struggling to incorporate a tab system some what chrome like - as in the fact that I should be able to have a toolbar at the top with tabs and I should be able to close and open etc.
On top of that I am trying to throw in a .crx chrome extension using electron extensions but that doesn't seem to work.
I installed electron tabs which was successful and then I went on to install electron extensions. I then tried to add the tab functionality so when I pressed the new tab button a new tab would be opened, but when I did this only text appeared, saying "tab1 tab2 etc. not an actual tab".
I think it is a problem with my main.js.
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL('https://you.com/');
mainWindow.webContents.on('dom-ready', () => {
mainWindow.webContents.executeJavaScript(`
// Create the navigation toolbar
const backButton = document.createElement('a');
backButton.href = '#';
backButton.innerHTML = '« Back';
backButton.onclick = () => { history.back(); return false; };
const forwardButton = document.createElement('a');
forwardButton.href = '#';
forwardButton.innerHTML = 'Forward »';
forwardButton.onclick = () => { history.forward(); return false; };
const toolbar = document.createElement('div');
toolbar.className = 'toolbar';
toolbar.appendChild(backButton);
toolbar.appendChild(forwardButton);
const body = document.getElementsByTagName('body')[0];
body.insertBefore(toolbar, body.firstChild);
// Create the new tab button
let tabCount = 1;
const newTabButton = document.createElement('a');
newTabButton.href = '#';
newTabButton.innerHTML = 'New Tab';
newTabButton.onclick = () => {
const tabName = 'Tab ' + tabCount++;
const tabButton = document.createElement('a');
tabButton.href = '#';
tabButton.innerHTML = tabName;
tabButton.onclick = () => {
mainWindow.loadURL('https://you.com/');
return false;
};
const removeTabButton = document.createElement('a');
removeTabButton.href = '#';
removeTabButton.innerHTML = 'X';
removeTabButton.style.float = 'right';
removeTabButton.onclick = () => {
const tabToRemove = document.getElementById(tabName);
const previousTab = tabToRemove.previousSibling;
const nextTab = tabToRemove.nextSibling;
if (previousTab) {
mainWindow.loadURL(previousTab.getAttribute('url'));
} else if (nextTab) {
mainWindow.loadURL(nextTab.getAttribute('url'));
} else {
mainWindow.loadURL('https://you.com/');
}
tabToRemove.remove();
return false;
};
const tab = document.createElement('a');
tab.href = '#';
tab.innerHTML = tabName;
tab.id = tabName;
tab.setAttribute('url', 'https://you.com/');
tab.onclick = () => {
mainWindow.loadURL(tab.getAttribute('url'));
return false;
};
tab.appendChild(removeTabButton);
const tabs = document.getElementById('tabs');
tabs.appendChild(tab);
return false;
};
// Add the new tab and navigation buttons to the toolbar
toolbar.appendChild(newTabButton);
// Create the tabs container
const tabs = document.createElement('div');
tabs.id = 'tabs';
tabs.className = 'tabs';
// Add the tabs container to the page
body.insertBefore(tabs, body.firstChild);
`);
});
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
And the extension just does not show up or work.
It could also be my render.js.
var backButton = document.createElement('a');
backButton.href = '#';
backButton.innerHTML = '« Back';
backButton.onclick = () => { history.back(); return false; };
var forwardButton = document.createElement('a');
forwardButton.href = '#';
forwardButton.innerHTML = 'Forward »';
forwardButton.onclick = () => { history.forward(); return false; };
var toolbar = document.createElement('div');
toolbar.className = 'toolbar';
toolbar.appendChild(backButton);
toolbar.appendChild(forwardButton);
var body = document.getElementsByTagName('body')[0];
body.insertBefore(toolbar, body.firstChild);
Working navigation buttons
Not working tabs