位置: IT常识 - 正文

使用 Vite 插件开发构建 Tampermonkey 用户脚本(vite 插件开发)

编辑:rootadmin
起因 一直以来,我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的: 对于一些简单的脚本,这没有什么问题,即改即看。但当代码多了以后问题就来了,自带编辑器开发体验确实不太舒服,没有格式化,没有代码补全,无法模块化编写代码等等,这时候我就想寻找一个打包方案,让我们可以在自己 ... 起因

推荐整理分享使用 Vite 插件开发构建 Tampermonkey 用户脚本(vite 插件开发),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vis插件,viz插件,vis插件,vite-plugin-legacy,vite 插件开发,vitagrafix插件怎么用,vu meter插件,vite 插件开发,内容如对您有帮助,希望把文章链接给更多的朋友!

一直以来,我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的:对于一些简单的脚本,这没有什么问题,即改即看。但当代码多了以后问题就来了,自带编辑器开发体验确实不太舒服,没有格式化,没有代码补全,无法模块化编写代码等等,这时候我就想寻找一个打包方案,让我们可以在自己的编辑器如 VSCode 里开发,这样就可以充分利用前端工程化的便利,提升开发体验。常见的打包工具比如 webpack、parcel、rollup 等,首先排除 webpack(笑),然后试了下 parcel,效果不太理想,之后试了 rollup 感觉还可以。转眼想到要用 vue 开发,那就直接上 vite 吧 ?,vite 也是用 rollup 来打包生产代码的。直接打开 npm,看看有没有人造轮子,然后发现下面几个包:

gorilla (rollup 插件)vite-plugin-tampermonkeyvite-plugin-monkey

这几个都符合基本需求,其中 gorilla 不能打包样式,另外两个插件都差不多,选了 vite-plugin-tampermonkey 进行改造。修改后的插件: Github | npm

插件特点通过单独的配置文件或者 package.json 中的 tmHeader 字段来配置 Tampermonkey 的 Userscript Header构建生产时支持自动分析代码用到的 grant开发模式时默认导入所有 grant,并且把所有的 grant 方法加入到 unsafeWindow可通过简单配置,把引入的外部包 require 化,自动引入 jsdelivr CDN ,详情见下面的插件配置开始之前

Vite 官方中文文档Tampermonkey 文档gorillavite-plugin-tampermonkeyvite-plugin-monkey

初始化项目使用 Vite 插件开发构建 Tampermonkey 用户脚本(vite 插件开发)

兼容性注意Vite 需要 Node.js 版本 >= 12.0.0。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

按需选择框架推荐使用 TypeScript然后到项目目录开始安装依赖

插件使用安装yarn add vite-plugin-tm-userscript -D# ORnpm install vite-plugin-tm-userscript -D配置 vite.config.tsimport { defineConfig } from 'vite'import Userscript from 'vite-plugin-tm-userscript'// https://vitejs.dev/config/export default defineConfig({ plugins: [ Userscript({ externalGlobals: ['vue'] }) ]})配置 Userscript Header

有四种方式来配置 Userscript Header, 优先级如下所示

header.config.jsonheader.config.jsheader.config.txtpackage.json 中的 tmHeader 字段

其中 header.config.txt 使用 Tampermonkey 头部注释配置,不会经过处理,直接插入脚本头部作为 Header 使用其他三种格式按 json 格式配置,多个属性配置如 match 用数组表示,经过处理自动添加 grant 与 require示例配置见 example/header.config.js使用 js 文件来配置的好处是可以有自动补全:具体属性配置见 Tampermonkey 文档

插件配置export interface TMPluginOptions { entry?: string; autoGrant?: boolean; externalGlobals?: string[] | Record<string, string | string[]>;}externalGlobals

配置外部包,比如 vue,axios 等,减少打包体积,并且会自动

本文链接地址:https://www.jiuchutong.com/zhishi/309313.html 转载请保留说明!

上一篇:Python中三种模块类型的介绍(python中模块的概念)

下一篇:当月销售次月开票怎么做账(当月销售次月开票就按次月申报)

  • 苹果13mini怎么添加门禁卡(苹果13mini怎么添加小区门禁卡)

    苹果13mini怎么添加门禁卡(苹果13mini怎么添加小区门禁卡)

  • 小米云台摄像头怎么重新设置网络(小米云台摄像头安装内存卡)

    小米云台摄像头怎么重新设置网络(小米云台摄像头安装内存卡)

  • 苹果手表一代能用ios13的系统吗(苹果手表一代能连苹果12吗)

    苹果手表一代能用ios13的系统吗(苹果手表一代能连苹果12吗)

  • qq直播间可以分享屏幕吗(qq直播吗)

    qq直播间可以分享屏幕吗(qq直播吗)

  • 拼多多发票怎么开(拼多多发票怎么删除)

    拼多多发票怎么开(拼多多发票怎么删除)

  • 台积电是做什么的(台积电是做什么东西)

    台积电是做什么的(台积电是做什么东西)

  • mt8176相当于骁龙多少(联发科mt8176相当于骁龙)

    mt8176相当于骁龙多少(联发科mt8176相当于骁龙)

  • 手机保存不了视频怎么回事(手机保存不了视频只能收藏怎么回事)

    手机保存不了视频怎么回事(手机保存不了视频只能收藏怎么回事)

  • 电脑没地线会烧主板吗(电脑没有地线会出现什么情况)

    电脑没地线会烧主板吗(电脑没有地线会出现什么情况)

  • qq艾特别人怎么变黑色了(qq艾特别人怎么变黑色了怎么解决)

    qq艾特别人怎么变黑色了(qq艾特别人怎么变黑色了怎么解决)

  • 苹果mac笔记本充不进电(苹果Mac笔记本充不了电)

    苹果mac笔记本充不进电(苹果Mac笔记本充不了电)

  • 荣耀30s有屏下指纹吗(荣耀30s屏下指纹)

    荣耀30s有屏下指纹吗(荣耀30s屏下指纹)

  • 苹果6s是多少w快充(苹果6是多少w快充)

    苹果6s是多少w快充(苹果6是多少w快充)

  • 常见的宽带接入方式有哪些(常见的宽带接入方式有哪几种?)

    常见的宽带接入方式有哪些(常见的宽带接入方式有哪几种?)

  • 樱桃轴属于什么轴(樱桃轴是cherry轴吗)

    樱桃轴属于什么轴(樱桃轴是cherry轴吗)

  • 美图秀秀改照片kb大小(美图秀秀改照片背景颜色)

    美图秀秀改照片kb大小(美图秀秀改照片背景颜色)

  • iphone11怎么进行数据备份(苹果 11如何)

    iphone11怎么进行数据备份(苹果 11如何)

  • vue新版怎么加字幕(vue软件怎么添加文字)

    vue新版怎么加字幕(vue软件怎么添加文字)

  • 怎么在目录前加一页(怎么在目录前加入空白页作为封面)

    怎么在目录前加一页(怎么在目录前加入空白页作为封面)

  • b站音频怎么下载到手机(b站音频怎么下载)

    b站音频怎么下载到手机(b站音频怎么下载)

  • 更新ios13怎么退回12(怎么退回ios13.6)

    更新ios13怎么退回12(怎么退回ios13.6)

  • 三星sm一a6060是什么型号

    三星sm一a6060是什么型号

  • 微信随拍功能在哪里(微信随拍在哪里看访客)

    微信随拍功能在哪里(微信随拍在哪里看访客)

  • 如何在 Windows 11 上使用虚拟桌面(如何在 Windows 11 上更改锁屏壁纸)

    如何在 Windows 11 上使用虚拟桌面(如何在 Windows 11 上更改锁屏壁纸)

  • 苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用(打开苹果safari浏览器)

    苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App,自定义图标,启动动画,自定义名称,全屏应用(打开苹果safari浏览器)

  • 进项税额加计抵减5%
  • 附加税税率是多还是少
  • 税款滞纳金和利息
  • 关税是直接税还是间接税
  • 小规模纳税人购买原材料会计分录
  • 用微信和支付宝支付 会计如何做账
  • 工业土地摊销年限最新规定
  • 所得税忘了计提如何做会计分录还有结转
  • 小微企业亏损还用缴残保金吗
  • 税局函调准备哪些资料
  • 必胜客发票提取码在小票哪里
  • 物料耗用
  • 房地产开发企业预缴增值税
  • 电子发票丢失如何税前扣除
  • 国际船舶代理是什么意思
  • 收到员工归还借款属于现金流量表
  • 一般纳税人普通发票免税吗
  • 房屋租赁后转租合法吗
  • 职工福利费食堂买菜小票可以报销吗
  • 抵扣税控盘维护费会计分录
  • 企业比赛奖品买什么好
  • 一次性付清货款要交税吗
  • 企业购买的预付卡赠送客户怎么入账
  • 移动板房的税法是多少
  • 计提应付利息编制记账凭证用什么原始凭证?
  • 固定资产入账会计
  • 炫龙dd3笔记本怎么样
  • php session_start
  • 土地投资入股是否缴纳土地增值税12366
  • PHP:imagesetstyle()的用法_GD库图像处理函数
  • php数据库连接池 实例
  • 核定征收的企业注销需要缴纳个人所得税吗
  • 委托加工的材料成本包括辅助材料成本吗
  • 什么情况借钱
  • 图像的生成原理
  • ips attack
  • discuz php版本
  • 所有者权益是什么类科目
  • 利润分配财务管理
  • 二季度报表是累计数吗
  • 会计科目设置怎么操作
  • 2022年我们国家将举行什么样的盛会
  • okhttp源码
  • 可供出售金融资产名词解释
  • 无票收入是怎么算的
  • 不动产租赁开票税率
  • 增值税发票内容填写不全应如何进行处理?
  • 其他应付款结转收入的条件
  • 新政府会计固定资产的核算与计量
  • 企业微信收款如何交税
  • 可供出售金融资产包括哪些内容
  • 不动产进项税额转出
  • 商场代收款合法吗
  • 鉴证咨询公司
  • 餐饮招待怎么入账
  • 一般纳税人先确认收入吗
  • 停薪留职社保怎么算
  • 明细账的作用
  • Linux环境mysql5.7.12安装教程
  • 醒狗音乐免费下载歌曲2017最新版
  • linux命令sed -i
  • freebsd源代码开放?
  • macpro教程
  • 360rps.exe
  • opensuse安装显卡驱动
  • windows8消费预览版中图片密码使用教程
  • window10系统连接wifi
  • 计算机图形学中点画圆法
  • Linux删除大量文件
  • 详解 linux mysqldump 导出数据库、数据、表结构
  • 批处理怎么学
  • javascript操作csv
  • jquery操作select元素和option的实例代码
  • python微信公众号开发教程
  • easyui怎么用
  • 前端jsonp解决跨域
  • mac解析域名
  • 纳税申报之后最迟多久交
  • 预缴增值税是否要预缴城建税及附加
  • 南宁市税务局稽查局领导
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设