You Have No Power Here

Publish date: 4 Mar, 2020
Tags: story guide js css

You know the feeling when your smartphone vibrates, the LED control starts to flash and congratulations, you have lost your focus. New message, email, tweet, status, mention - you name it. The sudden urge to check whats new, what happened in the last 5 minutes since I’ve checked my phone. I hate it but can’t get rid of it. Maybe some useful tool can help?

I work on the phone!

source: T-shirt EsterJosefina - I work on the phone!

This article is a follow up on Trying to avoid procrastination and luckily I solved the phone addiction easily. I simply just hide the phone to my backpack. Pretty straight forward solution, right? But that was just a start. Since I couldn’t browse facebook on a little screen I switched to a bigger one. Yeah, when I finally opened a code editor the temptation of switching to browser was always there. I tried different Chrome extensions like Forest and multiple pomodoro ones but neither stopped me from going to the dark side. 9gag, facebook, youtube just to give an example of my usual rotation.

Project instead of work?

Luckily for me I haven’t wasted time just browsing but also (from time to time) building. This one time, when I should have learned for an exam, I was wondering what else to do. A browser extension came to my mind and I followed it. How do you create an extension? Let’s see. It’s quite simple as I discovered from reading first article. So what should I do? Hmm, how about an extension that will help me with my issue? I could make array of websites I spend most time on and just blacklist them. That should be easy but first, let me think of a name. Well now it’s getting a little bit complicated. It took me quite a lot of time but you really don’t have to push it since you are already procrastinating. I came up with PABO which stands for Procrastination Avoidinator By Ondra. Ok, pretty stupid and I’m not even sure if the grammar is correct but I liked it at the time. Now to the code.

There is not a lot of it to be honest. You can check the repository right away. It’s really just a manifest.json and index.js. The first one tells Chrome some info and also holds to information on which sites the extension should activate (I used it to blacklist urls). The second one contains javascript code that executes. It just creates a <span> that overlays the loaded page with colorful background and <h1> with title Procrastination! in the middle to remind me to go back to work. So to sum it up: you define manifest, when website loads Chrome checks if url match and then loads the javascript. Simple as that.

Enabling the extension

Now the extension is ready to block me from visiting 9gag and all that is left is to enable it in Chrome. Since I haven’t published the extension officially nor I plan to do so, I have to load it manually. It can be done in extensions settings in Chrome, just navigate to chrome://extensions/. From there you click Load unpacked and select folder containing mentioned files. It should work right away. Just try to go to 9gag now you filthy procrastinator! Bam! Blocked view.

Loaded extension in Chrome

I was thinking about more features but ended up doing none of them. Just to give you an example:

That was fun little project and was definitely not worth it, taking in consideration that the time should have been spent studying. But the thing I realized a few days later was interesting to me. I actually kind a kept out of my blacklisted sites! How is that possible?

Some CSS can’t keep me from memes

One would expect that this simple block won’t keep me from opening these tempting sites other way. Browsing them on phone or on another PC, disabling the extension or even just altering the page DOM (removing the blocking span) to name a few. However I found myself trying to visit these sites less and less often. My theory is that it is because of the extension being my own creation. I somehow value it and try to be fair with myself by not evading the block. Maybe that is the reason that for example the Forest haven’t worked with me. But that is just my assumption.

So to summarize I have once again built something even though it was small and pretty simple tool. I must admit I haven’t even came across any technical difficulties as you would thought. To end this “series” about procrastination and task completing one more article will follow. I’ll share my current setup I use for managing my time and it will be about few apps I use daily.