Browser extensions allow us to extend the functionality of our browsers. Some extensions provide us with additional data about the web pages we visit for example:
- Wappalyzer - Provides us with information on what technology was used to build a website
- Similar web - Provides web page traffic and ranking data
Others replace your default home screen, for example: momentum while others modify the contents of web pages.
What we'll build
In this article, we'll be creating a chrome extension using Vue 3 and Quasar. Our extension will change the font size of text on any page we visit. This could, for example, be useful for accessibility.
How browser extensions [generally] work
- You create your project with a
manifest.jsonfile. This contains all relevant metadata for your extension. - Write the scripts that will run when your extension is installed, and setup where those scripts will run through the
manifest.jsonfile created in the first step.
Creating an extension using quasar
It is worth noting that Quasar BEX has been tested and developed on Chrome and Firefox, but all Chromium based browsers should work the same.
Create a new quasar project
If you haven't already, install the quasar-cli and create a mew quasar project by running:
$ yarn global add @quasar/cli
$ yarn create quasar
# or:
$ npm i -g @quasar/cli
$ npm init quasar
- Select
App with QUasar CLI - Enter the name of your project. Quasar will create a new directory and initialize the project in that directory.
If you're creating the project in a directory you have already created, then you can set the directory name as
. - Pick Quasar V2 with Vue 3
- Pick either Typescript or Javascript. In this example, we'll be using Typescript, but you should be able to follow along with Javascript.
- Initialize your project with Vite.
- Complete the rest of the prompts with the defaults or alter as needed.
Context around extensions in Quasar
Extensions in Quasar can be created by setting the Quasar application type to BEX. BEX stands for Browser Extension, and is a set of utility functions provided to us by Quasar. Quasar can handle the various places where our extensions can live:
- New tab
- Dev tools, Options & Popup
- Web Page - This allows us to inject our Quasar application into other web pages. It is the most powerful of the three.
Add Quasar BEX mode
In order to build a BEX, we first need to add the BEX mode to our Quasar project:
quasar mode add bex
If you'd like to jump straight into development, you can run the following command instead to add BEX mode automatically and add the src-bex/ directory to your project if it is missing:
quasar dev -m bex
Select Manifest Version 3 when creating the application. As of this article's writing, this will only work in Chrome.
You can check this out to understand the anatomy of the src-bex directory.
Configuring BEX
The most important config file for your BEX is /src-bex/manifest.json. This is the same manifest file we talked about when we were discussing how browser extensions work.
It is recommended that you read up on the structure of this file before proceeding. Here, you will find details on how to change the icons of your extension as well as other relevant options.
The TL;DR of what we need to know for this project is that there are 2 scripts behind every BEX:
-
Background Script - runs in the context of the BEX itself and can listen to all available browser extension events. There will only ever be one instance of each background script per BEX.
-
Content Script - runs in the context of the web page. There will be a new content script instance per tab running the extension.
Further documentation on configuring your bex can be found in the official Quasar documentation.
Testing your extension
Open Google Chrome and go to chrome://extensions. Ensure you have Developer mode checked. Click on "Load unpacked extension" to install our extension. Select the directory that contains your manifest.json, which in this case would be the root directory of your project's build directory, and load it. For Chrome, that would be /dist/bex.
Once you have loaded the extension, you can use the extensions menu on the top right (in Chrome) to access your extension. This should launch a Quasar application.
If you wish to update your extension, you'll need to click the reload extension button in Chrome.
Adding the functionality
In order to make this happen, we'll simply need to add our custom font-modification CSS to our extension in src-bex/assets/content.css. This file allows us to override the CSS of any web page we visit. Below is the CSS:
/* src-bex/assets/content.css/
p,
span,
code {
font-size: 21px !important;
line-height: 175% !important;
}
If you refresh your extension now and visit any web page, you'll find that the font-size.
Bonus
If you wanted to replace the page that appears when you open a new tab in Chrome, all you'd need to add is the following to your src/my-content-script.ts:
{
"chrome_url_overrides": {
"newtab": "www/index.html"
}
}
Conclusion
There is so much more we could do with extensions, like injecting JavaScript that alters the pages we visit to building ad-blockers. This article is meant to be an introduction to the concepts around creating browser extensions. If you'd like to learn more about creating browser extensions, you can check out the chrome extension documentation and Quasar's BEX documentation.
