使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件

一、使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件

一、创建 Vue 项目

1. 使用 Vite 创建 Vue 项目

npm create vite@latest # npm
yarn create vite			 # yarn
pnpm create vite			 # pnpm

选择 Vue 和 TS

进入项目，并进行 pnpm i 安装 node_modules

pnpm i # 安装包

2. 安装 CRXJS Vite 插件

pnpm i @crxjs/vite-plugin@beta -D # 安装 CRXJS Vite 插件

3. 创建 Manifest.json 文件

{
   
  "manifest_version": 3,
  "name": "CRXJS Vue Vite Example",
  "version": "1.0.0",
  "action": {
   
    "default_popup": "index.html"
  }
}

4. 修改 Vite.config.ts 配置文件

import {
    defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {
    crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert {
    type: 'json' } // Node >=17

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [
    vue(),
    crx({
    manifest }),
  ],
})

5. 运行 pnpm run dev 命令

可以看到多了个 dist 文件夹，这个就是构建好的插件安装包

.
├── README.md
├── dist
│   ├── assets
│   │   └── loading-page-1924caaa.js
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker-loader.js
│   └── vite.svg
├── index.html
├── manifest.json
├── package.json
├── pnpm-lock.yaml
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

6. 安装插件

打开浏览器输入：chrome://extensions，点击【加载已解压的扩展程序】选择 dist 文件夹进行安装

插件页面

popup action 页面

二、配置项目

1. Chrome TS 配置

1.1. 安装 chrome-types 模块

pnpm i chrome-types -D

1.2. 在 src/vite-env.d.ts 中增加以下配置

/// <reference types="chrome-types/index" />

2. 配置 content 脚本文件和 content 页面

1. 在 src 下新建 content 文件夹和 contentPage 文件夹

1. co