Is it possible to hide extension resources in the Chrome web inspector network tab?

Question

When I'm viewing the downloaded resources for a page in the Chrome web inspector, I also see the HTML/JS/CSS requested by certain extensions.

In the example above, indicator.html, indicator.js and indicator.css are actually part of the Readability Chrome extension, not part of my app.

This isn't too big a deal in this particular situation, but on a more complex page and with several extensions installed, it can get quite crowded in there!

I was wondering if there was a way to filter out any extension-related resources from this list (i.e. any requests using the chrome-extension:// protocol).

Does anyone know how I could achieve this?

Python

For anyone looking for an answer, please go to chrome bug tracker and let the chrome dev team know we need this: bugs.chromium.org/p/chromium/issues/detail?id=239401 – Scaremonger

It is really crazy that this is not possible after 10 years. So annoying if you have multiple extensions. – Spectrophotometer

Answer 1

Not quite the solution I was after (I'd have preferred a global setting), but there is now a way to filter out requests from extensions, as mentioned by a commenter on the issue I originally opened.

In the network tab filter box, enter the string -scheme:chrome-extension (as shown below):

This is case-sensitive, so make sure it's lowercase. Doing this will hide all resources which were requested by extensions.

Python

The correct syntax for this is "-scheme:chrome-extension". The "s" is lowercase. This is important because devtools is case-sensitive on this. – Outlandish

@elusive-platypus You're right, thanks! I'm sure it wasn't case-sensitive when I first tried it (copy/pasted from the original comment), so either the dev tools filter code has changed, or I've just been typing it in lowercase anyway all this time without realising... anyway, I've edited the answer now. – Python

Is there a way to add multiple values? For example, I tried -scheme:data, which hides base64 encoded images (e.g. added by Lastpass when you focus on inputs). How can I use both -scheme:data and -scheme:chrome-extension? – Unjust

To answer my question: just use a space. e.g. -scheme:chrome-extension -scheme:data. What's nice is the hints from Chrome, so after you type -scheme:, it will show you choices. – Unjust

Do you know a solution to make that filter as default behaviour? – Maura

@MuratCorlu As far as I'm aware there is currently no way to make this the default behaviour (although as far as I'm concerned it should be). – Python

@MarkBell can you please update the string to "-scheme:chrome-extension " from "-scheme:chrome-extension :" by removing the extra space and colon – Organizer

@Organizer The colon is just there to indicate that you enter the string as shown in the example screenshot, not as part of the string itself. However, I can see how this might have been confusing; hopefully my latest edit makes this clearer. – Python

@blackpla9ue any idea why -f works here? What is it actually doing? – Parcae

it works!, but awesome will be to have it in settings or behind some flag – Capon

N.B. this does not fix the "bytes transferred" – Melchor

It's not hiding extension requests made to a normal public URLs, e.g. to Google Fonts and such. – Dressage

-f does no magic. It's a just text filter that excludes the requests that contain the f keyword. It cannot filter out the extension resources if the extension resources don't contain the f keyword. – Bissau

This doesn't filter out everything. For example, the injected JS from Pocket extension still remains: chrome-extension://niloccemoadcdkdjlinkgdfekeahmflj/pages/injector/content.js – Dietary

Answer 2

I know this is a bit old thread. For anyone who needs this feature, it is finally available in Chrome update 117.

Polivy

This should be the accepted answer since the built-in setting the questioner was looking for has arrived in Chrome and there is no longer a need to use filters as a workaround. – Chainman

Answer 3

Solution 1: Just enter -is:service-worker-initiated in Network field

Solution 2: enter domain:example.com

... there is no built-in way to permanently disable specific network requests. However, you can install a browser extension like uBlock Origin or Adblock Plus to permanently block unwanted network requests like Google Ads. These extensions offer extensive filter lists that allow you to block specific scripts and advertisements.

Patrol

-f does no magic. It's a just text filter that excludes the requests that contain the f keyword. It cannot filter out the extension resources if the extension resources don't contain the f keyword. And it also filters out the normal requests. – Bissau

Answer 4

Was having the same question when my extension adds a lot of noise in the network tab.

Some extensions also fire a lot of data like data:text/image etc, you can append more filter with - like:

-scheme:chrome-extension -scheme:data

Another way to get the http/https requests is to just use scheme:https without - because the resources that extensions request are usually from their local bundle:

scheme:https

Boutonniere

scheme:https is the best solution. – Forster

Answer 5

An Incognito Window, can be configured to include or exclude extensions from the extensions page of Chrome settings.

Beaubeauchamp

True, but I have a few extensions I actually need to use during development; plus, incognito windows won't remember any login details or autocomplete any form inputs, both of which are features I really need when testing web interfaces. You can stop any extension resources appearing easily enough by just creating a fresh user profile with no extensions installed (and you'll still have working autofill, unlike an incognito window). However, this still doesn't help if you have extensions you use during the dev process. – Python

@MarkBell I think once you session in with an incognito window, it will keep your session until you close it. Thank you for the original tip though, this is helpful! Upvote! – Lechery

It is possible to allow extensions in Incognito, so this might not always work. – Satyriasis

Answer 6

One alternative is to go to "Network Request blocking" tab and add "chrome-extension:" to the list, thus extension requests will be blocked and coloured red so it's easy to visually filter them out.

Gab

Is "Network Request blocking" a standard tab in Chrome's developer tools, or is it added by an extension? – Rickierickman

@Mr.LanceESloan it's standard, not added by extensions. it's in the same place where the "Console" tab is, that is in the bottom of the Dev Tools window. more info here learn.microsoft.com/en-us/microsoft-edge/… – Gab

Answer 7

No more manually filtering it out with a Skim filter.
Now you have an option to check Hide the chrome extensions URLs

Sturgeon

Answer 8

you can simply enable this option and requests from extension will be group.

Update: It can only group requests that create by the extension that draw iframe, such as cVim

Atchison

Incorrect. This does not catch requests from a content script in the main frame. – Nicolette

@Nicolette You are right, but it would be a possible and simplest solution if an extension load script in iframe, just like the pic I post – Borlow