chrome.devtools.inspectedWindow.getResources and resource order

[Nikita Vasilyev]

I’m trying to get the last included (in HTML) stylesheet https://github.com/NV/chrome-devtools-autosave/blob/fa606de19e9b132d3acd3a894010f45c5311c3b1/chrome/devtools.html#L50-65. Unfortunately for me, chrome.devtools.inspectedWindow.getResources (https://code.google.com/chrome/extensions/trunk/devtools.inspectedWindow.html#method-getResources) sometimes return resources in    order different from their appearance in HTML. How do resources are sorted? How do I get the last one?

[Andrey Kosyakov]

Hi Nikita,

We do not specify any particular order in which
inspectedWindow.getResources() returns resources. Parsing the page
HTML is perhaps one way to get the order of resources there;
alternatively, you can rely on a content script to fetch the order of
style sheets. Consider that some of the resources you're getting from
getResources() may come from subframes or be dynamically appended to
the document.

FWIW, chrome.devtools.network.getHAR() does return network requests in
order of their initiation.

Best regards,
Andrey.

[Nikita Vasilyev]

Hi Andrey,

getHAR returns zero entries when no request captured. For example, devtools_page.html:

<script>

chrome.experimental.devtools.network.getHAR(function(har) {

  console.log(har.entries); // Empty when DevTools opened after loading a web page.

});

</script>

I ended up using both devtools.inspectedWindow.eval and devtools.inspectedWindow.getResources (https://github.com/NV/chrome-devtools-autosave/blob/b0feb48c65dad405e29ae3fc650891f71fb8a57c/chrome/devtools.html#L48-70):

chrome.devtools.inspectedWindow.eval('var links = document.querySelectorAll("link[rel=stylesheet][href]");\n\

var last = links && links.length && links[links.length - 1];\n\

last && last.href', function(href, fail) {

    if (fail) return;

    chrome.devtools.inspectedWindow.getResources(function(resources) {

        var i = resources.length;

        while (i--) {

            var resource = resources[i];

            if (resource.url === href && resource.type === 'stylesheet') {

                resource.getContent(function(content) {

                    lastStylesheet = {

                        content: content,

                        url: resource.url

                    };

                });

                break;

            }

        }

    });

});

[Andrey Kosyakov]

On Tue, Feb 7, 2012 at 12:18 PM, Nikita Vasilyev <alter...@gmail.com> wrote:

> getHAR returns zero entries when no request captured. For
> example, devtools_page.html:

This happens when DevTools are attached after the page load, so we
don't have network resource information.

> I ended up using both devtools.inspectedWindow.eval
> and devtools.inspectedWindow.getResources
> (https://github.com/NV/chrome-devtools-autosave/blob/b0feb48c65dad405e29ae3fc650891f71fb8a57c/chrome/devtools.html#L48-70):
>

You probably want to wrap the code you eval() into an anonymous
function, so as not to pollute the namespace of the inspected page.
Your sample would leave window.last and window.links defined in the
inspected page (and will possible break it, if it's already using
these symbols).

As a safer alternative, you can run the same code as a content script
(i.e. with chrome.tabs.executeScript()) -- you will still have access
to the page DOM, but your JavaScript will run in a separate world and
will not collide with the scripts of the inspected page.

Best regards,
Andrey.

[Nikita Vasilyev]

On Tuesday, February 7, 2012 12:30:51 PM UTC+3, Andrey Kosyakov wrote:

On Tue, Feb 7, 2012 at 12:18 PM, Nikita Vasilyev wrote:

> getHAR returns zero entries when no request captured. For
> example, devtools_page.html:

This happens when DevTools are attached after the page load, so we
don't have network resource information.

> I ended up using both devtools.inspectedWindow.eval
> and devtools.inspectedWindow.getResources
> (https://github.com/NV/chrome-devtools-autosave/blob/b0feb48c65dad405e29ae3fc650891f71fb8a57c/chrome/devtools.html#L48-70):
>

You probably want to wrap the code you eval() into an anonymous
function, so as not to pollute the namespace of the inspected page.
Your sample would leave window.last and window.links defined in the
inspected page (and will possible break it, if it's already using
these symbols).

Thanks for the tip!

 

As a safer alternative, you can run the same code as a content script
(i.e. with chrome.tabs.executeScript()) -- you will still have access
to the page DOM, but your JavaScript will run in a separate world and
will not collide with the scripts of the inspected page.

AFAIK, chrome.tabs.executeScript (http://code.google.com/chrome/extensions/tabs.html#method-executeScript) does not return the result.

[Andrey Kosyakov]

On Tue, Feb 7, 2012 at 2:28 PM, Nikita Vasilyev <alter...@gmail.com> wrote:
> AFAIK, chrome.tabs.executeScript
> (http://code.google.com/chrome/extensions/tabs.html#method-executeScript) does
> not return the result.

It doesn't, but it can send a message via
chrome.extension.sendRequest() (or use sendReply() callback when
invoked via the chrome.extension.onRequest event). This will obviously
imply having the background page in your extension, which may be an
overkill for simple stuff -- but definitely a good idea if you have a
lot of logic working with DOM, or if you need to maintain any state
that refers to DOM nodes. Otherwise, you're on a slippery path of
sharing the state with an arbitrary inspected page, which may happen
to be not entirely friendly ;)

Broken Links example may provide some insights on using content
scripts, background page and devtools extensions together:

http://code.google.com/chrome/extensions/trunk/samples.html#9004d1a1b975859d07bdff94ea0a4baa106c4fd1

Best regards,
Andrey.