Chrome Dev Tools: <page context> and <top frame>?

Question

What do these drop downs do? I assume they execute console commands in different contexts but I see weird, nonsensical choices when I click them.

Answer 1

Lets take Gmail as an example and start by looking at the first drop down:

List of frames

What you can see here are all frames that are embedded into the current page. Each of these frames is sandboxed. Being sandboxed means that there is no access from one sandbox to the other sandboxes. Scripts executed inside one frame can't access DOM or JS variables of the other frame. This is due to security reasons, we don't want a script inside an iframe to have access to the page it was embedded in (this would allow e.g. ads embedded into a blog to read what you are typing or what you keep in your cookies).

List of contexts

In the second drop down we have list of contexts for selected frame e.g. here is a list of contexts for Gmails <top frame>:

These are sandboxes created for each script that was injected by Chrome extension to the selected frame (these scripts are known as 'content scripts'). However, these are different from the frame sandboxes that I've mentioned before. Scripts injected by Chrome extensions have unlimited access to the DOM of the page they were injected to but operate in a separate JS execution context called isolated world (don't have access to "JavaScript variables or functions created by the page"). In this case it's more about making sure that scripts from different extensions don't interfere with each other than about the security:

Isolated worlds allow each content script to make changes to its JavaScript environment without worrying about conflicting with the page or with other content scripts. For example, a content script could include JQuery v1 and the page could include JQuery v2, and they wouldn't conflict with each other.

BTW Part of the url after chrome:// represents extension ID and using it you can figure out the name of the extension that injected the code (check 'Developer mode' on the chrome://extensions/ page).

Why do we need that?

• You may want to see errors / console.* messages generated by an iframe.
• While debugging your Chrome extension you may want to see errors / console.* messages that your injected script have produced.
• You may want to execute some code from console in context different than the default one.