As I was doing my final project for Harvard CS50x, I decided to build a Chrome extension because, why not, I had never built one before so it would be a good learning experience for me.
Planning
As this was my first time developing a Chrome extension, I did not want to start with something big.
My principle: start small when you want to learn something.
I would like to keep it small and simple, and more importantly, it had to solve a problem that was relevant to me.
So I came up with an idea: a Chrome extension that notifies me to drink water while working (as I am too focus sometimes and forget to take a sip). I know it sounds simple, and there has to be similar extensions out there, but hey, this is for learning!
So this blog post will guide you through my thought process.
Development
So the goal was to build an extension that sent me a notification to take a sip every 15 minutes.
Building the user interface was simple. The popup used basic web technologies such as HTML, CSS, and JavaScript.
While developing, I encountered a problem. If the extension popup disappeared, the timer would restart. In order to avoid this, a script called background.js running in the background would help. However, the script had to be defined in manifest.json :
"background": {
"service_worker": "background.js"
}To use the notifications feature, you have to declare it in manifest.json as well:
"permissions": ["notifications"]In the end, manifest.json should look like this:
{
"manifest_version": 3,
"name": "Sip & Work",
"description": "Helps you stay hydrated while working",
"version": "1.0",
"action": {
"default_popup": "popup/popup.html",
"default_icon": "images/icon-128.png"
},
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
},
"permissions": ["notifications"],
"background": {
"service_worker": "background.js"
}
}Production
To use this locally, you can:
- Go to
Manage extensionsin your browser and turn onDeveloper mode. - Then, click
Load unpackedand you should see it in your extensions.
To make it publicly available for everyone to download from the Chrome Store, you first have to register as a Chrome Web Store developer that requires paying a one-time registration fee. After that, follow these steps here to submit your extension for publishing.
Source code
Resources
Extensions - Chrome Developers
Declare permissions - Chrome Developers