Outils de développement Chrome: <page context> et <top frame>?

Prenons Gmail comme exemple et commencez par regarder le premier menu déroulant:

Liste des cadres

Ce que vous pouvez voir ici sont tous les cadres intégrés dans la page actuelle. Chacune de ces images est en sable. L'utilisation de sandbox signifie qu'il n'y a pas d'accès d'un bac à sable aux autres bacs à sable. Les scripts exécutés dans une image ne peuvent pas accéder aux variables DOM ou JS de l'autre image. Cela est dû à des raisons de sécurité, nous ne voulons pas qu'un script à l'intérieur d'un iframe ait accès à la page dans laquelle il a été incorporé (cela permettrait, par exemple, des annonces intégrées dans un blog de lire ce que vous tapez ou ce que vous gardez dans vos cookies ).

Liste des contextes

Dans la deuxième liste déroulante, nous avons une liste de contextes pour l'image sélectionnée, par exemple, une liste de contextes pour Gmails <top frame> :

Ce sont des bacs à sable créés pour chaque script qui a été injecté par l'extension Chrome à la trame sélectionnée (ces scripts sont appelés « scripts de contenu »). Cependant, cela diffère des bacs de fond de cadre que j'ai mentionnés auparavant. Les scripts injectés par les extensions Chrome ont un accès illimité au DOM de la page à laquelle ils ont été injectés, mais opèrent dans un contexte d'exécution JS distinct appelé monde isolé (n'ont pas accès aux "variables JavaScript ou aux fonctions créées par la page"). Dans ce cas, il est plus important de s'assurer que les scripts provenant de différentes extensions n'interfèrent pas entre eux que sur la sécurité:

Les mondes isolés permettent à chaque script de contenu d'apporter des modifications à son environnement JavaScript sans se soucier de conflit avec la page ou avec d'autres scripts de contenu. Par exemple, un script de contenu pourrait inclure JQuery v1 et la page pourrait inclure JQuery v2, et ils ne seraient pas en conflit les uns avec les autres.

BTW Une partie de l'url après chrome:// représente l'ID de l'extension et l'utilise, vous pouvez trouver le nom de l'extension qui a injecté le code (cochez 'Mode Développeur' sur le chrome: // extensions / page).

Pourquoi avons-nous besoin de cela?

• Vous voudrez peut-être voir les erreurs / console.* Messages générés par un iframe.
• Pendant le débogage de votre extension Chrome, vous voudrez peut-être voir les erreurs / console.* Messages que votre script injecté a produit.
• Vous pouvez exécuter un certain code de la console dans un contexte différent de celui par défaut.