【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码）
文章目录
- 知识点：
- 一、使用 vite 创建项目
- 1.1 环境搭建
- 1.2 安装vite工具
- 1.3 创建vite项目
- 1.4 进入项目并安装依赖
- 1.5 修改端口
- 1.6 运行项目
- 二、创建项目资源配置文件
- 2.1 设置vite项目资源路径
- 2.2 设置资源目录
- 2.3 配置别名
- 2.4 完整配置文件展示
- 三、创建浏览器插件配置文件——`manifest.json`
- 四、vite项目打包
- 五、浏览器插件打包
- 六、浏览器进行安装操作可以观看文章
知识点：
使用 vite 创建 vue3 项目:
- vue3 简介
- 项目基础配置
- 项目首页搭建
本文使用 vite 搭建了一个完整的 vue3 项目，并完成项目首页的开发
一、使用 vite 创建项目
vite 是由 vue 作者尤雨溪开发的一种最新的脚手架工具，相比我们熟悉的 webpack 它有一下几个特点：
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，
完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。
1.1 环境搭建
使用 vite 前要确保 node 版本在 12.0.0 以上。NodeJS官网下载
1.2 安装vite工具
全局安装 create-vite-app
npm i -g create-vite-app@1.18.0
1.3 创建vite项目
create-vite-app project_name
1.4 进入项目并安装依赖
cd project_name
npm install
1.5 修改端口
编辑 package.json 文件:
"scripts": {"dev": "vite --port 8080","build": "vite build"
},
1.6 运行项目
npm run dev
二、创建项目资源配置文件
在根目录文件夹下创建文件 vite.config.js。
2.1 设置vite项目资源路径
设置 vite 打包加载资源路径为相对路径。
module.exports = {base: "./",
};
2.2 设置资源目录
因为 vite 打包出来的资源文件默认为 _assets 但是浏览器插件在安装的时候不支持以 _ 开头的文件，所以要进行设置，设置打包资源目录为 assets。
module.exports = {assetsDir: "assets",
};
2.3 配置别名
配置别名是为了让我们在开发时书写路径更加方便。
const path = require("path");
module.exports = {alias: {"/@/": path.resolve(__dirname, "./src"),},
};
2.4 完整配置文件展示
vite.config.json 全部配置如下所示：
const path = require("path");
module.exports = {alias: {"/@/": path.resolve(__dirname, "./src"),},assetsDir: "assets",base: "./",
};
三、创建浏览器插件配置文件——manifest.json
在当前项目 public 文件夹下添加 manifest.json，并进行一下简单配置：
{"name": "我的插件","version": "1.12.0","manifest_version": 2,"description": "开发的第一款浏览器插件","icons": {"48": "./logo.png"},"browser_action": {"default_popup": "index.html"}
}
四、vite项目打包
npm run build
五、浏览器插件打包
将生成的dist文件夹进行打包操作：
zip -rqo dist.zip dist
打包出的浏览器插件压缩包dist.zip即为OK！！！
六、浏览器进行安装操作可以观看文章
【Chrome浏览器插件开发】浏览器插件运行机制02之实战开发出一款Google浏览器插件——含源码全部过程
【Chrome浏览器插件开发】浏览器插件运行机制03之实战使用Vue.js 3 + Vite 2开发出简易的浏览器插件(含源码）相关推荐
- 【Chrome浏览器插件开发】浏览器插件运行机制02之实战开发出一款Google浏览器插件——含源码全部过程 (建议在Linux环境下）
一.浏览器插件配置文件 manifest.json入门 每个浏览器插件都有一个 JSON 格式的文件,叫做 manifest.json,里面提供了插件的描述信息. manifest.json 文件本质 ...
- 中国不是不能开发出自己的浏览器，而是没必要
很多人理解的自主研发是从无到有,从0到1,按照这个标准,国内确实没有自主研发的浏览器.但是,国人不是不能开发出自己的浏览器,而是没有必要!毕竟时机已过,开发的价值不大. 大家都知道,浏览器并不是一个很 ...
- Ubuntu平台 常用插件下载(部分含源码)
记录一些常用软件的下载地址,在ubuntu的apt命令不好用的时候可以自己去网站下载软件 常用工具系列 相关文章: Windows平台 常用开发工具下载 putty,Android Studio,Vi ...
- Java毕业设计 之 [含源码等]车库停车计费系统[包运行成功]
<车库停车计费系统> 该项目采用技术: 后台采用了ssm框架 前台使用html+css+js+freemarker 使用了mysql数据库+tomcat服务器,项目含有源码.文档.配套开发 ...
- vscode 在标签的src引入别名路径_从零开始 - VSCode 插件运行机制
写这篇文章是因为最近一段时间的工作涉及到 Cloud Studio 插件这一块的内容,旧的插件系统在面向用户开放后暴露了安全性.扩展性等诸多问题.调研了几个不同架构下 IDE 的插件系统实现( The ...
- VSCode Run code插件运行机制和配置文件的意思解释
文章目录 一.Run code运行机制 二.Run code的变量 三.说明 1.编译器路径 2."code-runner.executorMap" 四.c++和python配置的 ...
- 【027】基于Vue+Nodejs+Mysql模仿微博的图片分享系统（管理员、用户两种身份）（含源码、数据库、实验报告、运行教程）
观前提醒:源码.数据库.实验报告在文末 该Web小型软件系统是基于图片分享的模仿微博社交平台,用户在里面可查看别人分享的内容,同时也可以发布自己的内容.在浏览分享的帖子中,用户可以进行点赞.评论.收藏 ...
- eclipse插件开发(一) 简易4页签编辑器(源码 | 设计 | JS | CSS)
由于在前端编辑html和js还有css都比较繁琐,因此想要在一个页面编辑,所以想开发一个插件来减少这个繁琐 1.本文环境: Eclipse IDE for Enterprise Java Develo ...
- wireshark插件开发详细流程（含源码）
亲自试了一下的用户态发包程序和wireshark插件程序.验证了其是可行的.要注意的一个问题是注意版本匹配. 这个是在应用层抓包并分析. 原文地址:http://www.cnblogs.com/Lit ...
最新文章
- 成功解决打包时不能import自定义的包或库出现运行exe时No module named 缺少包
- SD客户主数据的增强user-exit SAPMF02D
- 科大星云诗社动态20210424
- 利用Asp.Net Core的MiddleWare思想处理复杂业务流程
- linux（3）：Linux MBR分区、挂载操作步骤，逻辑卷扩容操作
- apache php隐藏头信息的方法,apache、php隐藏http头部版本信息的实现方法
- Elasticsearch性能监控（二）
- 命令行启动mssqlserver服务
- MFC的HTML View在初始化时如何打开指定网页？
- php 0 n随机数,PHP n个不重复的随机数生成代码
- Error:(199) undefined reference to `__android_log_print'
- 深圳计算机软考培训哪家好,深圳计算机软考——信息系统项目管理报名培训
- 民法典实施后，夫妻共同债务如何认定？
- 第四届蓝桥杯JavaC组国(决)赛真题
- 去除数组中值为空的元素
- 关于mailx邮件发不出去的解决办法
- 怎么从服务器上文件拷贝下来
- ADI Blackfin DSP处理器-BF533的开发详解16：KEY按键的实现（含源代码）
- 三大特性看明白中国电影市场
- SQL Developer Unable to create an instance ...解决方法