Improving the ElePass Extension, Part 1 – Introduction

June 1, 2018 0

We first started working on the ElePass browser extensions around December and we have learned a lot about browser extensions and how they operate within the Vue framework. As we prepare for launching the next significant update to the browser extensions, we thought it would be a great opportunity to share some of our development practices and learnings as we improve ElePass for your browser. In this first post, we are going to lay the ground work for where ElePass for Browsers is currently and what our initial plans on for improving the inner workings of the extension.

As we release new builds of the extension, we will update the blog posts and and create new parts of the series to encourage other developers to use Vue in their browser extensions.

The Inner Workings of the Extension

Let’s start by establishing common ground with the technologies and packages that power that the extension.

First, our extension is powered using Vue.js and is implemented as a Single Page Application (SPA). It’s very common for extension developers to use vanilla JS in their extension and maintain the flow using static path URLs. This is great for the smaller projects, with only a couple of pages of use, but it’s really complicated for extensions that have a wide range of dynamic possibilities. Since the ElePass web app is built using Vue as a SPA, we wanted to continue that trend and make the maintenance as easy as possible for us in the long term.

Second, our extension utilizes the Vuetify component framework for handling the UX/UI design principles and gives us the opportunity to utilize well-crafted components throughout the development process. This helps speed up our development and keeps a consistent branding image across our extension and web app.



Third, we utilize Laravel Mix to compile all of our code and keep Webpack simple to use. Instead of creating something really complex and hard to maintain, Laravel Mix gives us the opportunity to only use a few lines of code to really speed up compiling our Vue components and keep the development process simple. With the help of Laravel Mix, we are able to keep the build process segmented for our different browser builds, since nearly every browser (Edge, Chrome, Firefox and Safari) have different requirements for their extensions and how their code needs to operate.

Last, all of the smaller parts of the project. We utilize Vuex for handling the different states and managing the data across the extension and ESLint for keeping our code clean and following a common practice. Outside of these core packages – the rest of the extension was built and ready to work as a small component of ElePass and not expected to need to worry about too much logic. With that in mind.. we jump into the areas of improvement and what our next few blog posts will be written about.


Areas of Improvement

As the extension grows and takes on the opportunities to replicate the core web app responsibilities, we need to structure the code base to be more segmented while being simple to maintain down the road. Since the app was built to be simple from the beginning, it’s not established enough to handle complex situations – like proper page routing or handling the more advanced browser API features that are available (like context menu support).

Over the next few months, we are going to explore these different areas of opportunity and write about your journey to improve the ElePass extension and provide insights for other developers who are looking at creating browser extensions using Vue.js.

  • Transitioning from standard JS to TypeScript across the extension
  • Improving the Vuex flow
  • Refactoring the background script experience
  • Improving the integration between the extension and the browser background APIs
  • Building for Safari
  • Handling the complexities of building for Firefox
  • Maintaining code across all major browsers
  • Auto-publishing to the browser web stores
  • Implementing a CI pipeline using VSTS
  • Integration testing with browser extensions
  • Adding context menu support using the browser APIs

ElePass is an agency password management solution built with the purpose of enhancing the security within agencies and other businesses who work with clients on a regular basis. If you would like to try out ElePass and see our browser extensions in use, we have a FREE 14-day trial available to explore the full feature set of ElePass. Once your trial is finished, you can continue using ElePass as a single user as part of our no cost freelancer plan.