Debugging injected content scripts

Question

I have a lot of code that I only want to run when the user clicks the extension icon. I'd rather not have it run for every tab opened. Thus using the content_scripts entry in the manifest file isn't the best option. However, I haven't been able to see the content scripts show up in the list of scripts in the developer tools when I programatically inject scripts. I'm fine developing for now with content scripts, but at some point I'd like to avoid it.

I run logging all over the place, and perform message passing as well. So I know very well that these scripts are successfully getting injected and running, but they simply fail to show up in the file list.

In code, the following works just dandy (in the manifest):

 {
   // ...
   "content_scripts": [{
      "matches": ["<all_urls>"],
      "css": ["style/content.css"],
      "js": [
       "closure/goog/base.js",
       "closure/goog/deps.js",
       "util.js",
       "AddressRE.js",
       // ...
       "makeRequests.js"
     ]
   }]
 }    

Performing the following after an onClick does not:

 function executeNextScript(tabId, files, callback) {
     chrome.tabs.executeScript(tabId, {
         file: files.pop()
     }, function () {
         if (files.length)
             executeNextScript(tabId, files, callback);
         else
             callback();
     });
 }    


 function executeScripts(tabId, callback) {
     var files = [
         "closure/goog/base.js",
         "closure/goog/deps.js",
         "util.js",
         // ...
         "makeRequests.js"
     ];
     executeNextScript(tabId, files.reverse(), callback);
 }

Answer 1

You can use the debugger JavaScript keyword to set breakpoints in your code.