There's a Chrome extension consisting of many .js files and its manifest.json lists some of them inside content_scripts
section and some of them inside background
section
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content/interestingScript.js"
"match_about_blank": true,
"all_frames": true
},
],
"background":
{
"scripts": ["background/background.js"]
},
I switch Chrome into developer mode and add this extension. The extension is fully working as expected. I want a breakpoint set onto some piece of code inside interestingScript.js
which I surely know is executed during extension operation.
When I get to extension tile at chrome://extensions/?id=longRandomString it says I can inspect the background page and there's a link. I follow the link and get into DevTools and there I get to "Sources" tab. The background.js
is listed on the left but interestingScript.js
is not listed there.
I tried to follow this answer and bring up "Content Scripts" tab but the script is not there either. I tried to get to "FileSystem" tab and add the folder where the sources are stored and the script is added but breakpoints are not hit. I tried to add "debugger;" line into that code I'm sure is executing but again nothing happens. I also tried to insert alert()
calls in that code - they have no effect even after I click "reload" on the extension page (at chrome://extensions/?id=longRandomString)
I don't get it.
How do I get this code debugged in Chrome DevTools? What am I doing wrong?