Inline package tweaks: * Ignore messages from the DevTools browser extension. * Cleanup/clarify README
Inline package tweaks: * Ignore messages from the DevTools browser extension. * Cleanup/clarify README
Brian Vaughn committed
Aug 5, 2019 at 14:00 UTC
baac1dcc52cbb05b3733182930378de6ca22229d
2 files changed
+19
-9
packages/react-devtools-inline/README.md
+14
-8
@@ -74,6 +74,8 @@ const { contentWindow } = iframe;
74
initializeBackend(contentWindow);
75
76
// React application can be injected into <iframe> at any time now...
77
+// Note that this would need to be done via <script> tag injection,
78
+// as setting the src of the <iframe> would load a new page (withou the injected backend).
79
80
// Initialize DevTools UI to listen to the hook we just installed.
81
// This returns a React component we can render anywhere in the parent window.
@@ -91,29 +93,33 @@ Sandboxed `iframe`s are also supported but require more complex initialization.
93
94
**`iframe.html`**
95
```js
94
-import { activate, initialize } from 'react-devtools-inline/backend';
96
+import { activate, initialize } from "react-devtools-inline/backend";
97
98
// The DevTooks hook needs to be installed before React is even required!
99
// The safest way to do this is probably to install it in a separate script tag.
100
initialize(window);
101
102
// Wait for the frontend to let us know that it's ready.
101
-window.addEventListener('message', ({ data }) => {
103
+function onMessage({ data }) {
104
switch (data.type) {
103
- case 'activate':
105
+ case "activate-backend":
106
+ window.removeEventListener("message", onMessage);
107
+
108
activate(window);
109
break;
110
default:
111
break;
112
}
109
-});
113
+}
114
+
115
+window.addEventListener("message", onMessage);
116
```
117
118
**`main-window.html`**
119
```js
114
-import { initialize } from 'react-devtools-inline/frontend';
120
+import { initialize } from "react-devtools-inline/frontend";
121
116
-const iframe = document.getElementById('target');
122
+const iframe = document.getElementById("target");
123
const { contentWindow } = iframe;
124
125
// Initialize DevTools UI to listen to the iframe.
@@ -126,9 +132,9 @@ const DevTools = initialize(contentWindow);
132
iframe.onload = () => {
133
contentWindow.postMessage(
134
{
129
- type: 'activate',
135
+ type: "activate-backend"
136
},
131
- '*'
137
+ "*"
138
);
139
};
140
```
\ No newline at end of file
packages/react-devtools-inline/src/frontend.js
+5
-1
@@ -16,7 +16,11 @@ import type { Props } from 'src/devtools/views/DevTools';
16
export function initialize(
17
contentWindow: window
18
): React$AbstractComponent<Props, mixed> {
19
- const onMessage = ({ data, origin, source }) => {
19
+ const onMessage = ({ data, source }) => {
20
+ if (source === 'react-devtools-content-script') {
21
+ // Ignore messages from the DevTools browser extension.
22
+ }
23
+
24
switch (data.type) {
25
case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
26
// This is the only message we're listening for,