|
|
@@ -31,7 +31,7 @@ The extension follows a standard Chrome DevTools extension architecture:
|
|
|
|
|
|
1. When a page loads, `content-script.js` injects `bridge.js` into the page.
|
|
|
2. `bridge.js` creates the `window.__THREE_DEVTOOLS__` global object.
|
|
|
-3. When the DevTools panel is opened, `panel.js` connects to `background.js` (`init`) and immediately requests the current state (`request-initial-state`).
|
|
|
+3. When the DevTools panel is opened, `panel.js` connects to `background.js` (`init`) and immediately requests the current state (`request-state`).
|
|
|
4. `background.js` relays the state request to `content-script.js`, which posts it to `bridge.js`.
|
|
|
5. `bridge.js` responds by sending back observed renderer data (`renderer` message) and batched scene data (`scene` message).
|
|
|
6. Three.js detects `window.__THREE_DEVTOOLS__` and sends registration/observation events to the bridge script as objects are created or the library initializes.
|
|
|
@@ -51,10 +51,10 @@ The bridge acts as the communication layer between the Three.js instance on the
|
|
|
- If it's a scene, the bridge traverses the entire scene graph, collects data for the scene and all descendants, stores them locally, and sends them to the panel in a single `'scene'` batch message.
|
|
|
|
|
|
4. **State Request Handling**:
|
|
|
- - When the panel sends `request-initial-state` (on load/reload), the bridge iterates its known objects and sends back the current renderer data (`'renderer'`) and scene data (`'scene'` batch).
|
|
|
+ - When the panel sends `request-state` (on load/reload), the bridge iterates its known objects and sends back the current renderer data (`'renderer'`) and scene data (`'scene'` batch).
|
|
|
|
|
|
5. **Message Handling**:
|
|
|
- - Listens for messages from the panel (relayed via content script) like `request-initial-state`.
|
|
|
+ - Listens for messages from the panel (relayed via content script) like `request-state`.
|
|
|
|
|
|
### Panel Interface (`panel/`)
|
|
|
|
|
|
@@ -71,7 +71,7 @@ The panel UI provides the visual representation of the Three.js objects:
|
|
|
|
|
|
## Communication Flow
|
|
|
|
|
|
-1. **Panel ↔ Background ↔ Content Script**: Standard extension messaging for panel initialization and state requests (`init`, `request-initial-state`).
|
|
|
+1. **Panel ↔ Background ↔ Content Script**: Standard extension messaging for panel initialization and state requests (`init`, `request-state`).
|
|
|
2. **Three.js → Bridge**: Three.js detects `window.__THREE_DEVTOOLS__` and uses its `dispatchEvent` method (sending `'register'`, `'observe'`).
|
|
|
3. **Bridge → Content Script**: Bridge uses `window.postMessage` to send data (`'register'`, `'renderer'`, `'scene'`, `'update'`) to the content script.
|
|
|
4. **Content Script → Background**: Content script uses `chrome.runtime.sendMessage` to relay messages from the bridge to the background.
|
Mr.doob