document.addEventListener('DOMContentLoaded', () => {
const browserFrame = document.getElementById('browser-frame');
// Proxy configuration
let proxyEnabled = false;
let vpnEnabled = false;
// Update status indicators
function updateStatus() {
const proxyStatus = document.querySelector('custom-navbar').shadowRoot.getElementById('proxy-status');
const vpnStatus = document.querySelector('custom-navbar').shadowRoot.getElementById('vpn-status');
proxyStatus.innerHTML = `
Proxy: ${proxyEnabled ? 'On' : 'Off'}
`;
vpnStatus.innerHTML = `
VPN: ${vpnEnabled ? 'On' : 'Off'}
`;
feather.replace();
}
// Load URL with error handling
function loadUrl(url, useProxy = false) {
try {
browserFrame.classList.add('loading');
// Validate URL
if (!url.startsWith('http://') && !url.startsWith('https://')) {
url = 'https://' + url;
}
// Create new URL object to validate
new URL(url);
if (useProxy || vpnEnabled) {
// Use a better proxy solution
const proxyUrl = `https://api.allorigins.win/get?url=${encodeURIComponent(url)}`;
fetch(proxyUrl)
.then(response => response.json())
.then(data => {
if (data.contents) {
browserFrame.srcdoc = data.contents;
proxyEnabled = true;
} else {
throw new Error('Proxy request failed');
}
})
.catch(() => {
// Fallback to direct if proxy fails
browserFrame.src = url;
proxyEnabled = false;
});
} else {
browserFrame.src = url;
proxyEnabled = false;
}
browserFrame.onload = () => {
browserFrame.classList.remove('loading');
updateStatus();
};
browserFrame.onerror = () => {
browserFrame.classList.remove('loading');
browserFrame.srcdoc = `
Failed to load page
Could not load ${url}
Try enabling proxy/VPN or check your connection
`;
updateStatus();
};
} catch (error) {
browserFrame.classList.remove('loading');
browserFrame.srcdoc = `
Invalid URL
${url} is not a valid web address
Please enter a complete URL like "https://example.com"
`;
}
}
// Handle navigation from tabs component
document.addEventListener('navigate', (e) => {
const { url, useProxy } = e.detail;
loadUrl(url, useProxy);
});
// Handle toggle VPN
document.addEventListener('click', (e) => {
if (e.target.closest('#toggle-vpn')) {
vpnEnabled = !vpnEnabled;
updateStatus();
}
});
// Handle clear data
document.addEventListener('click', (e) => {
if (e.target.closest('#clear-data')) {
if (confirm('Clear all browsing data (cookies, cache, etc.)?')) {
browserFrame.src = 'about:blank';
setTimeout(() => {
loadUrl('https://www.google.com');
}, 500);
}
}
});
// Initialize
loadUrl('https://www.google.com');
updateStatus();
feather.replace();
});