title: Injecting JS functions into the page from a Greasemonkey script on Chrome
body: <p>I have a Greasemonkey script that works just fine in Firefox and Opera. I struggle with getting it to work in Chrome, however. The problem is injecting a function into the page that can be invoked by code from the page. Here's what I'm doing so far:</p>
  
  <p>First, I get a helper reference to the <a href="http://wiki.greasespot.net/UnsafeWindow" rel="noreferrer">unsafeWindow</a> for Firefox. This allows me to have the same code for FF and Opera (and Chrome, I thought).</p>
  
  <pre><code>var uw = (this.unsafeWindow) ? this.unsafeWindow : window;
  </code></pre>
  
  <p>Next, I inject a function into the page. It's really just a very thin wrapper that does nothing but invoking the corresponding function in the context of my GM script:</p>
  
  <pre><code>uw.setConfigOption = function(newValue) {
      setTimeout(setConfigOption, 0, newValue);
  }
  </code></pre>
  
  <p>Then, there's the corresponding function right in my script:</p>
  
  <pre><code>setConfigOption = function(newValue) {
      // do something with it, e.g. store in localStorage
  }
  </code></pre>
  
  <p>Last, I inject some HTML into the page with a link to invoke the function.</p>
  
  <pre><code>var p = document.createElement('p');
  p.innerHTML = '&lt;a href="javascript:setConfigOption(1)"&gt;set config option to 1&lt;/a&gt;';
  document.getElementById('injection-point').appendChild(p);
  </code></pre>
  
  <p>To summarize:
  In Firefox, when the user clicks that injected link, it will execute the function call on the unsafeWindow, which then triggers a timeout that invokes the corresponding function in the context of my GM script, which then does the actual processing. (Correct me if I'm wrong here.)</p>
  
  <p>In Chrome, I just get a "Uncaught ReferenceError: setConfigOption is not defined" error. And indeed, entering "window.setConfigOption" into the console yields an "undefined". In Firebug and the Opera developer console, the function is there.</p>
  
  <p>Maybe there's another way to do this, but a few of my functions are invoked by a Flash object on the page, which I believe makes it necessary that I have functions in the page context.</p>
  
  <p>I took a quick look at the <a href="http://wiki.greasespot.net/Category:Coding_Tips:Interacting_With_The_Page" rel="noreferrer">alternatives to unsafeWindow</a> on the Greasemonkey wiki, but they all look pretty ugly. Am I completely on the wrong track here or should I look more closely into these?</p>
  
  <p><strong>RESOLUTION:</strong> I followed <a href="https://stackoverflow.com/questions/2303147/injecting-js-functions-into-the-page-from-a-greasemonkey-script-on-chrome/2303228#2303228">Max S.' advice</a> and it works in both Firefox and Chrome now. Because the functions I needed to be available to the page had to call back into the regular ones, I moved my whole script to the page, i.e. it is completely wrapped into the function he called 'main()'.</p>
  
  <p>To make the extra uglyness of that hack a little bit more bearable, I could at least drop the usage of unsafeWindow and wrappedJSObject now.</p>
  
  <p>I still haven't managed to get the <a href="http://wiki.greasespot.net/Content_Scope_Runner" rel="noreferrer">content scope runner</a> from the Greasemonkey wiki working. It should do the same and it seems to execute just fine, but my functions are never accessible to <code>&lt;a&gt;</code> elements from the page, for example. I haven't yet figured out why that is.</p>