Browser Extensions: if you liked it, don't forget to 👍 it. 
Tags: chrome, productivity, javascript, functional
Published: 2020-02-17 00:16:16

Full disclosure, I am a slow reader and needless to say that I compensate a lot by consuming multi media content like Audiobooks, Podcasts, Documentaries and Streaming services. 

Ever since the inception of **YouTUBE** I saw it's potential, and lately it's gotten crazy good, due to the growing competition brought on by the advances in technology: everything is a camera and high-speed internet is spanning almost the entire globe. 

Of course these advances also make it easier for mediocre, bad or even controversial content to make it on the platform, that is exactly why **voting is important**. 

## Given that.

If you subscribe to a creator or channel and **"like"** the content, you provide a valuable information for the algorithm that will tailor future suggestions to your liking (pun intended). 

Additionally it's a great help for the creators, as they can use the feedback to refine their content or for their revenue from sponsorships and outreach. The entire thing becomes a massive positive feedback loop.

It's such a simple action, but still, when I am in fullscreen mode, inside a playlist...

Be it a blender tutorial:
![Grant](https://dev-to-uploads.s3.amazonaws.com/i/wq1w073czjco2s852zkk.png)
(this will help with my indie game)

or try to really understand calculus:
![BlueBrown](https://dev-to-uploads.s3.amazonaws.com/i/9ifmgkbxnr6zbnqk3znm.png)
(this will help with my indie game)

or just want to learn some survival skills:
![Chad](https://dev-to-uploads.s3.amazonaws.com/i/77m60cub482hjvg3vp19.png)
(this is awesome to know in an emergency) 

I simply forget to give the 👍 although I watched the entire videos and got the knowledge I was seeking in a very entertaining manner, simply because I am watching a playlist. I think that is unfair. 

No wonder that the number of LIKES represent somewhere between **3% and 6%** of the number of VIEWS. This is a problem for me, because I want to show my appreciation and reward good work.

## What to do? 

Well, we can do something about that, right? 
Let's see, we'll need:

- something that runs in the browser
- can be activated / deactivated / configured.
- reacts only to the YouTUBE URL
- checks the running videos runtime
- checks your subscription to the channel / creator 
- likes the video from the creator if the set threshold is reached
- works in fullscreen mode & background

## Automate it!

So I created a Chrome Extension that keeps all the logic in the client, so that I don't need a server side component. I also didn't want to mess around with `YouTUBE API` and `tokens` or `API Keys`. My most important requirement: **NO AUTHORISATION or USER DATA** required.

This is what I came up with

 ![UI](https://dev-to-uploads.s3.amazonaws.com/i/0mv5xsiqjqryxrl656ic.png)

You need to press the button "AutoLIKE ON" so that the code starts monitoring the video progress bar.

You need to select a threshold for when to trigger the 👍 between 10% and 90%.

You need to be subscribed to the creator / channel.

You need to have them added to your list manually using (+)  

All configurations, in my implementation, get stored in the `localStorage` of your browser:

![local storage](https://dev-to-uploads.s3.amazonaws.com/i/dc0hsv40gof4o3jzjt93.png)

The extension is available in the **[Chrome Web Store](http://bit.ly/auto-like-level-2)**

When you click the 💚 icon to show / hide it expands or collapses but the whole time it is embedded in the DOM of the YouTUBE page, looking like this:

![integration](https://dev-to-uploads.s3.amazonaws.com/i/ynfxb1095diewu9al1kk.png)

## Conclusion 

I started out writing this post in order to show the little journey that led me to develop my first Browser Extension, but what I am hoping to achieve, is to maybe motivate you to just try out stuff and solve some "problems" you had for a long time and solve it with software!

If you decide to look into Chrome or Browser Extensions, you can use my little project as a starting point: 

{% github realvorl/furry-guacamole %}

### PS:
> during the writing of this post I had "PBS SpaceTime" 
> in the background and as I was nearing the end of the Post
> I caught the short notification, on my second monitor
> ![working](https://dev-to-uploads.s3.amazonaws.com/i/dtt26r8ouh64wek4uii0.png)


I love it when a **DEV** plan comes together 🙃