Home

Welcome to the hacking-the-browser wiki!

The class syllabus is here.

Table of Contents

• Week 1
• Week 2
• Week 3
• Week 4
• Week 5

Week 1

• Slides

Week 1 Homework

1. Create a “responsive” web page or codepen that responds to some unexpected aspect of the browsing experience. You can build on one of the demos we worked on in class (battery, geolocation, motion/orientation), or come up with something else. Possible examples are a page whose display changes based on battery level, or distance moved since opening the page, or proximity to some physical location, or when tilted totally on its side. Be ready to share your work. Since not all sites will be viewable live in class (if they involve time or location change, e.g.), include screenshots of your site in different scenarios.
2. Find an existing site to share. Something that pushes the boundaries of the web, in your opinion. We will look at a few of these in class.

Please add your name and a link to your homework below:

• Cory: link to my site, link to a site that pushes the boundaries of the web (<-- copy and paste this line and change the information to match your name/links)

• Brett: Font Vs Battery, Google 360 Performing Arts

• Joakim: My site: Distance based - Counting calories, My site: Hidden Image - Works on phone, link to a site that pushes the boundaries of the web

• Yining: My site: What to Eat Today? Shake your phone!, Websites that brings businesses and consumers together: Airbnb, Seamless, Alibaba

• Chino: extreme zoom, shodan.io

• Pierre life-support, not technically a site, but definitely pushes the boundaries

• Chanwook Look At Me, street view patchwork

• Songee: So sad, Nightwalk in Marseille

• Thea: https://codepen.io/thearae/pen/wMxGJz?editors=0011, http://www.unnumberedsparks.com/

• Melanie SKY VIEW, Blog Post, Reskinning Reddit, Directions to Last Visitor

• Marc marcbot - tweet location when phones battery is going to die

• Manxue: Weather Radio, Deja Vu

• Nikolaj Finish up your tabs! - Speedreads your opened articles in a pace that matches the battery's lifetime. An example of a browser behavior you would not expect http://a-way-to-go.com/

*Corbin - [Glitch] - (http://stevejr.net/)

Week 2

• Slides

Week 2 Homework

1. Make a bookmarklet that works against the user. It might make links harder to see/click (change color, move them around), remove form elements, put image/div on top of page, etc, make it less informative/useful. Interpret this how you like. It can be a bookmarklet that works generically on (most) sites, or one that is tailored for a specific site.
2. Find an interesting bookmarklet in the wild. Reverse-engineer it (see earlier slide about this) and be ready to explain how it works (as well as you can).

Add a link to your homework below:

• Cory: link to my bookmarklet (include screenshots and/or notes about how it works), link to an interesting bookmark in the wild (<-- copy and paste this line and change the information to match your name/links)

• Chino: D-pad, PrintWhatYouLike

• Brett: Browser Vs Battery, Nyan Cat

• Joakim: Floater, XRAY

• Chanwook Color, dudl.me

• Manxue Zombie come, Share this

• Nicola Anti-Quote, Share this

• Thea: omnomnomify, harlem shake

• Pierre: colorful, the deletionist

• Nikolaj: Reveal Password BookmarkletHillary Facebook Acces Bookmarklet

• Yining: Raining Cats and Dogs, Hide Cursor

Week 3

Slides

Homework

1. Turn last week’s bookmarklet into a Chrome Extension
2. Either:
   • Improve #1 by using what we learned today to make it do something new
   • Make an extension that helps the user somehow
3. Find an interesting extension in the wild and:
   • look at its manifest.json to figure out how it works
   • decide which category it is

Add a link to your week 3 homework below:

• Cory: 1) link to my bookmarklet-turned-extension (include screenshots and/or notes about how it works), 2) link to a improved bookmarklet/extension or new extension that helps the user 3) link to interesting extension in the wild (<-- copy and paste this line and change the information to match your name/links)

• Joakim: 1) Floater Ext, 2) Summary Ext 3) Honey

• Yining: 1) [Replace Cursor] (https://github.com/yining1023/changeCursor) 2) Show Coordinates 3) Page Ruler

• Thea: 1) omnomnomivore, 2) reg to vote 3) todo

• Brett: 1) BPM Browser (Documentation to come - need Pulse Sensor connection), 2) Browser Vs Battery(Now works across all URL's) 3) Google Earth View

• Chanwook: 1) changeColor, 2) ColorPick Eyedropper 3) grammerly

• Pierre: 1) colorful, 2) noscroll 3) [shodan.io] (https://chrome.google.com/webstore/detail/shodan/jjalcfnidlmpjhdfepjhjbhnhkbgleap)

• Chino: 1) d-pad, 2) brownser, 3) NonAd Block

• Corbin: 1) [Tribute to Nirvana] (https://www.youtube.com/watch?v=KKeqXBCB6rU), 3) [Facebook Unseen] (https://chrome.google.com/webstore/detail/facebook-unseen/iicapmagmhahddefgokbabbgieiogjop?utm_source=gmail)

• Nikolaj: 1) Hillary Ext, 2) Hillary Extended 3) "Honey" searches for rebate codes on the web for the specific site you're at

• Songee: 2) Search Urbandictionary(work in progress), 3) Nothing, Upside down

• Nicola: 1) [Social Media Time Saver] (http://www.nicolacarpeggiani.com/?p=415), 3) [Rescue Time] (https://chrome.google.com/webstore/detail/rescuetime-for-chrome-chr/bdakmnplckeopfghnlpocafcepegjeap?hl=en-US)

• Manxue: 1) [Blur Everything] (http://www.manxuew.com/blog/2016/2/8/week2zombies-come), 2) [Weather Radio extension] (http://www.manxuew.com/blog/2016/2/22/week3-weather-radio-extension)

Week 4

Slides

Week 4 Homework

Description of Homework.

• Cory 1) link to your work in progress on your extension or a new extension that invades privacy or "has no purpose", 2) link to notes about reverse engineering an extension <--- Copy this line and paste it below, changing the info to match your own

• Brett 1) BPM Browser, 2) Change Background Color

• Corbin [BAND TRIBUTES VIA CHROME EXTENSION] (https://corbinordelforever.wordpress.com/2016/02/29/tribute-extension/)

• Joakim [The Great Suspender] (http://www.joakimquach.com/blog/spring-2016/hacking-the-browser/week-4-2)

• Yining [Move Rectangles on p5 Sketches] (http://1023.io/blog/wsfvq1qkgzprsuliucxpd75srsx9dh)

• Nicola [Music Browser] (http://www.nicolacarpeggiani.com/wp-admin/post.php?post=451&action=edit), 2) Chrome Extension Reverse Engineering

Week 5

The homework for week 5 is to prepare and polish your final projects and be ready to present them at our final class.

Your project should:

• Be a bookmarklet or chrome extension; AND/OR
• Use cutting-edge web APIs (e.g. from week 1 or https://whatwebcando.today/)

Presentation format:

• 8 minute presentation, 2 minute Q & A
• I will use a timer and manage the clock (at 7 minutes the alarm will go off, letting you know to wrap up so you can take questions)
• There will be 3 guest critics in class to see your work and provide feedback

Presentation details:

• Use Slides
• Include Images/Videos — code doesn't always work, especially in front of an audience. Use images and videos so you have a backup in case there's a technical issue with your code during your presentation
• Show Code — be ready to walk through some of your code for the class, explaining how it works
• Your project should work, but not necessarily perfectly
• What did you learn?
• What difficulties did you encounter along the way? How did you solve them or work around them?
• Show research if applicable
• What’s next? What's your vision for the project if you had more time to improve it?
• In addition to talking about how your project works, also talk about what it means — to you, in the context of the browsing experience, etc.
• Do a practice run-through of your presentation once before class so you have a sense for how long it is. If the presentation portion runs long there may not be time for you to answer questions.