Skip to content

rmellis/Chrome-Proxy-WebClone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌐 Chrome (Web Edition)

A fully functional, web-based browser-in-a-browser clone built with vanilla HTML, CSS, and JavaScript.

This project meticulously recreates the look and feel of Google Chrome entirely within your own web browser. By utilizing multiple public CORS proxies and intelligent srcdoc iframe injection, it bypasses standard cross-origin restrictions, allowing you to seamlessly browse the live web inside the custom UI.

📸 Screenshots

(Replace the placeholder links below with your actual screenshot paths once uploaded to your repo)

image
The custom about:home start page featuring the Google logo, search bar, and quick shortcut tiles.


image
Browsing a live website with Chrome-style rounded tabs, pill-shaped omnibox, and active bookmarks bar.


image
The UI transitioning between the default Dark theme and Light mode via the custom dropdown menu.


✨ Features

🖥️ User Interface (UI)

  • Authentic Chrome Theme: Accurately mimics Chrome's UI with a pill-shaped URL bar, connected active tabs, and distinct hover states.
  • Dark/Light Mode: Full theming support via CSS variables. Toggling the theme seamlessly updates the browser chrome, menus, internal pages, and dynamically inverts specific favicons (like GitHub) for perfect visibility.
  • Tabbed Browsing: Open, close, and switch between multiple tabs. Each tab maintains its own loading spinner, favicon, title, and independent Back/Forward navigation history stack.
  • Custom Start Page (about:home): Features the classic Google search layout, a fully functional search box, and a customizable grid of shortcut tiles.
  • Interactive Toolbar: * Working Back, Forward, Reload, and Home buttons.
    • Smart URL bar with focus states, "secure" lock icon, and a loading spinner.
    • Toggleable Bookmarks bar underneath the main navigation.
    • A dropdown Chrome menu containing theme toggles, new tab options, and UI placeholders for history and incognito mode.
  • Status Bar: A dedicated bottom bar showing "Loading..." or "Ready" states, just like a real browser's status popup.

⚙️ Under the Hood (Technical Features)

  • CORS Bypassing via Proxy Racing: To load external sites inside iframes without X-Frame-Options blocking them, the script simultaneously races three different public proxies (allorigins, corsproxy, codetabs). The first to return valid HTML content wins.
  • srcdoc Injection & Base Tag Fixes: Instead of just setting an iframe's src, the browser fetches the raw HTML, intelligently injects a <base> tag (so relative links and assets load correctly), and renders it via srcdoc with strict sandboxing rules.
  • Smart Omnibox (URL Normalizer): Type a domain (e.g., github.com), a full URL, or just a search query. The script automatically detects the format and either prepends https:// or routes the query directly to Google Search.
  • Graceful Error Handling: If all proxies time out or fail to fetch a site, the browser renders a custom, Chrome-styled "Secure Connection Failed" internal page.

🚀 Getting Started

Since this is built with vanilla web technologies, there are no build steps, bundlers, or dependencies to install!

  1. Download the repository:

  2. Open it: Simply open index.html in your favorite modern web browser (Chrome, Edge, Firefox, Safari).

  3. Start Browsing: Use the Start Page shortcuts or type a URL/search query into the omnibox at the top!

📁 File Structure

  • index.html - The core structure of the Chrome UI (tabs strip, toolbars, menus, and iframe containers).
  • style.css - All styling, including CSS variables for the light/dark themes, layout logic, and the Google start page design.
  • script.js - The logic handling tab management, history tracking, URL normalization, proxy fetching, and UI updates.

⚠️ Limitations & Known Issues

  • Proxy Reliability: Because this relies on free public CORS proxies, loading speeds and success rates are dependent on their uptime. Highly secure sites (like Google or banking sites) may still fail to load due to strict proxy-blocking or complex single-page-app architectures.
  • Iframe Sandboxing: For security, the injected iframes are sandboxed. While scripts and forms are allowed, certain complex pop-ups or top-level frame navigations might be restricted by the host browser.

📜 License

This project is licensed under the GNU General Public License v2.0. Note: This is a clone and is not affiliated with Google.

About

A web-based Google Chrome clone built with vanilla HTML, CSS, and JS. It features a fully functional tabbed interface, omnibox, bookmarks bar, and dark/light mode toggle. By utilizing proxy racing, it seamlessly loads live external web pages inside iframes to bypass CORS. Includes a custom New Tab page with a Google search box and shortcuts.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors