Skip to content

Commit

Permalink
Inline package tweaks:
Browse files Browse the repository at this point in the history
* Ignore messages from the DevTools browser extension.
* Cleanup/clarify README
  • Loading branch information
Brian Vaughn committed Aug 5, 2019
1 parent dc8580e commit baac1dc
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 9 deletions.
22 changes: 14 additions & 8 deletions packages/react-devtools-inline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ const { contentWindow } = iframe;
initializeBackend(contentWindow);

// React application can be injected into <iframe> at any time now...
// Note that this would need to be done via <script> tag injection,
// as setting the src of the <iframe> would load a new page (withou the injected backend).

// Initialize DevTools UI to listen to the hook we just installed.
// This returns a React component we can render anywhere in the parent window.
Expand All @@ -91,29 +93,33 @@ Sandboxed `iframe`s are also supported but require more complex initialization.

**`iframe.html`**
```js
import { activate, initialize } from 'react-devtools-inline/backend';
import { activate, initialize } from "react-devtools-inline/backend";

// The DevTooks hook needs to be installed before React is even required!
// The safest way to do this is probably to install it in a separate script tag.
initialize(window);

// Wait for the frontend to let us know that it's ready.
window.addEventListener('message', ({ data }) => {
function onMessage({ data }) {
switch (data.type) {
case 'activate':
case "activate-backend":
window.removeEventListener("message", onMessage);

activate(window);
break;
default:
break;
}
});
}

window.addEventListener("message", onMessage);
```

**`main-window.html`**
```js
import { initialize } from 'react-devtools-inline/frontend';
import { initialize } from "react-devtools-inline/frontend";

const iframe = document.getElementById('target');
const iframe = document.getElementById("target");
const { contentWindow } = iframe;

// Initialize DevTools UI to listen to the iframe.
Expand All @@ -126,9 +132,9 @@ const DevTools = initialize(contentWindow);
iframe.onload = () => {
contentWindow.postMessage(
{
type: 'activate',
type: "activate-backend"
},
'*'
"*"
);
};
```
6 changes: 5 additions & 1 deletion packages/react-devtools-inline/src/frontend.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,11 @@ import type { Props } from 'src/devtools/views/DevTools';
export function initialize(
contentWindow: window
): React$AbstractComponent<Props, mixed> {
const onMessage = ({ data, origin, source }) => {
const onMessage = ({ data, source }) => {
if (source === 'react-devtools-content-script') {
// Ignore messages from the DevTools browser extension.
}

switch (data.type) {
case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
// This is the only message we're listening for,
Expand Down

0 comments on commit baac1dc

Please sign in to comment.