dd3dac9cc9
Modifies the messaging layer of devtools to allow for switching communication between frames on a page. When served as a browser extension. Design: - When a page renders, DevTools installs a content script onto it through it's manifest file. The all_frames option is used here to install this script onto every frame in a page. - When Angular is detected, the content script will install a backend script into it's frame. - Each content script / backend script pairing is kept track of in the background script. This pairing represents an angular devtools context in a particular frame. - Angular DevTools is able to ask the background script to list each frame that has been registered on a page. - Angular Devtools is able to ask the background script to "enable" the connection on a particular frame. This enables the messaging between the content script <-> background script <-> devtools page Limitations: - The `inspectedWindow.eval` API is only able to target frames by frameURL. This means some features that integrate with Chrome DevTools like inspect element and open source will not be available when inspecting frames that do not have a unique url on the page. PR Close #53934 |
||
|---|---|---|
| .. | ||
| src | ||
| BUILD.bazel | ||
| index.ts | ||
| README.md | ||
| tslint.json | ||
Angular DevTools Communication Protocol
Angular DevTools injects scripts in the user application page that interact with the framework debugging APIs. The injected scripts interact with the extension via message passing using a statically typed protocol.
This subdirectory contains:
- Declaration of a statically typed message bus
- Implementation of priority aware message bus
- Interfaces that declare the messages exchanged between the extension and the page
We use the PriorityAwareMessageBus to ensure that certain messages have higher priority than others. Because of the asynchronous nature of the property exchange there's a risk that a message response may overwrite the result from a more recent response.
An example is:
- We request the state of the component tree
- We update the state
- We request the state of the properties of a particular component
We don't have guarantees that the response of 1. will arrive before the response of 3. Often the response of 1. is larger and might be delivered after 3. In such a case, it may contain the application state prior to the update and override the state update we received from 3.