2

Is there any way to access the render tree (or the DOM and CSSOM trees) of a page -- programmatically -- before being processed by the rendering engine, in Chrome?

And, ideally, could this be achieved through a Chrome extension, (with any combination of Javascript and/or C++ interfacing with the browser itself)?

decisions
  • 21
  • 3
  • Why do you want to know the render tree? The information is really verbose. AFAIK the API is not made available in Chrome, but you could compile a `content_shell` from source which does have render tree dumping capabilities. – Rob W Sep 08 '14 at 15:52
  • @RobW I'd like to get the render tree because I want to modify some of the document nodes - nothing shady or ill-intentioned here, only need to do it for visualization/presentation purposes. I'm not sure if a `content_shell` would be of use to me, though. I need some way of accessing a ready-to-use structure, with minor overheads to the extension/app I'm planning to develop. Do you recall any other way of getting a intermediate representation of a document (anytime after SSL/TLS decryption and before beeing rendered to the screen). I'm sure this sounds bogus, but it would be handy. Thank you. – decisions Sep 08 '14 at 16:19
  • So you're not actually interested in the render tree, but the document tree of a document before it is affected by scripts or extensions? – Rob W Sep 08 '14 at 16:24
  • If by document tree you mean the DOM, no. I need both the DOM and the CSSOM. The reason why I (probably erroneously) think the render tree would be usefull for the purposes I've listed, is because I thought I'd get a structured representation of everything on the page. Now that I think of it, I don't think the document tree would be enough: Suppose my extension changes the document tree. How can I prevent scripts and extensions to over-write the changes made by the extension, itself? PS: I'm quite new to the internals of web technologies. Please excuse any misconception here. – decisions Sep 08 '14 at 16:38
  • 1
    To get the unmodified DOM of the page, you could fetch the document using XMLHttpRequest with `x.responseType='document'` and access the DOM via `x.response`. CSSOM is built from stylesheets and inline styles, which can be accessed through `document.styleSheets` and `document.querySelectorAll('[style'])`. Parsing this by hand will be very tedious, you'd better use `getComputedStyle` if you're only interested in the styles that apply to a node in the DOM. – Rob W Sep 08 '14 at 16:50

1 Answers1

1

Also, this may not be particularly the same but you can see the sequence of the page construction via Chrome dev tools. This is possible by recording the page in the timeline which provides a detailed list of the steps taken to render the page. It is a very extensive list and useful if you would like to take a deeper look. Hope this helps :)

jburtondev
  • 2,827
  • 1
  • 14
  • 20