宗泽 ZONGZE CHEN      ABOUT      PLAY    
Design x Code x Engineer
Strange Browsing
A series of Chrome extensions that leverage machine learning, web connection, and DOM manipulation to explore novel interactions of browsing the internet.

experiment

1. Co-browsing



Co-browsing is a Chrome extension that uses PeerJS and WebSocket to connect multiple users. When a user is connected, they will stream the screen around their mouse to other users. Likewise, a user can see other users’ screens through tiny windows. The window will follow each user’s mouse and always display the area around it.


The idea is that multiple people can browse the internet while seeing what each other is looking at concurrently.

On the technical side, the extension uses TaskVision and webcam to generate a face cutout of the user. The face is streamed together with the screen. The display of other user’s screens and faces are drawn on a HTML Canvas. Therefore, the streamings can be used and overlayed on top of any websites.

Each user can customize their displayed name and color of the border in the pop-up of the extension. Their mouse position is also broadcasted to all useres. The mouse positions are used to crop the displayed area of each user.



2. Embodied Web





This extension has the capability to allow users’ body to interact with webpage elements. The idea is that users can wave their hands in front of the webcam and push elements that collide with their hands.

On the technical side, because the DOM structure makes children elements overlap with parent elements, I can’t decide which element is touched by just its location. The program needs to first searche through all the end points of the DOM tree, and if nothing is found, searche through the parents of the end points and so forth until one element is found. The animation of the elements is done through CSS properties.



3. White Hole




This extension can wipe out all content on a website. When activated, it acts as a black hole at the center of the screen and sucks everything in.


Animations are done through CSS properties. To properly animate and remove elements one by one instead of removing everything all at once, the program will first find the end points of the DOM tree. Once an element is removed, the program will proceed to animate the parent of that element and so forth, until all elements are erased from the webpage.


4. 3D-fy Websites




This extension allows you to view websites from a three-dimensional perspective while still allowing you to interact with them directly. Some browsers have native support for 3D view, and some extensions can do that, too, but they often render the website in a separate window, and you can no longer interact directly with the website in the 3D view.

The trick is just using CSS property and some math to zoom and translate HTML elements in relation to the scrolling position and the DOM tree structure. It just looks like 3D, but there’s no real 3D rendering.