Strange Styling Through Injected Stylesheets in Chrome

Strange styling through injected stylesheets in Chrome

Okay I've found the culprit! I've disabled each of my extensions one by one until the page showed correctly. It was the 'CSS Selector Tester'. I think it is a great tool that I often use but it shouldn't screw with my pages when I don't use it!

Interestingly the CSS Selector Tester does not work on the pages where I saw the styling problems. On other pages it works fine.

What is the stylesheet injected by Chrome in local extension pages?

Font-family and size are injected in all extension pages: extension_fonts.css.

The font size differs from a usual html page, which may be a bug in Chromium.

A big extension.css is injected in a ManifestV2 extension options page declared with chrome_style key in manifest.json: "options_ui": {"chrome_style": true, "page": "options.html"}.

ManifestV3 doesn't allow it.

My CSS is not getting injected through my content script

The style sheet is actually injected, but not applied, because other styles override the rules. To get the rules to work, you have some options:

1. Increase the specificity of your CSS rules.

2. Suffix every rule with !important:

   #test {
       margin: 0 10px !important;
       background: #fff !important;
       padding: 3px !important;
       color: #000 !important;
   }
   

3. Inject the CSS via a content script:

   myScript.js:

   var style = document.createElement('link');
   style.rel = 'stylesheet';
   style.type = 'text/css';
   style.href = chrome.extension.getURL('myStyles.css');
   (document.head||document.documentElement).appendChild(style);
   

   manifest.json

   {
     "name": "Extension",
     "version": "0",
     "description": "",
     "manifest_version": 2,
     "permissions": ["tabs", "http://*/*", "https://*/*", "file:///*/*"],
     "content_scripts": [
       {
           "matches": [ "http://*/*", "https://*/*", "file:///*/*"],
           "js": ["myScript.js"],
           "all_frames": true
       }
     ],
     "web_accessible_resources": ["myStyles.css"]
   }
   

   The last key, web_accessible_resources is necessary when manifest version 2 is active, so that the CSS file can be read from a non-extension page.

Flickering during CSS injection in Chrome Extension

Stylish-chrome extension fixed the flicker just by using webNavigation.onCommited event so you should've been already able to fix the issue. However, the problem you experience might be caused by asynchronous reading of the css code from the extension package since you mention web_accessible_resources. In this case cache it in chrome.storage.local or sessionStorage or localStorage. Or consider embedding the CSS inside your content script.

Some [probably redundant] notes on the code you've posted:

1. Don't use DOMSubtreeModified event because it's a) not actually needed - (you can inject elements even before the webpage is parsed) and b) it's ancient/deprecated/slow/bad.

   So the entire content script might be:

   var style = document.createElement('style');
   style.id = "CarbonicEditionStyle";
   style.className = "CarbonicEditionStyle";
   style.type = "text/css";
   style.textContent = "body{background-color: green !important;}";
   (document.body || document.head || document.documentElement).appendChild(style);
   

2. Use runAt: "document_start" in executeScript as by default it's document_idle which occurs usually only when the DOM is loaded and parsed:

   chrome.tabs.executeScript(o.tabId, {runAt: "document_start", code: "......"});
   

3. Consider injecting the CSS directly via insertCSS (not really needed to eliminate the flicker and it won't allow you to disable the injected style but for the sake of completeness):

   chrome.tabs.insertCSS(o.tabId, {runAt: "document_start", code: "body{background....."});
   

4. "matches": ["*://google.com/*"], won't match www.google.com which is used by default so it should be "matches": ["*://*.google.com/*"],
5. google.com isn't the only domain, there are also lots of international domains.

Injected link stylesheet takes precedence over existing styles in IE7+

I think the cause for this is the way IE defines insertBefore. In IE only you may pass only one parameter into the insertBefore method and it will behave the same as appendChild. I think what they do is insert it THEN move it. If they render at the point of insertion then it would be rendering properly.

The only work around I can think of is as follows (which isn't ideal):

    var link = document.createElement('link');
    var style = document.getElementsByTagName('style')[0];
    var newstyle = style.cloneNode(true);
    link.rel = 'stylesheet';
    link.href = 'test.css';
    style.parentNode.insertBefore(link, style);
    style.replaceNode(newstyle);

---

Related Topics