0

I'm injecting some JavaScript (JS) code into a pre-existing website with a Google Chrome extension that I'm building.

The JS gets injected every time I reload the extension and the webpage but my CSS doesn't always get applied. Unlike the JS, which I inject into the webpage's DOM using my content script, I apply the CSS using this code:

"content_scripts": [{
      "matches": ["https://aparticularwebsite.com/*"],
      "js": ["js/myContentScript.js"],
      "css": ["css/myCss.css"],
      "all_frames": true,
      "run_at": "document_end"
   }]

Should I also be injecting my CSS into the DOM using the same method that JS gets injected?

For definitions of 'injected script' and 'content script' see the first answer to this question.

Community
  • 1
  • 1
user5508297
  • 805
  • 2
  • 9
  • 24
  • 1
    Do you see it's not injected in devtools inspector? Or just visually? Maybe your css rules have insufficient specificity and get overriden by the site. Or maybe those frames are dynamic so you'll have to inject either manually or try [match_about_blank](https://developer.chrome.com/extensions/content_scripts) in manifest.json. – wOxxOm Aug 07 '16 at 21:42
  • @wOxxOm I'm trying to apply the CSS to elements that I have created myself and injected into the page. Sometimes it works fine and my styling gets applied but, on occasion, it doesn't and when I inspect my elements none of my style rules appear. – user5508297 Aug 07 '16 at 21:53
  • So, to clarify, I can sometimes see that it's not getting injected @wOxxOm – user5508297 Aug 07 '16 at 22:17
  • FYI, the website for "matches": is the Gmail inbox and, unfortunately, it will match the Gmail inbox even when it's still on the loading screen because they share the same url. Perhaps this is/is part of the CSS loading issue? @wOxxOm – user5508297 Aug 07 '16 at 23:42
  • 1
    Well, it can be a bug in Chrome. I always injected styles via js, so I don't know for sure. – wOxxOm Aug 08 '16 at 07:30

0 Answers0