Learn how to build Chrome Extensions with Vue.js

How is a Chrome Extension structured?

A Chrome Extension consist of 5 crucial components

• Manifest file — consist of all the metadata for the extension like icon paths, descriptions, permissions, version and so on.
• Background Script — that is the extension’s event handler. It can contain listeners for browser events that you would like to act on in the extension.
• UI Elements — pretty self describing but it’s the UI elements in the pop-up when you open the extension.
• Content Script — if you want to read or write to the current webpage that the user is visiting you will need to use a content script.
• Options Page — the options page contains the users settings for the extension.

Getting started

As a frontend developer you are able to build your own extensions since it’s basically just HTML, CSS and JavaScript. You could go the vanilla way which is great for simple extensions, but for the more complex ones it could be an idea to use a JavaScript framework. Since I had a lot of communication with REST services and dynamic data in general I chose to include my favourite JavaScript framework Vue.js.

I also didn’t want to start from scratch so I started to look for a boilerplate, and found the amazing Vue.js boilerplate from Kocal which uses the Vue CLI.

It contains all the required setup and structure to build an extension, and besides that you also have the possibility to add axios, vue-router, vuex and a Mozilla polyfill during the installation process.

How to

To get up and running you will have to have the Vue CLI installed and then you just have to run the following command…

vue init kocal/vue-web-extension [NAME OF YOUR EXTENSION]

The following process looks something like this:

The result

After the installation you will be presented with a folder structure like this:

Then you will have to go to the extensions page in Chrome, enable developer mode, click Load unpacked and select the dist folder in your extension like I did in the screenshot below. Now you can start building!

Solving a real life issue with a Chrome Extension

As I’m working as a Frontend Developer consultant I have to track all the time I use on projects which has to be registered in Jira. But since Jira doesn’t offer the best time tracking features I use Toggl for the actual time tracking.

After getting tired of moving entries manually to Jira I started to look for tools that could help me sync these, but unfortunately they all come at a pretty high price, and the free ones didn’t work as I wanted them to.

Since I couldn’t find a suitable tool I jumped into building my own extension with the process and tools mentioned above. It was important for me that the extension also looked nice and since Google uses Material design in Chrome it made sense for me to add Vue Material as well. It’s built with Vue.js and contains Material designed Vue components for e.g. inputs, datepicker, buttons and so on.

The obstacle and the solution

The extension uses the Toggl and Jira REST API’s which means that all API calls has to be authenticated. This would normally mean that when a user installs the extension, they would have to set up auth tokens and other security measures which can be kind of a hassle for a normal user - especially if they aren’t the admin of the Jira account.

But since we are working with a Chrome extension we have access to browser wide cookies. This means, that if you have recently logged into Jira and Toggl we are automatically authenticated to use the API’S. If not, the user just have to log in again to re-authenticate. This procedure would not be possible with a normal web app since they can’t access these cookies.

How does it look?

The extension pop-up

Settings page of the extension

All in all

Chrome extensions are great tools for adding extra functionality to your browser or solve a specific issue. With Vue.js and the boilerplate it also got a lot easier to get started. With regards to my extension I think it turned out pretty well and it does exactly what I needed it to.

I created it as an Open-Source project on Github where developers are more than welcome to contribute with bug fixes and new features or just get inspired on how to build their own extension.

Chrome App Store: https://tinyurl.com/y4pj9por

Repository: https://github.com/simoneldevig/jira-toggl

I hope this short read will help you get started building your own extensions🤘

#vue-js #javascript #google-chrome #web-development