vue开发chrome插件

使用 Vite + vue3 + tailwind.css 开发chrome 插件

创建项目

pnpm create vite chrome-markdown --template vue
cd chrome-markdown/
pnpm install

安装 tailwind.css

pnpm install -D tailwindcss

配置 tailwind.css

touch tailwind.config.js

/** @type { import('tailwindcss').Config } */
module.exports = {
    content: ['./src/**/*.{html,vue}'],
}

在 style 目录下创建 tailwind.scss

@tailwind base;
@tailwind utilities;

在 main.ts 中引入

import './style/tailwind.scss'

需要安装 scss 需要的依赖

p add sass -D

创建 manifest.json

{
  "name": "markdown-editor",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  }
}

配置多页面

vite.config.ts

import path from 'path'
// ...other import
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        main: path.join(__dirname, 'index.html'),
        popup: path.join(__dirname, 'popup.html')
      },
    }
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, './src')
    }
  }
})

需要安装 @types/node

创建 popup,html 文件，修改js文件路径

<script type="module" src="/src/popup/main.ts"></script>

创建 src/popup 目录，创建 main.ts、App.vue

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@/style/tailwind.scss'

createApp(App).mount('#app')

// app.vue
<template>
    popup
</template>

点图标就有弹窗了

开发的时候也要输出到 dist 目录，改一下 dev 命令

{
    "dev": "vite build --watch"
}

加一组icon

图片要放到public目录，

manifest.json 打包的时候要放到dist目录里去, 安装一下 rollup-plugin-copy

import copy from 'rollup-plugin-copy'
{
  build: {
    rollupOptions: {
      // ... other
      plugins: [
        copy({
          targets: [
            { src: './manifest.json', dest: "dist" }
          ],
          hook: 'writeBundle'
        })
      ]
    }
  },
}

manifest.json

{
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon-16.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  "icons": {
    "16": "images/icon-16.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}