Chrome Extension with VueJS

This is quite exciting for me as I have not done this before and I get thrilled when I am learning a concept for the first time.

1. Project Setup

I created the project with vue-cli:

npx @vue/cli create <name-of-project>

Vue-CLI has an amazing plugin that generates the files for building the Chrome Extension. Read about how it works here:

It changes the folder structure and does not imitate the default vue scaffold. I added this extension by running the command, vue add browser-extension. Choose the files you want to have in your project asides the default popup and standalone page.

I started the server with

npm run serve

Next, I installed the Reload Extension for hot reload as I make changes to my files. Here:

Next, I visited the

in Developer Mode, clicked the “Load Unpacked” button and selected the dist folder. This loads my extension into the Chrome browser.

Next, I installed the npm libraries necessary for development: Axios, Vee-validate, and Tailwind CSS.

1. Writing codes

First off, what kind of extension am I building? This extension helps to track users' on-screen time and notify them when the time elapses. e.g. If you decide to spend only four hours on your browser on a Monday morning, if you have this extension installed in your Chrome browser, it will notify you (subtly interrupting your view with a toast/modal/popup) when four hours has elapsed. If the user does not set a time duration, however, there will be a default time duration set. The major pages for the extension are the popup and standalone page.

These pages were styled with utility Tailwind classes and plugged in with Laravel.