How to write a browser extension to replace fonts with Quasar and Vue 3

Some extensions add new features to the browser, while others provide data about visited web pages:

• Wappalyzer talk about the technologies that were used in the development of the site.
• Similar web shows the traffic and ranking of the site.
• momentum changes the content of the pages or replaces the home page.

I will talk about developing a Chrome extension on Vue 3 and Quasar. This is an extension that will change the font size on the web pages you visit. Details – to the start of our course on Fullstack-development in Python.

As [обычно] extensions arranged

• Project file manifest.json contains all of the extension’s metadata.
• Extension scripts are run after it is installed. File manifest.json specifies where the scripts are run. We’ll talk about this in detail below.

Writing an extension with the Quasar framework

BEX – Quasar application type for browser extensions – stands for Browser Extensionwhich is a browser extension. Quasar BEX was developed and tested for Chrome and Firefox, but should work in all browsers with the Chromium engine.

New Quasar project

If you haven’t installed yet quasar-clido this and create a new Quasar project:

$ yarn global add @quasar/cli
$ yarn create quasar

# или:

$ npm i -g @quasar/cli
$ npm init quasar

• Select App with QUasar CLI
• Enter a name for your project. Quasar will create a new folder and initialize your project [создаст скелет проекта, его основную структуру, настройки по-умолчанию и т. д.] in her.

If the project is in an already existing folder, instead of its name you will see .

• Select Quasar V2 with Vue 3
• Choose TypeScript or JavaScript. I’m using TypeScript.
• Initialize the project through Vite.
• Fill in the remaining fields with the default values, or change them if needed.

Specifics of creating extensions with Quasar

Set the Quasar application type to BEX. BEX is a set of Quasar helper functions.

Quasar allows you to specify the location of the extension:

BEX mode in Quasar:

To create an application, add BEX mode to Quasar:

quasar mode add bex

And if you want to start developing right away, to add a mode to the project BEX and (if not present) a folder src-bex/run another command:

quasar dev -m bex

Select Manifest Version 3. While this article is being written, it only works in Chrome.

To better deal with src-bexread article about the structure of this folder.

BEX setup

The most important BEX configuration file is − /src-bex/manifest.jsonthat is, the same manifest filewhich I mentioned when discussing how browser extensions work.

Before proceeding, I advise you to read his device. It tells you how to change the extension icon and other important settings.

You need to know that two scripts participate in the operation of each BEX application:

• Script running in the background, runs in the context of the BEX application itself and listens for all of its events. There is always only one instance of a background script in a BEX application.
• Content Script runs in the context of a web page. A copy of this script is created for each tab with the extension running.

For more information on setting up a BEX application, see Quasar documentation

Extension testing

Open Google Chrome and go to chrome://extensions. Make sure you have enabled developer mode. Click on “Download unpacked extension” to install your extension in the browser. Select a folder with manifest.json – here it is the root folder of the assembly (build) of your project. Download this folder. In Chrome it is in /dist/bex.

Once downloaded, you can use the menu in the top right corner of Chrome to access the extension. The application will then launch.

To update an extension, click its reload button.

Functional

To increase the font, add CSS to the file at src-bex/assets/content.css. This file overrides the CSS on all pages where the extension works.

Here is his code:

/* src-bex/assets/content.css/
p,
span,
code {
  font-size: 21px !important;
  line-height: 175% !important;
}

Update the extension and you will see that the font size on the sites has changed.

Bonus

If you want to replace the page that appears when you open a new tab in Chrome with a file src/my-content-script.ts add code:

{
  "chrome_url_overrides": {
    "newtab": "www/index.html"
  }
}

Conclusion

In the extension, you can write JavaScript code that will run on visited sites and block ads. I talked about the basics of developing browser extensions. If you would like to know more, check out documentation for Chrome extensions and Quasar BEX documentation.

And we immerse you in a modern IT environment so that you can upgrade your career? have mastered a new profession or gained experience in the field of information technology. 45% discount with promo code HABR.