Increase your productivity with WFHTool Chrome Extension

As part of the Crio #IBD Remote Working Tools challenge, I came up with a chrome extension that solves majorly faced problems during Work from home

Why Chrome Extension

As we all know a browser is the standard software that we use on a daily basis be it for work or general querying purposes. When I came across crio’s challenge which is about Remote working tool development, I thought why not develop a tool based on the browser that we use every day and also learn a new thing which is extension development.

Development Process

Phase I

Exploring the chrome extension API https://developer.chrome.com/docs/extensions/reference/

Phase II

Designing the blueprint of extension. Chrome extension has different view areas like chrome://history, chrome://bookmarks, chrome://newtab where we can customize and override the default page.

I choose a newtab interface because it fits best to my design. I used https://www.invisionapp.com/ to put my thought into the design.

Phase III

Start coding! Every extension needs a manifest file which is like a configuration file for the chrome to read. It has details about the extension like extension name, version, manifest version, permissions from the user, icons, description, and so on

After we have the manifest file ready we can start with the main code of the extension which may include using HTML, CSS, jquery, and so on

One of the most important challenges I faced during the development process are understanding the content security policy and the new manifest version v3 of the chrome extension api which include blocking script sources from outside the application. Please refer https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/

The major problems of Working from home include

1)Organizing

2)Prioritizing

3)Distractions

4)Motivation

Organizing

Have you come across a situation where you have plenty of things to do in a workday and don’t know where to start? Then this tool can help you organize things with the help of a to-do list. A to-do list is a common yet most powerful tool to get things together and have a plan!

Prioritizing

Many at times even after having a list of todos, we may fail to prioritize things. Using a decision-matrix method, also the Pugh method or Pugh concept selection, invented by Stuart Pugh can help you prioritize things. Please refer to the below quadrant for reference. This quadrant can help you prioritize things based on urgency and importance.

Drag items from todo to appropriate quadrant to prioritize work items.

Distractions

Working from home comes with a lot of distractions too especially from various websites to visit and no one is there to monitor. You can block any website using this tool so that you will not get distracted. In case of any urgency, you can unblock at any time!

Tool Usage:- Add the website to the blocked sites table, tick the checkbox, and you are done! You will not be able to visit the site again unless you unblock it. As the tool uses chrome storage sync, your blocked sites remain blocked on all the devices your account is synced in and have support to use chrome extension.

Motivation

The tool displays a quote every day, every 25 minutes, and on click of the quote area. This can help you stay motivated!

[embed]

Learnings:-

1. Always use responsive parameter values to HTML elements so that they will look good in all the screen sizes. This article helped me to learn more about it: https://www.smashingmagazine.com/2016/05/fluid-typography/
2. Chrome extension uses a strict content security policy. Make sure to go through it before choosing the manifest version
3. Still working on the Outlook integration to the extension which involves topics like OAuth2, Azure AD, Microsoft Graph. This development process introduced me to learn concepts like Authorization, Authentication, Token Decoding, Sending HTTP requests, Reading the response, and so on

Conclusion:-

Thanks, crio for coming up with this amazing challenge. This challenge has been a great learning experience for me. Got an opportunity to come out of my comfort zone and try new tools and concepts

References:-

[embed]chrome.storage - Chrome Developers This API has been optimized to meet the specific storage needs of extensions. It provides the same storage capabilities…developer.chrome.com

[embed]chrome.permissions - Chrome Developers An extension can declare both required and optional permissions. In general, you should: Use required permissions when…developer.chrome.com

https://type.fit/api/quotes

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

Please find the repo to the project and feel free to let me know your comments and suggestions on the same

[embed]Crio-WFH/Chrome-extensions A chrome extension to increase productivity at work This WFHTool extension solves 4 major challenges in a work from…github.com

#CrioIBDRemoteWorkingTools #IBD Remote Working Tools Crio #IBelieveinDoing #CrioIBD #IBelieveinDoing #LearnbyDoing #Criodo #IAmaBelieverofDoing