Question

I am creating a chrome extension that needs to inject a floating element (i.e position:fixed)
at the bottom of pages . My requirements are:

• I need to access elements inside it from a content script.
  This is because I attach events to buttons so the user can perform actions on the current tab from the floating bar.
• I want it’s styles to remain as independent from styles of the current page.

So far I have tryed three solutions and came up with nothing.

1. content script injecting a fixed html element.
   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.

2. content script injecting an iframe.
   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 all_frames: true).

3. Extending the Devtool panel
   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.

Please advise.

Answer 1

As Sudarshan commented, an iframe is the best practice here.

in order to run a script within the iframe I simply included the iframe.html and script.js within my plugin. In my content script I got the iframe with chrome.extension.getURL('iframe.html') (only background script can access this API so I used Message Passing) the script was included as a relative script tag within the iframe like so: <script src="script.js"></script>

The surprising part for me was that although script.js was not included in the manifest, It can still access chrome api and, more importantly in my case, send messages to the background script.