From baac1dcc52cbb05b3733182930378de6ca22229d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 5 Aug 2019 14:00:18 -0700
Subject: [PATCH] Inline package tweaks: * Ignore messages from the DevTools
 browser extension. * Cleanup/clarify README

---
 packages/react-devtools-inline/README.md      | 22 ++++++++++++-------
 .../react-devtools-inline/src/frontend.js     |  6 ++++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index c678f2c5f0687..23db9ca30ff8b 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -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.
@@ -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.
@@ -126,9 +132,9 @@ const DevTools = initialize(contentWindow);
 iframe.onload = () => {
   contentWindow.postMessage(
     {
-      type: 'activate',
+      type: "activate-backend"
     },
-    '*'
+    "*"
   );
 };
 ```
\ No newline at end of file
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 7398254a84530..b64363014a198 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -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,