Here is a perfect chromium alternative that is made by AI and fixed by human. It is called Superbuild: https://gemini.google.com/app/1cf5fd4864213187?canvas-id=c_1cf5fd4864213187_superbuild-browser-template&full-screen=true here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Superbuild Browser</title>
<style>
/* Basic styling for the browser layout */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
background-color: #f0f2f5; /* Light grey background */
}
.browser-header {
display: flex;
align-items: center;
padding: 10px;
background-color: #ffffff; /* White header background */
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.browser-header button {
padding: 8px 12px;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f0f0f0;
cursor: pointer;
font-size: 14px;
}
.browser-header button:hover {
background-color: #e0e0e0;
}
.url-bar {
flex-grow: 1;
margin: 0 10px;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.tabs-container {
display: flex;
background-color: #e8e8e8; /* Light grey for tabs */
padding-left: 10px;
border-bottom: 1px solid #d0d0d0;
}
.tab {
padding: 8px 15px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
background-color: #f0f0f0;
margin-right: 2px;
cursor: pointer;
border: 1px solid #d0d0d0;
border-bottom: none;
font-size: 14px;
}
.tab.active {
background-color: #ffffff;
border-top: 2px solid #007bff; /* Highlight active tab */
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
border-bottom: none;
}
.tab:hover:not(.active) {
background-color: #e0e0e0;
}
.add-tab-button {
padding: 8px 12px;
background-color: #f0f0f0;
border: 1px solid #d0d0d0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
cursor: pointer;
font-size: 14px;
margin-left: auto; /* Push button to the right */
}
.add-tab-button:hover {
background-color: #e0e0e0;
}
.browser-content {
flex-grow: 1;
border: none; /* iframe will handle its own borders if any */
width: 100%;
height: 100%;
background-color: #ffffff;
}
/* Styling for the iframe itself */
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div class="browser-header">
<button id="backButton">Back</button>
<button id="forwardButton">Forward</button>
<button id="reloadButton">Reload</button>
<input type="text" class="url-bar" id="urlInput" value="https://www.google.com">
<button id="goButton">Go</button>
</div>
<div class="tabs-container" id="tabsContainer">
<div class="tab active" data-tab-id="tab-1">Tab 1</div>
<button class="add-tab-button" id="addTabButton">+</button>
</div>
<div class="browser-content" id="browserContent">
<iframe id="browserFrame" src="https://www.google.com"></iframe>
</div>
<script>
const urlInput = document.getElementById('urlInput');
const goButton = document.getElementById('goButton');
const browserFrame = document.getElementById('browserFrame');
const backButton = document.getElementById('backButton');
const forwardButton = document.getElementById('forwardButton');
const reloadButton = document.getElementById('reloadButton');
const tabsContainer = document.getElementById('tabsContainer');
const addTabButton = document.getElementById('addTabButton');
let tabCounter = 1;
let activeTabId = 'tab-1'; // Keep track of the active tab
// Function to load a URL into the iframe
function loadUrl(url) {
if (url) {
// Ensure the URL has a protocol, otherwise, default to HTTPS
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
browserFrame.src = url;
urlInput.value = url; // Update the URL bar
}
}
// Event listener for the Go button
goButton.addEventListener('click', () => {
loadUrl(urlInput.value);
});
// Event listener for Enter key in the URL bar
urlInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
loadUrl(urlInput.value);
}
});
// Navigation buttons
backButton.addEventListener('click', () => {
browserFrame.contentWindow.history.back();
});
forwardButton.addEventListener('click', () => {
browserFrame.contentWindow.history.forward();
});
reloadButton.addEventListener('click', () => {
browserFrame.contentWindow.location.reload();
});
// Tab functionality (basic)
addTabButton.addEventListener('click', () => {
tabCounter++;
const newTabId = `tab-${tabCounter}`;
const newTab = document.createElement('div');
newTab.classList.add('tab');
newTab.setAttribute('data-tab-id', newTabId);
newTab.textContent = `Tab ${tabCounter}`;
// Deactivate current active tab
document.querySelector('.tab.active').classList.remove('active');
newTab.classList.add('active');
activeTabId = newTabId;
// Insert new tab before the add button
tabsContainer.insertBefore(newTab, addTabButton);
// For now, new tabs will load the default Google page
loadUrl('https://www.google.com');
// Add click listener for new tab
newTab.addEventListener('click', () => {
// In a real browser, clicking a tab would switch to that tab's content
// For this template, we'll just activate the clicked tab visually
document.querySelector('.tab.active').classList.remove('active');
newTab.classList.add('active');
activeTabId = newTabId;
// You would typically restore the state (URL) associated with this tab here
});
});
// Initial load for the first tab
loadUrl(urlInput.value);
</script>
</body>
</html>
Please use it. Thank you!
Top comments (0)