如何使用Quasar App开发支持manifest v3的Chrome Extension

本文最后更新于：2022年3月16日 晚上

原因

对于现在而言，发布Chrome Extension 到 Chrome Web Store 已经被谷歌强制使用manifest v3了

而Quasar框架最近才刚刚在 Quasar CLI APP Vite中支持manifest v3，所以这个教程有短暂的存在的必要

为什么要用Quasar开发Browser Extension

主要原因，是因为当你想要在Chrome Extension中使用Vue3的时候会有一堆关于内联JS执行的破事等着你

所以让Quasar一次性解决这些该死的破事

先决条件

  1. 需要安装npm和yarn

对于未安装Quasar CLI的

首先安装cli

1
2
3
yarn global add @quasar/cli
# 或者
npm i -g @quasar/cli

从零开始创建Quasar App的Chrome Extension

创建Quasar项目

先在命令行中cd到你想存放项目的父目录，然后执行

1
2
3
yarn create quasar
# 或者
npm init quasar

接下来进行对项目的配置

命令行会出现如下选项, 按键盘上下键选择选项

选择第一个回车确认

1
2
3
4
? What would you like to build? » - Use arrow-keys. Return to submit.
>   App with Quasar CLI, let's go! - spa/pwa/ssr/bex/electron/capacitor/cordova
    AppExtension (AE) for Quasar CLI
    Quasar UI kit

然后输入你的项目名

1
2
√ What would you like to build? » App with Quasar CLI, let's go!
? Project folder: » {项目名}

选择第一个选项并回车

1
2
3
4
5
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... myproject
? Pick Quasar version: » - Use arrow-keys. Return to submit.
>   Quasar v2 (Vue 3 | latest and greatest) - recommended
    Quasar v1 (Vue 2)

选择JS或者TS，取决于你决定怎么开发

1
2
3
4
5
6
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... myproject
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
? Pick script type: » - Use arrow-keys. Return to submit.
>   Javascript
    Typescript

这里就是关键点

选择第二行Quasar App CLI with Vite (BETA stage)

因为只有这个APP模式才能选择manifest v3

所以选自第二行并回车

1
2
3
4
5
6
7
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... myproject
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
? Pick Quasar App CLI variant: » - Use arrow-keys. Return to submit.
>   Quasar App CLI with Webpack (stable)
    Quasar App CLI with Vite (BETA stage)

包名

1
2
3
4
5
6
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... myproject
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite (BETA stage)
? Package name: » myproject

略过产品名Project product name，描述Project description，和作者Author….

选择CSS preprocessor，取决于实际情况

1
2
3
4
5
6
7
8
9
10
11
√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... myproject
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite (BETA stage)
√ Package name: ... myproject
...
? Pick your CSS preprocessor: » - Use arrow-keys. Return to submit.
>   Sass with SCSS syntax
    Sass with indented syntax
    None (the others will still be available)

这里我会选择Vuex，毕竟ESLint破事太多(看个人意愿)

1
2
3
4
5
6
7
8
9
10
11
12
√ Pick your CSS preprocessor: » Sass with SCSS syntax
? Check the features needed for your project: »
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
(*)   ESLint - recommended
( )   State Management (Pinia)
( )   State Management (Vuex) [DEPRECATED by Vue Team]
( )   Axios
( )   Vue-i18n

略过preset

最好使用yarn

Install project dependencies? (recommended) » - Use arrow-keys. Return to submit.
1
2
>   Yes, use yarn
    No, I will handle that myself

等待执行完毕

设置Bex模式

首先需要cd到项目目录

1
cd {填写的Project folder的值}

执行命令quasar mode add bex

在这里选择Manifest v3并回车

1
2
3
? What version of manifest would you like? (Use arrow keys)
> Manifest v2 (works with both Chrome and FF)
  Manifest v3 (works with Chrome only currently)

完成

然后就可以安安心心开发Manifest v3的Chrome插件了

教程
教程

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！