Goals of the Project

  • Find an interesting extension in the wild.
  • Create a useful Chrome Extension.

1. Turn off the Lights – watch Youtube videos like a movie!

Recently, my favorite website is Youtube since it has almost all handy stuff in the world, especially for oversea students like me; how to learn English fast, how to cook myself simpler and more delicious, Japanese animation update, Dan Shiffman’s video, coding tutorials and Korean current affair… a bunch of stuff, I can’t stop watching Youtube!! lol

Typically talking, watching in fullscreen is the best way of maximizing the video quality. However, I have lots of things to do with my laptop so I usually watch the videos with smaller browser settings. In this situation, the Chrome extension called Turn off the Lights gives me better-watching condition. It automatically darkens all of the areas in the browser except for the movie! I think it is really helpful due to the fact that other contents in Youtube pages sometimes disturb user from better watching as its advertisements. When I turned on this firstly, I felt the Youtube video becomes a movie.

2. Evergreen – read internet articles more comfortably.

In addition to Youtube videos, I read lots of articles on the internet as many people do. In this situation, I always have a question why the background color of most of the web pages is white; the color of white might not a big problem, the real issue comes from contrast personally. This makes me really hard to keep reading many resources as well. So I made a chrome extension that allows background color variation in terms of the mouse position. I used clientY property for limitless usage on any part on the web page and also used two natural colors that are light green and light yellow, so users can easily and smoothly modify the background color for the most comfortable condition for their eyes and realized slightly change the color as they want without any additional click or calling functions.

I realized that the code seems to be seen as too simple, but believe it can be continued with my final project that is more helpful for reading English articles with various functions!

Source Code

// content.js

$(window).mousemove(function(event) {

var currentX = event.clientX,
currentY = event.clientY;

var color = ‘rgb(‘ + (100 + currentY/2) + ‘, 238, 221)’;

$(‘div’).css(‘background-color’, color);
});

Things I have learnt

  • how to create a Chrome extension
  • how to use color variables with dinamic mouse position in the browser

Things to do next

  • keep highlighting the texts that users have dragged
  • enables text size bigger or bolder simply
  • simple capture / print with featured things