15

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 ?

Blub
  • 13,014
  • 18
  • 75
  • 102

1 Answers1

11

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.

Community
  • 1
  • 1
Rob W
  • 341,306
  • 83
  • 791
  • 678
  • @Blub No you're not. I see `chrome.devtools....` appearing in `background.js`, while it belongs to `devtools.js`. – Rob W Oct 02 '12 at 11:43
  • Alright, I just realized the same thing but it still doesn't work. I'll make another picture.. – Blub Oct 02 '12 at 11:43
  • @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`. – Rob W Oct 02 '12 at 11:55
  • Well as you can see from the picture, the devtools.js is included in devtools.html. – Blub Oct 02 '12 at 12:20
  • 2
    @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 ``). – Rob W Oct 02 '12 at 12:27
  • 1
    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. http://dl.dropbox.com/u/700060/getFullWebsite.tar.gz – Blub Oct 02 '12 at 13:28
  • 1
    @Blub Your devtools page ( [`yourExtension.html`]() ) contains `` (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. – Rob W Oct 02 '12 at 20:41
  • 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? – mercury0114 Oct 29 '20 at 17:56