title: function not defined or permission denied to access object in Greasemonkey
body: <p>I'm working on a Greasemonkey script that injects a button into a chatsystem (Gitter) which allowes you to send default messages. (Not to spam. It's for Admins to send messages like a Code of Conduct).</p>
  
  <p>Let's assume I've injected a button:</p>
  
  <pre><code>&lt;button onclick='setTimeout( function() { showMsg() }, 10 );'&gt;Send default message&lt;/button&gt;
  </code></pre>
  
  <p>Following the advise from this question: <a href="https://stackoverflow.com/questions/5919781/javascript-function-is-defined-but-error-says-function-is-not-found-stran">Javascript: Function is defined, but Error says.. Function is not found ! (Strange)</a> to use <code>setTimeout()</code> because functions defined in GM are not available to the main Window.</p>
  
  <p>For testing purposes, the function is a simple console log:</p>
  
  <pre><code>function showMsg(){
      console.log('showMsg triggered');
  }
  </code></pre>
  
  <p>The problem is that this still returns me a "showMsg is not defined". So following the other adivse provided in the question mentioned earlier, I tried:</p>
  
  <pre><code>unsafeWindow.showMsg = function(){
      console.log('showMsg triggered');
  }
  </code></pre>
  
  <p>This however returns me:</p>
  
  <blockquote>
    <p>Error: Permission denied to access object</p>
  </blockquote>
  
  <p>Strangely enough, it seems that this only occurs when creating a div element and using <code>innerHTML</code> to inject the button into that div. When actually creating a button like this:</p>
  
  <pre><code>var btn = document.createElement('button');
  btn.onclick = function(){ showMsg(); };
  </code></pre>
  
  <p>It works as expected.</p>
  
  <p><strong>Some additional information that might help find an answer:</strong><br/>
  Gitter chat uses an iframe for the chat messages and the message input field. The iframe is on the same server, so there's no Same Original policy issue.</p>
  
  <p>The button is injected into the main body. Here are 2 example's as to how I've tried injecting them.</p>
  
  <p>(Working version)</p>
  
  <pre><code>var iframe, iframeDoc;
  var chatContainer;
  var chatInput, chatText;
  var msgMenu;
  
  $(document).ready(function() {
      iframe = document.getElementById('content-frame');
  
      iframe.onload = function(){
          iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
          chatContainer = iframeDoc.getElementById('chat-container');
          chatInput = iframeDoc.getElementById('chat-input');
          chatText = iframeDoc.getElementById('chat-input-textarea');
  
          loadButton();
      }
  });
  
  function loadButton(){
      var div = document.createElement('div');
      var btn = document.createElement('button');
      var btnText = document.createTextNode('Send default message');
  
      // Lots of CSS here that ads absolute positioning
      // and makes the div float in the middle of the screen
  
      btn.onclick = function(){ showMsg(); };
  
      btn.appendChild(btnText);
      div.appendChild(btn);
  
      div.setAttribute("id", "msgMenu");
  
      document.body.appendChild(div);
      msgMenu = document.getElementById('msgMenu');
      return false;
  }
  
  function showMsg(){
      console.log('showMsg triggered');
  }
  </code></pre>
  
  <p>When changing the loadButton function to this, it's causing the issues mentioned:</p>
  
  <pre><code>function loadButton(){
      var div = document.createElement('div');
  
      div.innerHTML = "&lt;button onclick='setTimeout( function() { showMsg() }, 10 );'&gt;Send default message&lt;/button&gt;";
  
      div.setAttribute("id", "msgMenu");
  
      document.body.appendChild(div);
      msgMenu = document.getElementById('msgMenu');
      return false;
  }
  </code></pre>