StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can a chrome extension add a floating bar at the bottom of pages?
text
Body
copied!<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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload