Why is chrome.devtools.network "undefined"?

Question

I'm trying to create an extension that logs all network events. This is the code:

Manifest.json:

{
  "name": "My extension",
  "version" : "1.0",
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
 "devtools_page": "devtools.html",
 "browser_action": {
    "default_title": "Get it",
    "default_icon" : "icon.png"
  },
  "manifest_version": 2
}

background.js:

chrome.devtools.network.onRequestFinished.addListener(function(request) {});

What's the problem? I tried a lot of things, it doesn't seem like any scripts that I link in devtools.html is getting picked up at all. No logs, no nothing. Only the background.js is doing something, and it doesn't seem to support chrome.devtools ?

Solution

chrome.devtools.network is only available within a devtools page. From the documentation of the devtools API (third list item):

The chrome.devtools.* API modules are available only to the pages loaded within the Developer Tools window. Content scripts and other extension pages do not have these APIs. Thus, the APIs are available only through the lifetime of the Developer Tools window.

If you need the information in the background page, have a look at this answer (full code included) for setting up a communication channel: Chrome Devpanel Extension Communicating with Background Page.

Comments

[Rob W]

@Blub No you're not. I see chrome.devtools.... appearing in background.js, while it belongs to devtools.js.

[Blub]

Alright, I just realized the same thing but it still doesn't work. I'll make another picture..

[Rob W]

@Blub The file name does not matter. By saying that the code belongs to devtools.js, I implied that the code must be run in the context of the devtools page, ie. devtools.html.

[Blub]

Well as you can see from the picture, the devtools.js is included in devtools.html.

[Rob W]

@Blub But you looked for error messages at the background page. If you want to see error messages of a devtools page, follow the following steps: 1. Open devtools for any page. 2. Undock it if not already done. 3. Open another devtools instance within the devtools instance (press F12 for instance). If you want to fiddle within a devtools page, change the context of the console to devtools.html (this can be done at the bottom of a devtools window, default is <page context>).

[Blub]

well it doesnt work for me, and there is no page context with the correct id available down there. If I press F12 in the undocked devtool instance, it just closes it. I already spent all day on this, believe it or not. Here is the project if you or anoyne else wants to try it. Could be that my Chrome is bugged out I suppose. dl.dropbox.com/u/700060/getFullWebsite.tar.gz

[Rob W]

@Blub Your devtools page ( [yourExtension.html]() ) contains <script src="yourExtensionName.js"</script>. This must be <script src="yourExtensionName.js"></script> (notice the closing > after script src="..."!). And the event listener in devtools.js has no content. Put an alert dialog in it and you'll see that the extension will then be working, actually. Lastly, whenever you refresh your extension containing a devtools page, make sure that you close and re-open the devtools window, in order to see the changes.

[mercury0114]

so how to give a page loaded in a chrome tab devtools access, so that inside the listener for that page chrome.devtools.network.getHAR() function could be called?