title: Safari Extension - Message
body: <p>This is my first Safari extension and thus far I like it quiet a bit. I am trying to add an extension bar that interacts with an injected.js page and toggles items on the pages via the jquery .toggle();</p>
  
  <p>I have been able to load jQuery into the page no issue, however when it comes to sending a message from the extension bar to the injected.js I am falling short. I have spent over 8 hours today reviewing the developer pages on Apple. The only thing I have managed to do is</p>
  
  <p>Extension Bar:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Board Tools&lt;/title&gt; &lt;!-- Extension Bar --&gt;
      &lt;script type="text/javascript" src="jQuery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          const myGlobal = safari.extension.globalPage.contentWindow;
  
      function ToggleBoard(){ 
          myGlobal.test();    
      }
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;input type="button" id="board" value="Board Toggle" onClick="ToggleBoard();"&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Global HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;global page&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
  
          function test() {
              alert("1");
              event.target.page.dispatchMessage("test", "test");
              alert("2");
      }
  
     &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt; &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Injected.js:</p>
  
  <pre><code>function test(msgEvent) {
      alert(msgEvent.name);
  }
  // register for message events
  safari.self.addEventListener("message", test, false);
  </code></pre>
  
  <p>I am able to call the ToggleBoard() function from the extension bar. The ToggleBoard() function can call the test() function from the Global HTML. When the test() function is called on the Global HTML page the fist alert fires, the second does not. I have narrowed it down at least that far. I get the way I am trying to send my message is probably wrong, but that is what is says here: <a href="https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/MessagesandProxies/MessagesandProxies.html#//apple_ref/doc/uid/TP40009977-CH14-SW1" rel="nofollow noreferrer">https://developer.apple.com/library/archive/documentation/Tools/Conceptual/SafariExtensionGuide/MessagesandProxies/MessagesandProxies.html#//apple_ref/doc/uid/TP40009977-CH14-SW1</a></p>
  
  <p>Just to see if it was a mistake on my part or something goofy with the development page I copied the exact code on their page and used just the Global HTML and Injected.js and I still did not get the result I was looking for.</p>
  
  <p>Solved:
  The answer I selected does apply a lot towards the issue I had. It was not the exact answer per-say but it did, along with the comments help me get my code straightened out. In order to get the various extension components to message properly I needed to set the Extension Remote Access to All, and then add URL patterns to the whitelist. My extension only fires on the pages I wanted and I can use messages.</p>