如何使用 CRXJS 搭建vite+vue3+ts版本的chrome插件

发表于 分类于 / Changyan：

介绍

这次是利用架子搭箭chrome插件，提高开发效率。这次使用到的插件是 crxjs，它能够快速、便利的帮我们搭好一个开发 chrome 插件的初始化项目。

安装 CRXJS

目前官网还是 vite3 的 beta 版本，建议后续根据官网 教程安装，这里仅做记录。

1
2
3
npm init vite@latest
# select Vue and TS
npm i @crxjs/vite-plugin@beta -D

修改 viteConfig

vite.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { crx } from '@crxjs/vite-plugin';
// @ts-ignore
import manifest from './manifest.json' assert { type: 'json' }; // Node >=17

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest }),
  ],
});

添加 manifest.json

1
2
3
4
5
6
{
  "manifest_version": 3,
  "name": "notion faster",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" }
}

安装 Tailwind CSS UI组件库

p.s. 也推荐按照官网提示安装：https://tailwindcss.com/docs/guides/vite#vue

1
2
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

改变 tailwind.config.cjs

1
2
3
4
5
6
7
8
9
10
11
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

给 style 添加 tailwind 基础样式资源

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;

静态文件位置

资源文件都放进 web_accessible_resources 中，在 js 中直接 import 导入即可。