title: How can a chrome extension add a floating bar at the bottom of pages?
body: <p>I am creating a chrome extension that needs to inject a floating element (i.e <code>position:fixed</code>)
  at the bottom of pages . My requirements are: </p>
  
  <ul>
  <li>I need to access elements inside it from a content script.<br/>
  This is because I attach events to buttons so the user can perform actions on the current tab from the floating bar.</li>
  <li>I want it's styles to remain as independent from styles of the current page.</li>
  </ul>
  
  <p>So far I have tryed three solutions and came up with nothing.</p>
  
  <ol>
  <li><p><strong>content script injecting a fixed html element</strong>.<br/>
  The problem with this solution is that the style of the page and the style of my element would effect each other thus resulting in web pages affecting the style of my element an vice versa.</p></li>
  <li><p><strong>content script injecting an iframe</strong>.<br/>
  The problem here was it is impossible to access elements inside the iframe from the content script that created the iframe and on the other hand chrome extensions do not allow running content scripts inside a dynamically injected iframes (even when using <code>all_frames: true</code>).</p></li>
  <li><p><strong>Extending the Devtool panel</strong><br/>
  This did not fit my needs since I needed my panel to show on every page. e.g the user can preform an action that opens several tabs and have all of them have my element. in the devtool panel my user would then have to open devtoold in all tabs manually.</p></li>
  </ol>
  
  <p>Please advise.</p>