Pomodoro Chrome Extension
This article is dedicated to the the Pomodoro Chrome Extension. I describe what it does, how I developed it and what I learned in the process. It took a lot of time since I was very distracted... Because I did not have this extension yet :)
Install: Pomodoro Chrome Extension.
View Source Code: Pomodoro Chrome Extension GitHub.
The Idea for the Extension
I was only beginning filling my website with content, and decided to create a blog post about creating a chrome extension. I was brainstorming different ideas and checking them in Google Adwords. Pomodoro Chrome Extension had 1k searchers per month and there was no extension with that exact name - so I went with that.
Deciding on the UX
After some consideration I decided that the UX and the Flow of the plugin will be this:
1. User clicks the browser action.
2. User selects how many minutes will the session last.
3. At the end of the session the clock will stop, and a pleasant music will play.
4. While the clock is running - allow the user to click "I failed the session". After which an unpleasant sound will play.
I think that will trigger something in our primal brain that would prevent us from failing the session and want to persist through :)
At first I created a simple design with the help of Semantic UI. But I had issues with making a build with Material theme, so I decided to not use any UI framework since this is a very simple extension.
In the end, the extension had three screens. Here is how they look:
Designing the promo images
Since I don't have a lot of knowledge and skill in using graphic tools like PhotoShop or GIMP, I created an html page and styled all components with CSS :) Here is how the page looked:
Then I used a chrome extension of my own creation to take screenshots of the page and cut out the parts with the promo images. Here is the result:
Redesigning promotional images
Two days later, I was thinking on an idea to create a promo image generator. While researching promo images, I stumbled upon this page: https://developer.chrome.com/webstore/images#promo - which is an official Google Webstore's page. It had a specific list of guidelines for promo images:
- Avoid text.
- Make sure your image works even when shrunk to half size.
- Assume the image will be on a light gray background.
- Use saturated colors if possible; they tend to work well.
- Avoid using a lot of white and light gray.
- Fill the entire region.
- Make sure the edges are well defined.
It was clear to me that I had too much text in my promo images, the had gray background and no saturated colors, so I decided to promptly re-design the promotiaonal images. Here is what I made:
I also learned that Chrome Webstore does not post these promotional images right away, It takes some time for them to review the images. And I was afraid that my images will be rejected because of violating their suggestions - that is why I decided to change them.
Publishing the extension
After that the steps to publish a chrome extension are very straightforward if the permissions are minimal ( just like in our case ). I was very surprised that it took less than 10 minutes for the extension to become publically available.
After it was published ( March 23, 2020 ) - it immediately became available in the chrome webstore and ranked 53 for the term "Pomodoro" - I am hoping it will rank better with time and with more users.
I liked developing this extension and hope to make more simple useful tooks like that :) You can install the extension here: Pomodoro Chrome Extension. And view the source code for the extension and for the promo page here: Pomodoro Chrome Extension GitHub. Thank you for your time :)