4 ms·

How do they get other web pages, given cross-domain constraints? Are they downloading the page on the server into a headless browser like Phantom JS, and then d

How do they get other web pages, given cross-domain constraints? Are they downloading the page on the server into a headless browser like Phantom JS, and then delivering the result to your browser to be manipulated using WebGL and Javascript? I get that there are capabilities like drawWindow() to turn parts of the dom into raster images programmatically, but how doe they suck the web page into your browser in the first place, given cross domain constraints???

faceyspacey 14y ago
I actually think I got it, and it's less impressive than I thought. Check this Screenshot: http://snapplr.com/hb27 http://snapplr.com/hb27 ...they're essentially rendering the entire site in a headless browser like Phantom JS on their server and taking a screenshot (i.e. basic stuff any intermediate javascript developer can do). Next, they're manipulating a basic image with WebGL, etc. ...So this is NOT impressive because they have lost the dom, unlike Firefox Tilt which maintains knowledge of the DOM the entire time--for example you can continue to edit the web page as you're playing around with the rendering in 3D space. With this you could not do that. Tilt is a firefox addon, which must be where they get access other domains. Without being a firefox add on (or Chrome Extension), I was imagining this Maze experiment rendering the dom of another site in a headless browser on their server, and then delivering the resulting HTML to your page with all the absolute and relative URL paths of images and files adjusted so that they would render on another domain. And then at this point, the WebGL stuff could happen, manipulating an actual dom. That all said, there are a few things that happen in the game that suggest knowledge of the dom, such as the way the make text have a 3D bubble cloud style. Maybe they are in fact doing some analysis in a headless browser, aside from just making a simple screenshot. They also break up logical portions of the page. So maybe the find the coordinates and dimensions of these logical portions and then in webgl crop the large image of the page at these exact coordinates. I'm sure someone else has done a more thorough analysis. Would love to know what anyone else finds here to figure out how they're doing what they're doing.
- skeletonjelly 14y ago
  How are they aware of the DOM level though? Certain elements pop out, are you suggesting they just use path mapping? It would be easier to, along with the screenshot, send the DOM tree hierarchy with some coordinates no? Still kind of impressive, but true it's no Tilt.

faceyspacey 14y ago

I actually think I got it, and it's less impressive than I thought. Check this Screenshot: http://snapplr.com/hb27 http://snapplr.com/hb27 ...they're essentially rendering the entire site in a headless browser like Phantom JS on their server and taking a screenshot (i.e. basic stuff any intermediate javascript developer can do). Next, they're manipulating a basic image with WebGL, etc. ...So this is NOT impressive because they have lost the dom, unlike Firefox Tilt which maintains knowledge of the DOM the entire time--for example you can continue to edit the web page as you're playing around with the rendering in 3D space. With this you could not do that. Tilt is a firefox addon, which must be where they get access other domains. Without being a firefox add on (or Chrome Extension), I was imagining this Maze experiment rendering the dom of another site in a headless browser on their server, and then delivering the resulting HTML to your page with all the absolute and relative URL paths of images and files adjusted so that they would render on another domain. And then at this point, the WebGL stuff could happen, manipulating an actual dom. That all said, there are a few things that happen in the game that suggest knowledge of the dom, such as the way the make text have a 3D bubble cloud style. Maybe they are in fact doing some analysis in a headless browser, aside from just making a simple screenshot. They also break up logical portions of the page. So maybe the find the coordinates and dimensions of these logical portions and then in webgl crop the large image of the page at these exact coordinates. I'm sure someone else has done a more thorough analysis. Would love to know what anyone else finds here to figure out how they're doing what they're doing.

skeletonjelly 14y ago
How are they aware of the DOM level though? Certain elements pop out, are you suggesting they just use path mapping? It would be easier to, along with the screenshot, send the DOM tree hierarchy with some coordinates no? Still kind of impressive, but true it's no Tilt.