Learn how to build Chrome Extensions with Vue.js

Learn how to build Chrome Extensions with Vue.js

As a frontend developer you are able to build your own extensions since it’s basically just HTML, CSS and JavaScript. In this post, you'll 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.

Learn how to build Chrome Extensions with Vue.js

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:

Learn how to build Chrome Extensions with Vue.js

The result

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

Learn how to build Chrome Extensions with Vue.js

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!

Learn how to build Chrome Extensions with Vue.js

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?

Learn how to build Chrome Extensions with Vue.js

The extension pop-up

Learn how to build Chrome Extensions with Vue.js

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.