title: How to postMessage into iFrame?
body: <p>I am developing a Chrome extension to use with my own Web-application, processing Web-pages (including cross-domain ones), loaded into <code>iFrame</code> on my application's main page. So I have to send message, containing the URL of the page to be processed, from my main page to the content script, injected into the target <code>iFrame</code> to get access to the processed page's window.</p>
  
  <p>I try to implement the approach, described <a href="https://stackoverflow.com/a/11326942/4007869">here</a>. Below are the essential parts of all files involved:</p>
  
  <p><code>index.html</code>:</p>
  
  <pre><code>...
  &lt;head&gt;
      ...
      &lt;script type="text/javascript" src="base.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;input type="text" id="page_url"&gt;&amp;nbsp;&lt;input type="button" id="get_page" value="Get page"&gt;
      &lt;/div&gt;
      &lt;iframe id="cross_domain_page" src=""&gt;&lt;/iframe&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><code>base.js</code>:</p>
  
  <pre><code>(function() {
      "use strict";
      function pageProcessing() {
          let urlButton = window.document.getElementById("get_page");
          urlButton.addEventListener("click", () =&gt; {
              let url = window.document.getElementById("page_url").value;
              window.postMessage(
                  {
                      sender: "get_page_button1",
                      message: url
                  },
                  "*"
              );
              window.postMessage(
                  {
                      sender: "get_page_button2",
                      message: url
                  },
                  "*"
              );
          });
      }
      window.document.addEventListener('readystatechange', () =&gt; {
              if (window.document.readyState == 'complete') {
                  pageProcessing();
              }
          }
      );
  })();
  </code></pre>
  
  <p><code>manifest.json</code>:</p>
  
  <pre><code>{
    "manifest_version": 2,
    "name": "GetPage",
    "version": "0.1",
    "content_scripts": [
      { "js": ["main.js"], "matches": ["&lt;all_urls&gt;"] },
      { "js": ["frame.js"], "matches": ["&lt;all_urls&gt;"], "all_frames": true, "match_about_blank": true }
    ],
    "permissions": ["activeTab"]
  }
  </code></pre>
  
  <p><code>main.js</code>:</p>
  
  <pre><code>(function() {
      "use strict";
      window.isTop = true;
  })();
  </code></pre>
  
  <p><code>frame.js</code>:</p>
  
  <pre><code>(function() {
      "use strict";
      window.addEventListener("message", (event) =&gt; {
          if (event.data &amp;&amp;
              event.data.sender == "get_page_button1") {
              if (window.isTop) {
                  alert("Main window alert");
              } else {
                  alert("Frame window alert 1");
              }
          }
      });
      if (!window.isTop) {
          window.addEventListener("message", (event) =&gt; {
              if (event.data &amp;&amp;
                  event.data.sender == "get_page_button2") {
                  alert("Frame window alert 2");
              }
          });
      }
  })();
  </code></pre>
  
  <p>The problem is that when I click "get_page" button the only alert I see is the main window alert. As for my understanding it means that the message, posted from the main window, does not reach the content script, injected into <code>iFrame</code>.</p>
  
  <p>What is wrong with my script and how to fix the problem?</p>