title: Create sidebar by manipulating the DOM of the loaded webpage
body: <p>My simple Chrome extension is injecting a DIV at the top of document.body, then you can drag text from your page into the extension. The problem is that I want the extension DIV not to be located at top, but instead be something like a side bar to the left.</p>
  
  <p>In other words I need to know how to programatically rearrange already loaded DOM structure so that all content is moved to the right and horizontally compressed and then the left area is accessible to further manipulations.</p>
  
  <p>One option I was considering was to do this:</p>
  
  <pre><code>tmp = document.body.innerHTML
  document.body.innerHTML = '&lt;table&gt;&lt;tr&gt;&lt;td id=sidebar&gt;&lt;/td&gt;&lt;td&gt;'
     + tmp + '&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;'
  </code></pre>
  
  <p>But this will be inneficient, will cause rerender and may have other undesired side effects.</p>
  
  <p>By the way current version of the extension will inject every page "on load", but this is just a temporary solution, the side bar must be displayed when the extension button is clicked. This is not part of this question, I know how to do that. Just to let you know that the sidebar creation could be done at any time when user chooses to click the button. That's why using <code>innerHTML</code> is not a good option.</p>
  
  <hr>
  
  <p>pageload.js</p>
  
  <pre><code>function allowDrop(ev) {ev.preventDefault()}
  
  function drop(ev) {
      ev.preventDefault();
      var t = 'text', T = Array.prototype.slice.apply(ev.dataTransfer.types)
      if (T.indexOf('text/html') &gt;= 0)
          t = "text/html"
      console.log('text type:', t)
      d1.innerHTML += '&lt;div style="display:inline;border:2px solid #000000;"&gt;'+ev.dataTransfer.getData(t)+'&lt;/div&gt; '
  }
  
  function createDragbar(id) {
      var n = document.createElement('div')
  //  n.style.position = "absolute";
      n.setAttribute('id', id)
      n.style.border = '1px solid #aaaaaa'
      n.style.height = 532
      n.style.background = "teal"
      n.innerHTML = "Drop your text here "
      n.ondrop = drop
      n.ondragover = allowDrop
      document.body.insertBefore(n, document.body.firstChild)
  }
  createDragbar('d1')
  </code></pre>
  
  <hr>
  
  <p>manifest.json</p>
  
  <pre><code>{
      "name": "Yakov's Demo Extension",
      "description": "Just a demo",
      "version": "0.1",
      "permissions": [
          "activeTab"
      ],
      "content_scripts": [{
          "matches": ["http://*/*", "https://*/*", "file://*/*"],
          "js": ["pageload.js"]
      }],
  
      "manifest_version": 2
  }
  </code></pre>