title: Addon sdk open new tab with pre-appended image/html
body: <p>In firefox addon, I have main.js code :</p>
  
  <pre><code>var button = ToggleButton({
    id: "ee-button",
    label: "EE button",
    icon: {
      "16": "./icon-16.png",
      "32": "./icon-32.png",
      "64": "./icon-64.png"
    },
    onChange: captureVisibleTab
  });
  </code></pre>
  
  <p>And within this file :
  (Ref : <a href="https://gist.github.com/nelix/10700949" rel="nofollow">Tab screenshot</a>)</p>
  
  <pre><code>function captureVisibleTab() {
    .
    . 
    .
    .
    var canvas = contentDocument.createElement('canvas');
    canvas.style.maxwidth = region.width + "px";
    canvas.style.maxheight = region.height + "px";
    canvas.width = region.width;
    canvas.height = region.height;
    var ctx = canvas.getContext('2d');
    ctx.clearRect(region.x, region.y, region.width, region.height);
    ctx.drawWindow(contentWindow, region.x, region.y, region.width, region.height, backgroundColor);
    var url = canvas.toDataURL(); 
  
    tabs.open({
    url: self.data.url("test.html"),
    isPinned: false,
    onOpen: function onOpen(tab) {
    },
    onReady: function(tab)
    {
      console.log('canvas : ' + (JSON.stringify(url)) );
      tab.attach({
      contentScript: 'document.body.style.border = "5px solid red"; document.body.appendChild("Test")'
      });
    }
    });  
    return url;
  }
  </code></pre>
  
  <p>I need to open a new tab with this image appended in the html.<br>
   * Tried : window.open => window not defined<br>
   * Tried :  contentScript:'document.body.style.border = "5px solid red";' => works<br>
   * Tried : contentScript: 'document.body.style.border = "5px solid red"; document.body.appendChild("Test")'  => error :</p>
  
  <pre><code>  Message: TypeError: Argument 1 of Node.appendChild is not an object.
    Stack:   @javascript:document.body.style.border = "5px solid red"; document.body.appe
  ndChild("Test"):1:47
  </code></pre>