Onestop-Manager

Create a chrome extension to bust your stress bubbles and be more productive

Introduction

How often have you felt bored and jumped on to Instagram, social media, jokes, puzzles, memes and trivias? I bet, you do it all the times.

And why not? We all need breaks between our crazy work schedules.

Wouldn’t it be nice if we had one place where we could have all these tools together. Wait no more! We have developed a chrome extension “Onestop-manager” to handle it all.

What is a chrome extension?

Before we get started, let’s first get hold of some basics. If you already know what a chrome extension is, feel free to jump to the next section.

Chrome extension is a small software program that extends the functionality of chrome. They enhance our browsing experience to a great degree.

Where can you find these extensions? They are distributed through the chrome developer dashboard and are published on chrome web store.

Enough theory now! Let’s get our hands dirty with code.

Code-It

To build any chrome extension, the manifest. json is the most important file. It contains the details like extension logo, which page to load when extension is clicked, what are the permissions and versions that your extension requires.

This is our manifest.json code. It has the following details.

We have a lot of fun activities in store together with a link manager! Since the functionalities are almost same, we will show you how one of the component works.

Let us develop a fun activity yes or no. This is most helpful when you have got to make a toss and need a fair play!

The html for this component contains a button which when clicked, the yesorno api call will be made. The JavaScript code will make the api call and receive the json response: text and image.

This response is shown in the UI and there we go! We have our first fun activity ready😃

We have added a link manager with custom font awesome icons and <a> tags. The code for links component is as follows

Once we are done, we can publish the code to chrome extension by using the following simple steps:

• Access the browser_name://extensions/ section of your browser
• Developer mode needs to be selected to unpack the extension
• Click on ‘Load Unpacked’
• Select the files which have been downloaded. You must find Onestop-manager extension ready to be used in your browser🎉🎉

Final Words

You can have a look at our complete over here. Feel free to extend the functionalities, fork our repos and get creative!
# IBelieveinDoing #CrioIBDRemoteWorkingTool #IamABelieverofDoing #criodo