李恒道 发表于 2021-10-7 18:55:06

[油猴脚本开发指南]魔改toastr

# 关于正式脚本引用问题

gf发布的require路径有一定的限制,这里依然目前没有找到特别好的办法

jsdelivr被限制了gh路径的发布

所以如果你引用我的路径很大概率是要出问题的

请不要在正式发布脚本尝试引入我的魔改

# 前文

刚才无聊刷github发现一个很有趣的模块

https://github.com/CodeSeven/toastr

可以很方便的做消息提示。

油猴尝试了下,依然不支持require

我们继续魔改玩一下!

另外请注意需要前置jquery

# 开始

我们大概看一下代码

![图片.png](data/attachment/forum/202110/07/184948acu8fzncq7fz5z8w.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

这里是一个自执行函数,第二个的参数传入到第一个当e

出现这种情况十有八九window问题

![图片.png](data/attachment/forum/202110/07/185031yk96bdndn34fka8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

这里可以看到做了一点对比,首先对比define类型,和define.amd

然后做各种乱七八糟判断

我们这里是浏览器环境,肯定都是没有的,那只可能进入函数部分。

也就是返回给第一个自执行函数一个函数

![图片.png](data/attachment/forum/202110/07/185136w17lr1n1zi9xoom1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

缩减了一下代码变成了这样

接下来继续看,这里modul之类的也肯定都是没有的,所以会执行到

`window.toastr = t(window.jQuery)`

`t`是自执行函数传给我们的参数,这里是什么我们都不在乎了,直接修改下window指向试试

![图片.png](data/attachment/forum/202110/07/185237xlb2pxrx64jpzl4r.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

运行一下看看

![图片.png](data/attachment/forum/202110/07/185252sb5hzpatkb5sss0i.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/300 "图片.png")

运行成功~

# 源码

```javascript
// ==UserScript==
// @name         测试提示框
// @namespace    http://tampermonkey.net/
// @version      0.1
// @descriptiontry to take over the world!
// @author       You
// @match      https://bbs.tampermonkey.net.cn/forum.php
//@resource   CSS https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/toastr.css
// @require      https://raw.githubusercontent.com/lihengdao666/Modify-Tampermonkey-Libs/master/toastr.js
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
// @grant      unsafeWindow
// @grant      GM_getResourceText
// @grant      GM_addStyle
// ==/UserScript==

GM_addStyle(GM_getResourceText("CSS"));
toastr.info('Are you the 6 fingered man?')
```

李恒道 发表于 2021-10-7 19:18:27

可以参考https://codeseven.github.io/toastr/demo.html
有对位置控制的部分以及一些其他的东西
如位置控制是"positionClass": "toast-bottom-center",

maxzhang 发表于 2021-10-8 09:31:53

gg真是高产似__ __

这个用着确实体验不错

最后选择了sw2

李恒道 发表于 2021-10-8 09:43:43

maxzhang 发表于 2021-10-8 09:31
gg真是高产似__ __

这个用着确实体验不错


sw2是啥
我github昨天偶然发现的这个
目前还有一个最大的问题就是
魔改的东西不知道放哪里
操....

maxzhang 发表于 2021-10-8 09:56:24

李恒道 发表于 2021-10-8 09:43
sw2是啥
我github昨天偶然发现的这个
目前还有一个最大的问题就是


sweetalert2

有toastr的弹窗模式

放github用jsdeliver引用不就行啦

李恒道 发表于 2021-10-8 10:04:29

maxzhang 发表于 2021-10-8 09:56
sweetalert2

有toastr的弹窗模式


gf不支持这种...即使发release版本
有jsildvr那个,因为gf屏蔽了gh目录也不行
妈的

李恒道 发表于 2021-10-8 10:05:23

maxzhang 发表于 2021-10-8 09:56
sweetalert2

有toastr的弹窗模式


sweetalert2试了下好像还可以
现在是我的了!
给你ban掉!
下节课讲!

maxzhang 发表于 2021-10-8 10:30:15

李恒道 发表于 2021-10-8 10:05
sweetalert2试了下好像还可以
现在是我的了!
给你ban掉!


你可以先从1讲

sweetalert1的ui相对来说比较温和

sweetalert2的ui我个人感觉是略大开大合

https://cdn.jsdelivr.net/gh/maxzhang666/assets@master/img/2021/10/08/KFMzq0.png

李恒道 发表于 2021-10-8 12:47:16

maxzhang 发表于 2021-10-8 10:30
你可以先从1讲

sweetalert1的ui相对来说比较温和


话说sweetalert能取代toast么,还是只是dialog

maxzhang 发表于 2021-10-8 13:52:10

李恒道 发表于 2021-10-8 12:47
话说sweetalert能取代toast么,还是只是dialog

我觉得可以

但是只是使用toast功能的话没必要

毕竟人家更专业的是alert
页: [1] 2
查看完整版本: [油猴脚本开发指南]魔改toastr