另外,以上项目结构已经没有src/App.vue了,现在先不用删除,随着后续章节的讲解再删除。 接下来,就按照上面的目录结构设计开始构建项目。 5 针对Chrome Extension的Vite配置 按照Chrome Extension的规范要求,build出popup项目、content script、background script。 5.1 设置全局配置 在项目根目录下新建globalConfig.js: /...
其中的build:watch 是在开发的时候需要监听文件的变化 随时来重新自动build 然后浏览器那边reload文件方便而添加的 代码语言:javascript 复制 "build:watch":"nodemon --watch src --exec npm run build --ext \"ts,vue\"", 基础工作完成之后,直接去vite-plugin-chrome-extension的库里面找到对应的示例:vue-eleme...
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 页面...
Please check:vite-chrome-extensionfor a more simpler template Features Vue 3 - Composition API,Script setupand more! Vue 3 app in Content Script too (template added) Vue devtools support HMR for extension pages and content scripts SampleonInstall&onUpdatepages ...
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目录下都...
"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 extension v3 示例(vite) 背景 项目中使用的chrome extension是v2版本的,不支持一些新特性,比如方法的promise化。 同时希望对框架进行整体的升级,以储备踩坑经验 功能 基于之前的开发痛点,希望新的项目如下 框架: 包管理:pnpm vue 3 typescript 打包工具:vite...
使用Vue3、TypeScript、Vite、Naive-ui、Less、Pinia开发Chrome V3插件 一、使用Vite创建Vue项目 shell复制代码npm create vite@latest # npm yarn create vite # yarn pnpm create vite # pnpm 选择Vue和TS 进入项目,并进行pnpm i安装node_modules shell ...
{"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"},...} ...