Hacking The Browser

Hecking the Browser - Week 5: Final Project Breakdown

PREVIOUS POSTS:

Week 1: Create a responsive web site

Week 2: Create a bookmarklet against users

Week 3: Create a chrome extension

Hecking the Browser - Week 4: Two Extensions and Final Proposal

 

TITLE:  Golden Touch

DATE: Feb 27 to Mar, 2017

INSTRUCTORS: Cory Forsyth

 

 

I changed my final idea. Believe it or not, this new one will be super cool!

I will make a chrome extension acting like a ROLI Lightpad Block, which I can't afford.

 

INSPIRATION

The new idea came from three occasions:

1. When I was taking the interactive music class, my friend @Alejandro, who was also in hacking the browser class, and I had a talk about what to make for this final. He showed me his demo, playing with the position of chrome tabs! I suddenly realized that my previous projects didn't cover tab API/window, which was not cool. Why not play with them?

2. Last week, I was wandering around wtc without any purpose, just chill for the nice weather, then I found this super cool ROLI Block. I just couldn't put it down. A poor man who was stuck into the consumerism...Why not make one?

3. It will be funky, to open a bunch of windows which will make a lot of music or noise and make people have to close them one by one or take the risk of losing information by press command + Q. Or it can be something useful, like a tuning tool for guitar. Well, tuning tool is an excuse to convince me to make it.

 

DEMO AND BREAKDOWN

I made a fast visual demo of it. Each of the minimal tab will allow to play different sound.

Here is the API and permissions list I'm gonna use:

  • activeTab
  • chrome.tabs
  • chrome.windows

and the extension concepts list I'm gonna use:

  • browser action
  • page action
  • content script
  • background script

When it comes to the function of my extension, I think it will be fun to make it a window/tab based NOVA DJ machine:

  • 1/5 easy: Users click the icon and a pop-up appears and show the settings of layout and keyboard type
  • 2/5 medium: Users set which layout and keyboard they want by checking the radios and pressing the generate button
  • 3/5 difficult: Popup windows open on the screen as the selected layout
  • 1/5 easy: Each Popup window will play one simple midi or sound
  • 1/5 easy: visual effect while the sound is playing, definitely
  • 5/5 hell difficult: Users' input is simply active the window/tab or move to others

Advanced features:

  • In each window, users can change the volume of this window and set loop or not
  • the recording feature
  • the mute feature
  • the replay feature

 

PROCESS

Here is the link to my Github repository: https://github.com/wenqili/golden-touch

  • 1/5 easy: Users click the icon and a pop-up appears and show the settings of layout and keyboard type

Done: https://wenqili.github.io/golden-touch

 

 

 

 

 

  • 1/5 easy: Each popup window will play one simple midi or sound

Half done: https://wenqili.github.io/golden-touch/musicPatch/

 

 

  • 1/5 easy: visual effect while the sound is playing, definitely

In progress: https://wenqili.github.io/golden-touch/musicPatch/

 

 

  • 2/5 medium: Users set which layout and keyboard they want by checking the radios and pressing the generate button

 

 

  • 3/5 difficult: Popup windows open on the screen as the selected layout

In progress

 

 

 

 

  • 5/5 hell difficult: Users' input is simply active the window/tab or move to others