Fork me on GitHub

如何用vite+vue-next快速开发chrome插件

字数统计: 1.5k字   |   阅读时长≈ 6分

背景

之前写过一篇文章《从开发chrome插件到插件系统设计》，主要讲述了如何开发一个chrome插件和chrome插件设计，感兴趣的同学可以再去看看。

目前主流web应用都是基于Vue、React等现代框架去开发，Chrome插件本身而言其实也是一个web应用，看它的组成部分popup.html + contentscript + background.js ，只需要在开发的时候调整一下构建脚本基本上就可以利用Vue、React等现代框架去开发了。

接下来，我们就一步步开始实战。

项目搭建

初始化

利用vite初始化项目命令快速搭建，具体如下：

1
$ pnpm create vite
  1. 在public目录下新建manifest.json

内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

{
    "name": "ngptcommit",
    "version": "1.0",
    "description": "ngptcommit自动生成git commit信息",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "index.html"
    },
    "icons": {
        "16": "images/favicon-16x16.png",
        "48": "images/favicon-32x32.png",
        "64": "images/android-chrome-192x192.png",
        "128": "images/android-chrome-192x192.png"
    },
    "background": {
        "scripts": [
            "background/background.js"
        ]
    },
    "permissions": [
        "tabs",
        "storage",
        "http://*/*",
        "https://*/*",
        "activeTab",
        "contextMenus",
        "notifications",
        "webRequest",
        "webRequestBlocking",
        "cookies",
        "unlimitedStorage",
        "webNavigation",
        "identity",
        "identity.email",
        "identity.read",
        "identity.write",
        "identity.launch.webauthn",
        "identity.launch.webauthn",
        "identity.manage.accounts"
    ]
}

新增插件必须的文件，如：manifest.json和 background.ts ，完整目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
chrome-extension
├── README.md
├── index.html
├── package.json
├── public
|  ├── images
|  └── manifest.json
├── src
|  ├── App.vue
|  ├── background.ts
|  ├── components
|  ├── main.ts
|  ├── style.css
|  └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

调整编译

由于vite初始化项目只针对web应用设计，但是我们开发chrome插件还需要针对background.ts 去做编译，就是要做多入口编译，而且vite本身就是基于rollup为基础去实现的少量配置即可完成一个web应用打包。

一套构建指令，它使用Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。—— Vite官网介绍

所以我们其实可以使用Rollup去打包我们的background.ts ，就是增加多一个入口文件，具体如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        index: path.resolve(__dirname, 'index.html'),
        background: 'src/background.ts',
      },
      output: {
        entryFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
        chunkFileNames: `[name].js`,
      },
    },
  },
})

其中有几个地方需要说明一下：

  • output： 设置不加hash值，后续调试的时候插件不会出现加载不到文件的错误
  • rollupOptions：基本上和Rollup的配置项一模一样，所以有Rollup基础的基本上可以直接上手配置，而且也完全兼容Rollup的插件生态

接下来就是调整package.json中scripts命令，需要针对background新增两个命令，具体如下：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "@node-gptcommit/chrome-extension",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "rimraf dist && vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  ...
}
  • dev:background 代表开发模式
  • build:background 代表生产模式

到了这里基本上就完成了项目的搭建，接下来就进入开发阶段。

项目开发

UI开发

  1. 引入ui库 tdesign-vue-next ，tdesign是腾讯出品的全端组件库，从桌面到移动，再到小程序，应有尽有，大家可以去尝尝鲜https://tdesign.tencent.com/
1
pnpm add tdesign-vue-next
  1. 开发UI，这里就直接撸代码就行，就不展开来讲，主要需要注意的是，需要和background.js通讯的部分，比如需要和chatgpt发送信息，获取返回内容，具体如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const getSummary = () => {
    // 发送通讯，获取总结
    chrome.runtime.sendMessage(
        {
            type: 'summary',
            data: {
                diffs: []
            }
        },
        (response) => {
            console.log(response)
        },
    )
}

编写background.ts

1
2
3
4
5
6
7
8
9
10
import { getSummary } from '@node-gptcommit/summarize'
// 监听收到通讯，发起总结请求
chrome.runtime.onMessage.addListener(async (request: any, sender: any, sendResponse: any) => {
    const { type = 'fetch', data } = request;
    if (type === 'summary') {
        getSummary(data).then(res=>{
						sendResponse(res);
				})
    }
});

调试

在开发中遇到一个问题，就是如何快速调试chrome插件：

  1. build后会，构建完的文件会有带hash值，如：index.33addf.js，导致chrome重新加载插件的时候出错，如：

20230227

解决方案很简单，就是利用rollupOptions设置输出文件不带hash值即可。

  1. 没法实时调试插件，每次都需要build后才能去调试，这里需要更改构建方式，因为我们build出来的页面才是我们需要的，所以我们需要在build时候增加--watch，然后真正发布构建的时候关闭watch，调整后，package.json内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "@node-gptcommit/chrome-extension",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vue-tsc && vite build --watch",
    "build": "rimraf dist && vue-tsc && vite build",
    "preview": "vite preview"
  },
  ...
}

项目源码Github地址：node-ngptcommit，觉得有帮助的同学帮忙给个star给鼓励一下~❤️

后面基本上就是按照正常项目去开发即可，本文总结几个要点：

  • chrome插件开发和正常web应用不太应用，既包括了html页面，也包括background.js的js库开发模式
  • Vite的核心点其实是Rollup，如果掌握Rollup基本上对vite做二次配置也很容易入手
  • 为什么使用Vue，因为有大量的UI库和相关生态可以使用，能提高开发效率
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Qborfy

毕业于广大华软学院，软件工程师一枚！

Java出身，喜欢前端进行转岗，主攻全栈发展，技术有：Vue、React、Nodejs、Java等。

加我好友，多个朋友交流也不错~