4

I am injecting a bootstrap modal in gmail. For that I need bootstrap.css. I included it in under content_scripts in manifest.json

"content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css":["lib/bootstrap/dist/css/bootstrap.css",
             "css/modal.css"
             ],
      "js": [ "lib/jquery/jquery.min.js",
              "lib/bootstrap/dist/js/bootstrap.min.js"
             ],
    "run_at":"document_end"
    }

But it reduces the font size and distorts menu bar

enter image description here

When i remove the css file , everything looks fine.

One more issue is : bootstrap uses glyphicons but they are not shown because extension look for these fonts under :

https://mail.google.com/mail/u/fonts/glyphicons-halflings-regular.ttf

https://mail.google.com/mail/u/fonts/glyphicons-halflings-regular.woff

I have added these files as web_accessible_resources too. But they still dont work

Siddharth
  • 6,966
  • 2
  • 19
  • 34
  • 1. Try injecting it in an iframe 2. Alternatively modify the CSS to limit the elements' specificity by prepending all selectors in the rules with your modal id 3. The font urls should point to your extension path – wOxxOm Oct 15 '15 at 10:57
  • First option does not sound feasible. For font , would i have to use chrome.extension.getURL() where icons are referenced?? – Siddharth Oct 15 '15 at 11:03
  • Try using the special ids directly in CSS as shown in the linked answer for [Google Chrome Extensions - Can't load local images with CSS](http://stackoverflow.com/a/8864212). – wOxxOm Oct 15 '15 at 11:41
  • Thanks. Fonts are now working. For the distorted ui i was thinking of using scoped style. Would that work? – Siddharth Oct 15 '15 at 13:01
  • that's something you [can google easily](https://google.com/#q=css+style+scoped+browser+support), in short: no. – wOxxOm Oct 15 '15 at 13:06
  • I tried but it didn't work – Siddharth Oct 15 '15 at 13:14
  • for the fonts. bootstrap seems to be loading after your styles and thus overriding them. – Eduardo Chongkan May 28 '16 at 22:40
  • Did you ever figure this out? Having the same problem, where the injected CSS is affecting the page, where I really only want it to apply to my modal and it's contents. – theVinchi Nov 28 '16 at 17:08
  • @theVinchi Yes I resolved it using iframe, it worked perfectly fine. – Siddharth Nov 30 '16 at 06:46
  • @Sid you injected an iframe into the page body and then included your bootstrap CSS in the iframe, right? So your modal will be running in the iframe, right? What is the value of the "src" attribute you use when creating the iframe? – theVinchi Dec 27 '16 at 19:21
  • 1
    @theVinchi Value of src attribute is path to your html(not the drive path), i.e chrome.extension.getURL("path to html inside extension root directory"); For more info : https://developer.chrome.com/extensions/manifest/web_accessible_resources – Siddharth Dec 28 '16 at 08:19

0 Answers0