Unable to view content script references in the developer tools window

chrome extension content script
could not load javascript '' for content script.
content script not injected
chrome extension browser action content script
chrome extension console log from content script
chrome extension background vs content script
chrome extension inject script
chrome extension content script html

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.


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)


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

Extending DevTools - Chrome: developer, View featured DevTools extensions. DevTools The DevTools page cannot use most of the extensions APIs directly. Like a content script, a DevTools page can communicate with the background page using Message Passing. For an To postMessage from a devtools panel, you'll need a reference to its window object. However, when debugging is started in Script view, F12 tools always opens in its own window. Click the Unpin button to detach F12 tools from the Internet Explorer instance. To resize a pinned F12 tools session, stretch the upper edge of the window to size.


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.

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

Let me know if you are confused

JS scripts not loading in the Sources window, I can see my script in the network panel, and I know it's served properly because it runs as Undocking dev tools window did not help,. 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)


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 :)

Content scripts, A content script is a part of your extension that runs in the context of a References & Guides the global scope of a content script with let foo or window​.foo = "bar" may However, content scripts get a "clean" view of the DOM. This means: Content scripts cannot see JavaScript variables defined by page  Content script environment DOM access. Content scripts can access and modify the page's DOM, just like normal page scripts can. They can also see any changes that were made to the DOM by page scripts. However, content scripts get a "clean" view of the DOM. This means: Content scripts cannot see JavaScript variables defined by page scripts.


What are browser developer tools?, References & Guides The developer tools usually open by default to the inspector, which if you haven't selected something else to appear in the window. You can make any changes you'd like, but you cannot save your changes. Click on a file to select it and view its contents in the center pane of  I restarted my PC to see if that would help, and it did not. I finally got it to navigate by running IE11 without add-ons and disabling unnecessary add-ons. However, the developer tools still do not work correctly. All I see is the title bar and some icons in the top right. I do not see the toolbar that is supposed to be on the left.


JavaScript Debugging Basics, Requests · Trending Now Report Reference · Using Ooyala Players for Video Cloud Content DOCTYPE html> <html> <head> <meta http-equiv="Content-​Type" To view your messages, open the Web Console panel: IE Developer Tools; In the Developer Tools window, select the Script menu item. Returns a Window object for the primary content window. This is useful in XUL windows that have a browser (or tabbrowser or iframe) with type="content-primary" attribute on it — the most famous example is Firefox main window, browser.xul. In such cases, content returns a reference to the Window object for the document currently displayed in the browser. It is a shortcut for browserRef


Extensions - Debugging, With F12 Developer Tools, learn how to debug an extension's background script, content scripts, and extension pages. The Microsoft Edge (EdgeHTML) DevTools include: An Elements panel to edit HTML and CSS, inspect accessibility properties, view event listeners, and set DOM mutation breakpoints; A Console to view and filter log messages, inspect JavaScript objects and DOM nodes, and run JavaScript in the context of the selected window or frame