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.jsoncontains all of the extension’s metadata.
- Extension scripts are run after it is installed. File
manifest.jsonspecifies 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
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
Quasar V2 with Vue 3
- 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.
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
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
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.
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:
font-size: 21px !important;
line-height: 175% !important;
Update the extension and you will see that the font size on the sites has changed.
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:
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.
Data Science and Machine Learning
Python, web development
Java and C#
From basics to depth
As well as