How to Find Source of Injected Stylesheets in Chrome?

Developer Tools is the best way to analyze elements on a webpage and find the source code. Generally, you can find all CSS styles with link to the source file under “Elements” section. However, sometime there will be styles applied from “Injected Stylesheets” with no source link. If you wonder how to find these codes and from where they appear on the webpage, here is the answer.

Injected Stylesheet in Chrome Developer Tools

The CSS on the webpage can come from different sources. The primary sources are inline codes and separate CSS files hosted on the same site’s server. While inline CSS is used for individual element level, CSS files are used for common elements used on the site level like font size, font family, etc. In addition to CSS from the site, you can find two more stylesheets in the “Elements” section of the below screenshot.

• User agent stylesheet – these are the default styles from Chrome browser and will be applied when there are no eligible styles found from the site for elements.
• Injected stylesheet – these are the codes injected from third-party resources outside the webpage.

The problem with injected styles is that you can’t edit them in the Developer Tools. If these codes change the layout, the only option for you is to find its source and disable so that there will be no CSS injected when the browser renders the page.

Finding Source of Injected Stylesheet

In the above screenshot, you can see the injected stylesheet adds display: none !important; to the element and completely removes it from the page. Since this affects rendering of the webpages in Chrome, you need to find the source of injection and disable them to view the webpages properly.

1. Disable All Extensions

Disabling all installed extensions is the first thing you should do before trying any other analysis.

• Go to chrome://extensions URL in Chrome address bar. Alternatively, click on vertical three dots icon and select “More Tools > Extensions” from the menu list.

• Disable the switch against each installed extension and disable all of them.

• Now reload the webpage and check the hidden elements are visible and there are no injected stylesheet in Developer Tools section. As you can see there are two elements for sharing and liking visible now with no injected stylesheet.

It gives you an overall idea that one of the installed extensions in Chrome is injecting stylesheet dynamically when the browser renders webpages. The next step is to enable the extensions one by one and narrow down the extension that causing the issue for you. In our case, it is Adblock Plus extension which is blocking the elements by injecting “display: none !important;” CSS code.

If you face problems after installing an extension, then you can first disable the newly installed extension and check if that resolves the problem. Here are some of the Chrome extensions that can potentially inject stylesheets to hide elements on webpages.

• Most of the adblocker extensions
• Content blocking and social icons blocking extensions
• CSS and design analyzer extensions

Though these extensions are meant for good intention, you can simply disable them and find alternates when you face problems with them. If adblockers hide social buttons, you can add the sites in the whitelist settings and allow them to load.

2. Use Incognito Mode

By default, Chrome will disable all extensions when you open pages in incognito mode. Therefore, opening the page in incognito mode is one of the quick ways to check if the extensions are causing the problem. However, if you have allowed the extensions to work in incognito mode then the extension will continue to inject stylesheet in incognito mode also. When you are in Chrome extensions page, click on “Details” button of the extension which you suspect is injecting stylesheet. Alternatively, you can click on the extension icon next to address bar and select “Manage Extension” option by clicking on the three vertical dots icon against the extension name.

This will take you to the extension’s settings page where you can check whether you have allowed the extension in incognito mode or not. If allowed, disable the extension and reload the page in incognito mode to see the page without any injected stylesheets.

In this way you can continue using the extension in normal mode and disable them in incognito mode.

3. Check Domains Under Network

If extensions did not cause problem, then you can do further analysis from the Developer Tools section.

• Go to “Network” tab and then refresh the page to reload all the elements.

• Right click on the header where it shows name, status, type, etc. You will see a huge list and select “Domain” from the list to enable that column in the result.

• Filter the result by CSS or sort the results based on “Type” column to find all the stylesheets loaded on the page.

• Now check which domain is loading stylesheets on the page to find how the CSS is loaded on the page.

This will be useful if the injected code is loaded as separate stylesheet. Unfortunately, this does not help in our case for finding the adblocker extension.

4. Check Content Scripts Under Sources

The next option is to check under “Sources” tab. Go to “Content scripts” section and check if you find any third-party scripts are loaded which are not related to the page you are viewing. In our case, the adblocker extension loads a script which you can see under “Content scripts” section. You can relate the extension from the scripts seen here to disable them and remove injected stylesheet in Chrome.

FAQ on Injected Stylesheet in Chrome