其中的build:watch 是在开发的时候需要监听文件的变化 随时来重新自动build 然后浏览器那边reload文件方便而添加的 代码语言:javascript 复制 "build:watch":"nodemon --watch src --exec npm run build --ext \"ts,vue\"", 基础工作完成之后,直接去vite-plugin-chrome-extension的库里面找到对应的示例:vue-eleme...
另外,以上项目结构已经没有src/App.vue了,现在先不用删除,随着后续章节的讲解再删除。 接下来,就按照上面的目录结构设计开始构建项目。 5 针对Chrome Extension的Vite配置 按照Chrome Extension的规范要求,build出popup项目、content script、background script。 5.1 设置全局配置 在项目根目录下新建globalConfig.js: /...
npm create vite@latest extension---template vue cd extension npm install npm run build 增加Chrome extension支持 dist 文件内部会编译出一个网页,接下来要让chrome能够加载这个网页。 在dist文件夹内部增加 manifest.json 即可。文档地址 manifest.json 文件如下: {"name":"vite","version":"1.0.0","manifest...
打开浏览器输入:chrome://extensions,点击【加载已解压的扩展程序】选择 dist 文件夹进行安装 插件页面 image.png popup action 页面 image.png 7. HMR 热加载 7.1. Manifest.json 热加载 添加description "description":"this is my Crxjs&Vue Chrome ext", 无需刷新插件和插件页面 image.png 7.2. Popup 页面...
chrome extension v3 示例(vite) 背景 项目中使用的chrome extension是v2版本的,不支持一些新特性,比如方法的promise化。 同时希望对框架进行整体的升级,以储备踩坑经验 功能 基于之前的开发痛点,希望新的项目如下 框架: 包管理:pnpm vue 3 typescript 打包工具:vite...
git clone https://github.com/1163895390wjh/chrome-extension-vite.git #或者国内源 git clone https://gitee.com/mr-jinhui/chrome-extension-vite.git npm install -g pnpm pnpm install # 开发调试 npm run dev # 生产编译 npm run build # 以上两条命令都会生成编译文件,在output目录下 # zips目录下都...
CRXJS Vite PluginBuild a Chrome Extension with Vite Github build and release actions Please create an issue if you feel some feature is missing or could be improved. Pre-packed Vite Plugins unplugin-vue-router- File system based route generator for Vite ...
{"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"},...} ...
"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" ...
Chrome 扩展(目前还在开发中) 下面来看看如何通过Vite 插件和独立应用来使用 Vue DevTools。 注意: DevTools 仅兼容 Vue 3。如果使用 Vue2,请改用 vue-devtools。 如果使用 Nuxt,请使用 nuxt-devtools 以获得更强大的开发者体验。 Vite 插件 第一种运行 Vue DevTools 的方法就是 Vite 插件。如果项目使用 Vite,...