How to inspect source code of a Chrome extension content script in devtools?

Question

I'm trying to navigate to my chrome extension source from the developer tools but I can't locate it under the Sources tab. I can see its presence from the console log message showing up in the console output pane with the following entry

chrome-extension://<id>/amazon_invoice.js

But clicking on that just opens up a static source view of the javascript as a text file not a debuggable interactive one. How can I locate my content scripts to continue development on them from where I left off when I restart my development session?

Answer 1

So the way you can bring up these scripts is by diving into the other options beyond the Page and Filesystem entries in the Sources view. Beyond those you'll find

• Overrides
• Content scripts
• Snippets

Once you select that you'll find all currently loaded plugins and any content scripts they expose. Just double click the listed file and you'll see it in the debuggable sources editor.

Note: if you fail to see your content script in the tree list then the matches entries within your manifest.json file failed to detect the current page's url properly. You'll need to update that regex list and prototype there till the match is secured.