Quasar and Browser Extension Development - Getting BEXy - Part 1

Part 1 - Introduction

This article series has 3 parts:

• Part 1 - Introduction (You are here now)
• Part 2 - Developing your Browser Extension
• Part 3 - Building and Publishing your Extension

We in the Quasar Framework team have recently published a new mode of development to top all the other great modes which include SPA, SPA with Server-Side Rendering(SSR), PWA, PWA with SSR, desktop apps via Electron and Mobile Hybrid apps via either Cordova or Capacitor.

This new mode, which we affectionately call "BEX mode", is for developing and building Browser Extensions(BEXs) for Chrome and Firefox. This new development and build mode puts Quasar into its own league of framework, as no other framework offers so many build targets with one single code base, as Quasar does.

To get you familiar with developing a browser extension with Quasar, we'll be building a simple BEX step by step. But first, let's get you started.

What is a Browser Extension?

Seeing this article was written on a developer blogging website for developers, hopefully we don't really need to explain to you what a browser extension is.

So, tl;dr; you can go to the next section.

But, if you just happen to have woken up from a coma that lasted the last decade or so, we'll quickly explain what a browser extension is for you.

Here is a quote of the definition from Google's Chrome documentation (the definition is valid for any browser that supports extensions).

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

An extension must fulfill a single purpose that is narrowly defined and easy to understand. A single extension can include multiple components and a range of functionality, as long as everything contributes towards a common purpose.*

So, the things to take away from this are:

• an extension can be built with standard HTML, CSS and JavaScript
• an extension should do one thing and do it very well, like offer the management of "todos".

What can a BEX do?

As just mentioned (and it can't be said enough) Browser extensions should have the goal to do one thing and do that one thing well. In order to do that one thing well though, a browser extension can do the following:

• Override page content
• Add to (or alter) the browser’s interface
• Intercept page requests
• Be a full featured app that runs in the browser
• Interact with and alter the development tools of the browser
• Save data in the browser's own storage/ persistence system

And, a browser extension can also do these following things or rather can run in different ways or parts of the browser. BEXs can run:

• in it’s own tab in the browser
• in the Developer Tools window.
• in a Popup window.
• as an Options window.
• in the context of a web page (injected into a website)

That's a lot of power at your fingertips, isn't it?

What will we build?

As mentioned above, we want to give you a basic understanding of building a browser extension. To do this, we are going to build a simple, yet somewhat different To-do app. This short video will show you the app's basic functionality.

As you can see, we can "save" search result links from a Google search page in order to come back to them later. And, we can also save the odd todo task in the list of todos too. These todos will all be persisted via the browser. That way, when you come back to the browser, all you need to do is turn on the extension via the Quasar button top right and you can click on your saved links and view and manage your todos.

We'll be taking advantage of these features of a browser extension:

• Overriding page content
• An additional full featured app inside the browser
• Save data in the browser's storage/ persistence system
• Injecting into the context of a web page

Sound like fun? Ok. Let's go!

Getting Started

If you haven't already, please install Quasar Framework's awesome CLI. It is key to using the Quasar Framework to its fullest.

# Node.js >=10 is required.

$ yarn global add @quasar/cli

# or

$ npm install -g @quasar/cli

Now that you have the CLI installed, lets create your project.

$ quasar create my-bex-project

Replace "my-bex-project" with whatever name you'd like. Follow the instructions carefully. For the most part, you can take the defaults, so just keep pressing enter.

Once the project is initialized, "cd" down into your project folder and run:

$ quasar dev -m bex

You'll be asked a single question about the IP address you should use for the connectivity to the browser extension. Select the one you want to use and hit enter. You'll see something like this when asked for the IP address to use.

Contrary to normal modes of development with Quasar, you won't get a browser window opening up. But, what you will see is this new folder structure under /src-bex.

Let's look into that.

The src-bex Folder and its Contents

The manifest.json File

The manifest.json file is the most important file for browser extensions. The brower reads this file to configure and run the extension. The file tells the browser what the most important files are and the browser capabilities the extension might use. To be able to create good BEXs, you'll need to know more about the manifest file.

We'll dig deeper into this file and what it does in Part 2.

The www Folder

This folder holds the "running" files for the browser extension.

When you run quasar dev normally, the files it generates are kept in memory and the dev server doesn't save any of those "built" files. On the contrary with BEX mode, the manifest needs physical files, so instead of keeping those files in memory, BEX mode saves the webpack dev compilation to disk. This compilation is what is in the www folder. Any time HMR recompiles, adds something, etc., it will be saved to the www folder. This in turn means it's auto generated and shouldn't be altered. It automatically gets cleaned up on each quasar dev -m bex call.

The js Folder

This is the code that runs in the context of the BEX, this includes the "bridging" code between your Quasar app and the browser. It will suffice to say for now, this should be the place to write your "backend" code for your extension. We'll go into more detail about these files in Part 2.

The icons and css Folders

These folders hold the assets needed for your browser extension, for instance the logo for the extension itself, which the consumer will see on the top right of their browser, as shown below.

We'll also cover the icons' usage a bit more in Part 2. Btw, we also have a tool called IconGenie that can generate the icons for you.

Conclusion

So, there you go. We've gone over what a BEX is, got a running BEX mode in Quasar going (but can't see it yet) and got a general idea what is in the generated BEX source files under the src-bex folder.

In the next part, we'll dive into developing our Todo BEX.

Let us know in the comments below, if you are thinking about building a browser extension with Quasar's BEX mode.

For more Info:

The Quasar Website
More on BEX Mode
More about Icon Genie