使用 vue3 编写 tampermonkey 插件

最新推荐文章于 2024-05-16 17:21:02 发布
最新推荐文章于 2024-05-16 17:21:02 发布
阅读量914 收藏
点赞数
文章标签： 列表 vue js javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35516360/article/details/122065308
版权

原文链接: 使用 vue3 编写 tampermonkey 插件

上一篇: protobufjs 简单使用

下一篇: vue3 简单上手

你没看错.... 确实是用vue3.0 编写油猴插件.... 刺激~

修改自 vue-next-webpack-preview 几乎没怎么改, 主要加了less

开发背景

首先尝试过油猴对于大型脚本的支持(脚本在50~100kb)还是不错的, 所以萌生用vue实现一个小工具, 在测试过vue2和vue3打包后的大小后vue3会小10~20k, 决定采用vue3

功能介绍

效果, 鼠标移动的时候会显示, 鼠标静止后15s 会自动隐藏, 视频全屏时也不会显示

只有页面中出现视频标签时才会显示, 对于有些网站采用自研播放器的并不支持, 采用jpg格式主要是为了速度考虑, 并且根据b站视频清晰度确定截图大小, 如果图像不清晰, 可以使用1080P视频截图

最低0.47元/天 解锁文章
阿豪boy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用vue-cli编写vue插件的方法
08-27
本篇文章主要介绍了使用vue-cli编写vue插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用 vue3.x版本开发 chrome插件
12-31
使用vue开发chrome浏览器插件，可以方便前端人员开发插件页面，不管是popup页面，content页面等都可以使用vue开发模式很方便的开发需求 码云地址：https://gitee.com/guoqiankun/my-vue3-plugin github地址：...
使用Vite + vue 开发 Tampermonkey 浏览器插件
qq_30441857的博客
03-09 1109
使用Vite + vue 开发 Tampermonkey 插件方法 项目地址：GitHub: https://github.com/Thinker-ljn/vite-plugin-tampermonkey/ vite-plugin-tampermonkey(vite插件） 基于 vite 的 tampermonkey 开发构建插件。 特点 通过 package.json 的 tampermonkey 属性配置 tampermonkey 的头部描述。 构建生产时会支持自动分析代码用到的 grant
Tampermonkey VUE快速开发脚本
景向后山的博客
01-10 603
支持本地调试开发vue版本的Tampermonkey插件。
探索 Tampermonkey-Vue：一款创新的浏览器脚本管理器
gitblog_00086的博客
04-08 389
探索 Tampermonkey-Vue：一款创新的浏览器脚本管理器 项目地址:https://gitcode.com/huangxubo23/tampermonkey-vue 项目简介 Tampermonkey-Vue 是一个基于 Vue.js 的 Tampermonkey（油猴）扩展插件前端模板。如果你熟悉前端开发，尤其是Vue框架，那么这个项目将为你提供一个便捷的起点，用于构建和管理自定义的浏...
使用Vue3+Element Plus开发Chrome插件
时而前端，时而后端，时而迷失自我
08-17 5541
本人Vue3小白一枚，目前正在研究基于Vue3的Chrome浏览器插件的使用，经过不断尝试和整合各路大佬方法，现将自己尝试有效的项目框架搭建流程进行总结。
油猴插件开发使用vue+tailwindcss
最新发布
Helsonlin
05-16 172
🔥 想要为你的Tampermonkey脚本注入Vue.js的强大力量吗？现在，你可以使用我们的全新模板——YH_Vue_Template，轻松构建交互式前端页面！#Tampermonkey #Vuejs #TailwindCSS #WebDevelopment #JavaScript #油猴脚本 #前端开发。无论是新手还是资深开发者，YH_Vue_Template都将是你的得力助手。立即尝试，让你的脚本与众不同！
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
配置并使用vue3编写项目
09-26
配置并使用vue3编写项目
使用 Vite + 前端框架 (SolidJs,React,Svelte,Vue) 来开发 油猴脚本
未将对象引用设置到对象的实例
09-20 1777
本文使用SolidJs举例, 你也可以使用其他的框架Solid 拥有 React TypeScript 的开发体验, 还解决了 React 的缺点还可以编译为 原生JS 体积非常的小, 还拥有 原生 JS 一样的性能.
利用tampermonkey向页面注入自定义Javascript
xue251248603的专栏
07-31 2万+
　　最近发现一款比较好用的插件，可以用来在页面中注入自定义的js，这样可以做一些自动化创建的东西，比如我要创建很多订单用来做测试，而手动点的话又太麻烦，所以可以用注入的js解决这个问题，页面加载完后使用js自动填充表单，然后提交。 　　可以在谷歌网上应用商店下载这个插件：【右上角三个点】–>【更多工具】–>【扩展程序(E)】–>【获取更多扩展程序】搜索tampermonkey就...
发现一个好东西---线上的vue工具 Vue Devtools
luoteen的博客
10-09 606
强制开启Vue Devtools https://greasyfork.org/zh-CN/scripts/396985-force-enable-vue-devtools 如果遇上了这个问题，要安装油猴（Tampermonkey），或者是安装了没有开启
tampermonkey油猴+chrome，在浏览器中运行自己写的js脚本
热门推荐
人在江湖
06-24 2万+
前言 最近再看犀牛书《JavaScript权威指南》，当中的小例子我发现自己没法调试它zzz，于是就想到把它嵌入到浏览器里面，主要是使用的油猴再加上自己的js脚本 环境 tampermonkey v4.6 油猴 ubuntu 18 chrome 油猴添加脚本 点击这边的添加脚本，然后在界面的脚本页面中输入自己的脚本代码，就可以了。 测试代码 // ==UserSc...
推荐几款基于vue的使用插件
weixin_33720956的博客
06-14 537
1.muse-ui★6042 - 三端样式一致的响应式 UI 库 2.vuetify★11169 - 为移动而生的Vue JS 2组件框架 3.Vux★12969- 基于Vue和WeUI的组件库 4.mint-ui★11283 - Vue 2的移动UI元素 5.iview★15434- 基于 Vuejs 的开源 UI 组件库 6.element★27685 - 饿了么出品的V...
谷歌插件 Tampermonkey使用
jeofey的专栏
05-04 2189
可以通过其挂载的js脚本实现某些页面的功能，比如定时刷新，签到，点赞等。。。1.在浏览器扩展应用中添加该插件2.管理面板添加需要执行的脚本match:可以匹配某个浏览器网址，例如，只要打开百度，就会执行alert(111111);例如：// ==UserScript== // @name New Userscript // @namespace http://tampermo...
谈谈浏览器插件-Tampermonkey
看风听雨
07-04 1748
Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox。 虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。 它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功...
tampermonkey插件使用
08-22
使用 Tampermonkey 插件的方法如下： 1. 首先，确保你的浏览器是 Chrome、Microsoft Edge、Safari、Opera Next 或 Firefox。因为 Tampermonkey 是一个浏览器扩展，只能在这些浏览器上使用。 2. 如果你使用的是 Chrome 浏览器，可以直接在 Chrome 应用商店中搜索 Tampermonkey，并将其添加为扩展程序。 3. 如果你使用的是其他浏览器，或者在 Chrome 应用商店中无法找到 Tampermonkey，你可以通过访问 Tampermonkey 的官方网站来下载插件。打开浏览器，输入 Tampermonkey 的官方网址（https://www.tampermonkey.net/）并下载插件。 4. 下载完插件后，根据浏览器的提示进行安装。安装完成后，Tampermonkey 图标将会显示在浏览器的工具栏上。 5. 现在，你可以开始使用 Tampermonkey 插件了。Tampermonkey 的主要功能是管理用户脚本，它允许你安装、启用、禁用和删除用户脚本，以及自定义脚本的运行方式。 6. 要安装用户脚本，你可以在 Tampermonkey 的管理界面中找到一个脚本，然后点击安装按钮。你也可以在一些脚本分享网站上找到感兴趣的用户脚本，并通过点击安装按钮来安装它们。 7. 安装完成后，你可以在 Tampermonkey 的管理界面中启用或禁用用户脚本。启用后，用户脚本将会在你访问相关网页时自动运行。 请根据你所使用的浏览器和具体需求，选择适合的方法来安装和使用 Tampermonkey 插件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [浏览器扩展插件：「油猴」使用详解 ( Tampermonkey )](https://blog.csdn.net/Vue2018/article/details/100524457)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Tampermonkey(油泼狓)插件的安装及使用](https://blog.csdn.net/m0_46596133/article/details/106755158)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值