title: Replace website background color from Firefox Extension?
body: <p>I'm building a Firefox Extension that, among other things, needs to replace body background color on one website. I'm interested in methods that work primarily on Firefox 4, compatibility with older versions of Firefox is not that important.</p>
  
  <p>I have already done this in Chrome, Opera and Safari extensions, but I'm unable to do the same thing in Firefox extension after several hours of reading and trying various stuff. Please help.</p>
  
  <p>I apologize in advance for such a long post, I tried to shorten it as much as possible.</p>
  
  <p>What I tried so far:</p>
  
  <p><br/></p>
  
  <h2>1. DOMContentLoaded</h2>
  
  <p>This method does replace the color but it's doing it too late, Firefox first shows the original color and than replaces it with my color. It appears that my function is not executed until adsense or facebook widgets from that website do their job. If user has some kind of ad blocker than it works fine, but that obviously doesn't mean anything for my extension.</p>
  
  <pre><code>gBrowser.addEventListener("DOMContentLoaded", my_function, true);
  
  my_function: function(event)
  {
      var doc = event.originalTarget;
      doc.body.style.background = "#f00";
  }
  </code></pre>
  
  <p><br/></p>
  
  <h2>2. Observers</h2>
  
  <p>I tried these three observer types:</p>
  
  <ul>
  <li>chrome-document-global-created</li>
  <li>content-document-global-created</li>
  <li>document-element-inserted</li>
  </ul>
  
  <p>I can't access body element from any of those listed observers.</p>
  
  <pre><code>Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService).addObserver(
  {
      observe: function(aSubject, aTopic, aData)
      {
          var doc = aSubject;
          // doc.location     - contains the url
          // doc          - [object XrayWrapper [object Window]]
          // doc.document     - [object XrayWrapper [object HTMLDocument]]
          // doc.document.body    - null
          doc.document.body.style.background = "#f00";    // this will obviously not work because body is not yet created or I'm looking in the wrong place
      }
  }, "content-document-global-created", false);
  </code></pre>
  
  <p><br/></p>
  
  <h2>3. WebProgressListener with NOTIFY_STATE_DOCUMENT</h2>
  
  <p>From STATE_TRANSFERRING I can't access body, from STATE_STOP it's too late.</p>
  
  <pre><code>browser.webProgress.addProgressListener(this, browser.webProgress.NOTIFY_STATE_DOCUMENT);
  
  onStateChange: function(aWebProgress, aRequest, aFlag, aStatus)
  {
      var doc = aWebProgress.DOMWindow;
  
      if (aFlag &amp; Components.interfaces.nsIWebProgressListener.STATE_TRANSFERRING)
      {
          // doc.document.body    - null
          doc.document.body.style.background = "#f00";    // again this will obviously not work because body is not yet created or I'm looking in the wrong place
      }
      if (aFlag &amp; Components.interfaces.nsIWebProgressListener.STATE_STOP)
      {
          // doc.document.body    - [object XrayWrapper [object HTMLBodyElement]]
          doc.document.body.style.background = "#f00";    // works but the same way DOMContentLoaded does, too slow
      }
  }
  </code></pre>
  
  <p><br/></p>
  
  <h2>4. WebProgressListener with NOTIFY_PROGRESS (or NOTIFY_STATE_REQUEST or NOTIFY_STATE_ALL)</h2>
  
  <p>This does change the color right away, but I'm getting SO MUCH events for every website and resource that user accesses that I'm not comfortable using this for such a simple thing as changing a background color for just one website.</p>
  
  <pre><code>browser.webProgress.addProgressListener(this, browser.webProgress.NOTIFY_PROGRESS);
  
  onProgressChange: function(aWebProgress, aRequest, curSelf, maxSelf, curTot, maxTot)
  {
      var doc = aWebProgress.DOMWindow;
      doc.document.body.style.background = "#f00";
  }
  </code></pre>
  
  <p><br/></p>
  
  <hr>
  
  <p>Is there perhaps any other method where I could access body element as soon as it's created?
  Or maybe some other method to change webpage styling (without involving some other extensions of course)?
  Could I maybe somehow attach NOTIFY_PROGRESS listener to just one website?</p>