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

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

背景


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


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


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

项目搭建


初始化


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

$ pnpm create vite

1.在public目录下新建manifest.json

内容如下:

{
    "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.jsonbackground.ts ,完整目录结构如下:

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 ,就是增加多一个入口文件,具体如下:

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.jsonscripts命令,需要针对background新增两个命令,具体如下:

{
  "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是腾讯出品的全端组件库,从桌面到移动,再到小程序,应有尽有,大家可以去尝尝鲜tdesign.tencent.com/

pnpm add tdesign-vue-next

2.开发UI,这里就直接撸代码就行,就不展开来讲,主要需要注意的是,需要和background.js通讯的部分,比如需要和chatgpt发送信息,获取返回内容,具体如下:

const getSummary = () => {
    // 发送通讯,获取总结
    chrome.runtime.sendMessage(
        {
            type: 'summary',
            data: {
                diffs: []
            }
        },
        (response) => {
            console.log(response)
        },
    )
}

}

编写background.ts


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重新加载插件的时候出错,如:

61274e36a920715c64ffa2e78b08ef3.png

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

2.没法实时调试插件,每次都需要build后才能去调试,这里需要更改构建方式,因为我们build出来的页面才是我们需要的,所以我们需要在build时候增加--watch,然后真正发布构建的时候关闭watch,调整后,package.json内容如下:

{
  "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库和相关生态可以使用,能提高开发效率
目录
相关文章
|
1月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
116 2
|
1月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
248 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
3月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
66 11
|
3月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
807 1
|
3月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
135 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
3月前
|
Web App开发 人工智能 iOS开发
灵办AI助手Chrome插件全面评测:PC Web端的智能办公利器
《灵办AI助手:Mac OS下的高效办公利器》 灵办AI助手是一款专为提升工作效率而设计的浏览器插件,适用于Chrome、Edge等主流浏览器,在Mac OS系统中表现尤其出众。本文将深入评测其核心功能,包括网页翻译、AI对话、AI阅读及代码辅助等,展示如何在实际工作中运用这些功能来提升效率。此外,文中还提供了详细的安装与设置指南,帮助读者轻松上手这款办公神器。无论你是学生、职场人还是开发者,灵办AI助手都能成为你提高生产力的理想选择。
120 0
|
2月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
441 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
9天前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
|
11天前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。