google-chromebrowserhttpwebrequestframetoplevel

What are Top-Level Frames in web browsers?


I'm creating a Chrome Web Extension, which uses the chrome.webRequest API to intercept and alter HTTPS requests.

Within their documentation, Google talk about different request types. One of these types is main_frame, which is a request for "a document that is loaded for a top-level frame".

To me this implies that Chrome treats everything as an iframe, but that doesn't seem right. What is the meaning of the "top-level frame" terminology?


Solution

  • The frame terminology is used to describe part of the Chrome browser's rendering process. Please see this article on Rendering Architecture for more information.

    From the article, a frame contains:

    1. DOM state,
    2. CSS,
    3. Canvases,
    4. External resources, such as images, video, fonts, and SVG.

    Therefore, a frame is a complete HTML document plus the document's URL.

    It's actually correct to consider everything as an iframe, because that's how the Chrome browser views web pages when it's rendering them. The "top-level-frame" is the uppermost frame in a "frame hierarchy", and contains the information retrieved from the initial URL request. Any other frames, for example, iframes, are child frames of this "top-level-frame".

    As an interesting aside, for performance purposes, frames from different websites are dealt with by different rendering processes. This is why your main web page (top-level-frame) can load quickly, whilst your iframe (child-frame) takes a few seconds.