vpv

vite-plugin-vue-crx3

本Vite插件用于使用vite2+vue3开发chrome拓展(manifest v3),且支持开发过程中插件热重载

Showing:

Popularity

Downloads/wk

6

GitHub Stars

13

Maintenance

Last Commit

18d ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

vite-plugin-vue-crx3

本 Vite 插件用于使用 vite2+vue3 开发 chrome 拓展(manifest v3),且支持开发过程中插件热重载

推荐环境

  • node: v14+
  • npm: v7+
  • manifest version: 3
  • vite2+vue3

使用方法

1、安装插件

npm i -D vite-plugin-vue-crx3

2、一般开发项目结构

一个 chrome 拓展一般包含多个入口 js(background.js、若干 content_scripts 类 js),以及多个入口 HTML(popup.html、newtab.html 等),所以需要采用 vite2+vue3 开发多页应用的模式,开发后打包生成多个入口文件。

但是往往一个 Chrome 拓展的入口 js 和 html 个数和名称都是不固定的,如果直接配置到 vite.config.js 后,还需要兼容修改 manifest.json,很麻烦。

所以,本插件的核心就是:就以 manifest.json 作为入口文件,自动分析 manifest 中的开发配置,获取 vue 应用的各个入口文件,打包时自动将 manifest.json 中开发路径更新为生产路径。

一般建议的开发目录结构如下,不强制要求:

|-public // chrome 语言包放 public 里
|-src
|--|-manifest.json // 开发的入口文件,从中可解析真实的入口文件
|--|-assets
|--|-store
|--|-libs // 我一般习惯把 Chrome 拓展相关的开发文件都放在一个文件夹下面
|--|--|-popup.html
|--|--|-newtab.html
|--|--|-newtab
|--|--|--|-main.js
|--|--|--|-App.vue
|--|-store // 把 store 拿出来,可以作为多页共享的数据
|--|-components // 一些常用的 vue 组件
|-vite.config.js
|-package.json
|-dist // 打包后的 Chrome 拓展源文件

3、配置 vite.config.js

vite 配置的核心就是引用插件、设置入口文件。

import { defineConfig } from "vite"
import { resolve } from "path"
import vue from "@vitejs/plugin-vue"
import { crx3 } from "./es/index.js"
export default defineConfig({
    plugins: [vue(), crx3()], // crx3即为插件入口函数
    resolve: {
        alias: {
            "@": resolve(__dirname, "src"),
        },
    },
    build: {
        target: "es2015",
        rollupOptions: {
            input: resolve(__dirname, "src/manifest.json"), // 将源码中的manifest.json作为入口文件
        },
    },
})

4、manifest.json 设置注意事项

放在 src 下的 manifest.json 只服务于开发环境,因此 manifest.js 设置各个入口文件时,路径按照常规思维设置其相对路径即可,插件打包时会自动更新打包后的路径。

比如,我们基于 src/libs/background/main.js 来开发 backround.js 文件,那么其设置:

{
    "manifest_version": 3,
    "name": "__MSG_appTitle__",
    "version": "1.0.0",
    "description": "__MSG_appDescription__",
    "host_permissions": ["<all_urls>"],
    "background": {
        "service_worker": "./libs/background/main.js" // 直接设置manifest.json的相对路径即可,不需要考虑真实插件的路径
    }
}

5、插件热重载

推荐:在 package.json 中配置专门用于插件热重载的指令:

"scripts": {
    "watch": "vite build --watch", // 开发时使用
    "build": "vite build",
}

这样,开发时使用:npm run watch,即可启用热重载功能,其体现在 2 个方面(修改保存时):

  • Chrome 浏览器自动更新当前开发的插件;
  • 正在调用的网页会自动刷新。 省时省力~

当然,如果要打包发布,请最后还是使用:npm run build。热重载时,dist 中会生成多个和你项目无关的、支撑热重载功能的临时文件。

插件原理

下图展示了整个插件的思路,核心包含 2 部分:

  • 根据入口 manifest,解析项目中全部的入口文件,其中 background.js 和全部类型的 content_scripts 均会以 iife 模式打包;
  • 独立的热重载插件,会生成临时文件支撑插件和网页的重载。 crx3插件逻辑示意图

版本功能

v1.0

  • 支持解析 manifest.json 配置的各类 js 和 html 入口文件,并验证文件有效性
  • 自动解析通过 chrome.scripting.insertCSS、chrome.scripting.executeScript 动态导入的资源文件和 js 文件。
  • 自动解析代码中调用的 Chrome API 并更新 manifest 中的权限(除 tabs、activeTab、webRequestBlocking、background 四个权限未处理)
  • 将 background、content_scripts 类 js 默认打包为 iife 模式(由于 Chrome 91+ 支持 background 使用 es 模具,固如果 manifest.json 中 background.type=module,则 background 不会进行 iife 打包)
  • 不论开发目录如何设置,打包后插件的各类入口文件均在目录顶层,并自动更新生成的 manifest.json 中各文件路径。
  • 通过时间戳文件和轮询,实现 Chrome 拓展的自动重载。
  • 通过 getManifest 和轮询,实现拓展重载后,各网页的自动刷新。

todo...

  • 对 manifest.json 进行格式、字段的校验并提醒。
  • (常用开发场景)支持 vite2+vue3 快速开发嵌入页面,即自动通过 content_scripts 将页面组件嵌入网页。

参考

当有了编写该插件想法时,查找了一些相关资料,并发现了一个同类型的 rollup 插件[vite-plugin-chrome-extension](https://github.com/StarkShang/vite-plugin-chrome-extension),在本插件开发过程中有较多的借鉴。

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial