Unable to view content script references in the developer tools window

Question

When I view my extension with the developer tools, I only see the generated background file, background.js; my content script doesn't appear under the content scripts tab. Any ideas why? The relevant part of the manifest looks like this:

"content_scripts": [{
"run_at": "document_end",
"js": ["postMsg.js"],
"matches": ["https://groups.google.com/forum/*"]
}],

postMsg.js gets injected into the page, but never appears in the developer tool window, so I'm unable to debug it.

Community · Accepted Answer · 2017-05-23 12:06:47Z

5

As long as you are on a page that matches the "Match patterns and globs" from your manifest, you will see the content script(s) under the Sources -> Content Scripts pane.
You may need to refresh (F5) the page (and/or your extension, then the page) to see it:

(Click for larger image)
Debug steps

For more information on matching that cryptic number to an extension, see this answer.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Nov 27, 2012 at 5:25

Brock Adams

94k23 gold badges242 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FractalBob Over a year ago

Thanks. I see what I was doing wrong: I needed to reload the developer console AFTER navigating to the Post page.

nyus2006 Over a year ago

Hi, I put down <all_urls> in "matches" so theoretically it would match any valid address. But I am still not seeing my content script under "Content scripts". And I have also tried refreshing(on a mac it's command + r). Any idea???

Sridhar Sarnobat Over a year ago

I did the same thing as FractalBob, but let me paraphrase - you won't initially see anything when you open the inspector. After opening the inspector, then visit the site you want to and the content script will then show up.

Sudarshan · Accepted Answer · 2012-11-27 05:16:25Z

0

content scripts as a js file are never exposed by pages which are injected.. If your intention is debugging of content scripts it can be possible;

Ex:

mycontentscripts.js

var getStyleofbody = document.getElementsByTagName('body')[0].style;

to debug this i would first run this code in console of page that i am going to inject; After i get expected results i will move code to contentscript js file.

enter image description here

However for any errors after injection you can look at developer's console panel for all errors(they are listed there).

enter image description here

Let me know if you are confused

answered Nov 27, 2012 at 5:16

Sudarshan

18.6k7 gold badges56 silver badges62 bronze badges

2 Comments

Brock Adams Over a year ago

Content scripts are not exposed to the page, but they are exposed to the debugger.

Sudarshan Over a year ago

@BrockAdams : Thanks for making it more clear, actually i intend to mean the same ...

acenturyandabit · Accepted Answer · 2018-12-21 20:42:57Z

0

In 2018, if for some reason you've missed it:

Press the >>. From there select content scripts, and you'll be able to see the content scripts.

hf :)

answered Dec 21, 2018 at 20:42

acenturyandabit

1,43816 silver badges29 bronze badges

Collectives™ on Stack Overflow

Unable to view content script references in the developer tools window

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related