what are content scripts in chrome inspector

google-chrome web-inspector content-script
Kiran picture Kiran · Aug 11, 2012 · Viewed 7.7k times · Source

While this could be a very basic thing, I can't seem to find an answer to this one. I see a lot of discussion about content scripts. When I open web inspector in chrome, and select sources, I see a tab called content scripts. I see a couple of random numbers and a number of scripts and I can't seem to figure out what these are. How are these being shown? where are these coming from? I can't see my server serving any of these.

Answer

Brock Adams picture Brock Adams · Aug 11, 2012

In Google Chrome, content scripts are JavaScript files that are part of browser extensions. They operate on the web page much like regular javascript does, but from a protected scope (Google calls it an "Isolated World").

Content scripts have a few more privileges than ordinary javascript and, for that reason, content-script JS and page JS cannot ordinarily interact with each other.

When looking at that Content Scripts tab, you will see both the scripts added by any extensions (or by userscripts which are compiled into extensions in Chrome), and also content scripts that are built-in parts of the browser, specifically the API that extensions can use.

Content script listing


You can match extensions to those "random numbers" by opening the extensions tab (chrome://chrome/extensions), and activating Developer mode:

Matching extensions

Related questions

Using Chrome's Element Inspector in Print Preview Mode?

I am working on developing a website and need to work on the print view. Typically when I have layout issues I use Chrome's Element Inspector. However this does not exist in print preview mode. Is there a Chrome plugin …

Read More
Chrome Dev Tools - "Size" vs "Content"

When viewing information about stylesheets in the Network tab of Chrome's dev tools, one column specifies both "size" and "content": Can anybody shed light on the difference between these two numbers? On some pages the numbers are close and others …

Read More
How do I find what Javascript is running on certain events?

I'll pick Chrome for this example, but I'm open to a solution from any browser. Use Case: I have an update button on my website that is used to update item quantities in a shopping cart. I'd like to allow …

Read More