Menu
I am developing a chrome extension that injects a button onto a page. When this button is clicked, it launches a twitter bootstrap modal. However, the css that is injected with the twitter bootstrap is affecting the pages themselves and I only want them to affect the modal divs. How can I achieve this?
Thank you!
938
Once the manifest, CSS and JavaScript files are ready, head over to chrome://extensions/ from the browser's address bar and enable developer mode. That activates the “Load unpacked” button to add the extension files. It's also possible to toggle whether or not the developer version of the extension is active.
A content script is a part of your extension that runs in the context of a particular web page (as opposed to background scripts which are part of the extension, or scripts which are part of the website itself, such as those loaded using the <script> element).
Page Edit is an extension that let you make changes to any HTML webpage. To work with this add-on, simply open the toolbar popup UI and then click on the big toggle button at the left side.
There is only one true way to do that and it involves LESS
See this answer: https://stackoverflow.com/a/14145510/1060487
Or this one: https://stackoverflow.com/a/15115171/1060487
Both approaches should work fine.
I've experimented with 1 other solution:
http://css-tricks.com/saving-the-day-with-scoped-css/
Which DOES NOT work in Chrome but there is a polyfill here, which doesn't really seem to work that well...
Check the support here: http://caniuse.com/style-scoped
Summary: the LESS route seems to be the best solution right now...
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
