V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Mindjet
V2EX  ›  前端开发

如何快速测试 UserScript(油猴脚本)?

  •  
  •   Mindjet · 2020-08-16 20:29:09 +08:00 · 3431 次点击
    这是一个创建于 1569 天前的主题,其中的信息可能已经有所发展或是发生改变。

    想为 searchEngineJump: 搜索引擎跳转脚本 ,这个 UserScript(Tampermonkey 脚本)添加新功能(在下拉列表中单独加入一键搜索的按钮),已经实现在本地的 IDE 上开发

    看到 StackOverFlow 上有人说可以配合 browser-sync 实现自动刷新,当本地 JS 更改时,想自动刷新用户脚本的目标网址,比如百度的某具体搜索页面,而不是本地的某个 HTML 文件,这个怎么实现?

    我查看了每一条 browser-sync 命令和配置信息,没有找到解决的思路,所以来寻求帮助。

    PS:把百度的那个页面保存下来放到本地,然后再更改脚本,一通操作之后也能用,但总是很蹩脚,而且有些脚本就是在网页动态运行的时候起作用的,貌似这样也不行。

    第 1 条附言  ·  2020-08-19 09:59:33 +08:00

    Trim21提供了,可能是到目前为止最好的大型UserScript开发解决方案,使用webpack配合LiveReloadPlugin实现模块化开发与自动化测试。

    14 条回复    2020-08-21 21:40:02 +08:00
    Team
        1
    Team  
       2020-08-16 20:29:45 +08:00
    同问
    limuyan44
        2
    limuyan44  
       2020-08-16 20:53:59 +08:00
    脚本引用本地 js 不就是自动生效的吗,不过要刷新当前页面就是了。
    LittleWhiteMouse
        3
    LittleWhiteMouse  
       2020-08-16 21:23:00 +08:00 via Android
    脚本可以跨域请求。本地 http 服务器挂一个文件版本标识,脚本检测此标识发生变化则刷新页面。反正这种情况也不需要热更新。
    Team
        4
    Team  
       2020-08-16 21:32:11 +08:00
    @limuyan44 #2
    楼主问的就是怎么自动刷新,回复之前先读完帖子比较好。
    Trim21
        5
    Trim21  
       2020-08-16 21:35:32 +08:00   ❤️ 2
    Mindjet
        6
    Mindjet  
    OP
       2020-08-16 21:36:17 +08:00
    @LittleWhiteMouse #3
    「脚本检测此标识发生变化」,是使用定时器循环检测吗?还没有更好的方法?
    Mindjet
        7
    Mindjet  
    OP
       2020-08-16 21:37:13 +08:00
    @Trim21 #5 谢谢,你的帖子早就看到了,没想到里面还有自动刷新的内容,明天试试。
    LittleWhiteMouse
        8
    LittleWhiteMouse  
       2020-08-16 23:14:25 +08:00 via Android   ❤️ 1
    @Mindjet 听起来有点 low,但原理都类似吧。检测变化,触发活动。这种情况 3 到 5 秒检测一次就够用,又是本地。性能上应该完全不影响的
    autoxbc
        9
    autoxbc  
       2020-08-17 05:41:19 +08:00   ❤️ 1
    browser-sync 也可以,需要使用 proxy 参数

    Dynamic sites
    If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. Browsersync will wrap your vhost with a proxy URL to view your site.

    browser-sync start --proxy "myproject.dev" --files "my.user.js"

    1. myproject.dev 是已存在的网站,可以来自于本地启动的服务器,也可以是互联网上的已有网站;
    2. browser-sync 会在上面包装一下,注入自己的脚本来监听文件变化,此时域名变为 localhost:3000 ;
    3. 浏览器载入后,由 Tampermonkey 注入脚本 my.user.js ,由于 proxy 模式造成域名变化,match 规则需要重新写;
    4. 如果网站有自身域名检测,可能会出现非预期的重定向;
    Mindjet
        10
    Mindjet  
    OP
       2020-08-17 09:06:24 +08:00
    livereload 应该就是最优方案了,很完美,效果非常棒。
    Mindjet
        11
    Mindjet  
    OP
       2020-08-17 10:53:51 +08:00
    有个坑这里提下,Tampermonkey 中的 UserScript@require 的是本地文件,的确会每次都刷新缓存;但 Tampermonkey 不是这样的,我其实一直在用 Tampermonkey,更喜欢其 UI,没想到两者还是有不同的。

    还有就是 Greasemonkey 好像在 Chrome Store 下架了,原因未知。
    Mindjet
        12
    Mindjet  
    OP
       2020-08-19 09:56:30 +08:00
    @Trim21 #5
    感觉这个 webpack 开发 UserScript 的项目,好像被忽视了,star<10

    真的好用哭了 o(╥﹏╥)o

    刚学 JavaScript,要是没这个项目,要学更多内容才能重构大型脚本

    去 StackOverFlow 宣传下

    https://stackoverflow.com/a/63478925/11901563
    Trim21
        13
    Trim21  
       2020-08-21 06:08:56 +08:00 via Android
    @Mindjet 感谢

    我自己都很久没写什么 userscript 了,这个是我之前写一个很复杂的脚本的时候的配置(一开始还用过 grunt 之类的,引入 js 全靠 concat,全局变量满天飞),后来单独挪出来成了个新 repo,结果原本的那个脚本都弃坑了…
    Mindjet
        14
    Mindjet  
    OP
       2020-08-21 21:40:02 +08:00
    @Trim21
    嗯嗯

    你的意思是这样的吗?

    摒弃「 grunt 之类的,引入 js 全靠 concat,全局变量满天飞」这些不满意的写法后,创造了这个更满意的 reop 。

    翻看了你的 GitHub,感觉所有的脚本都是为自己而写,大多没有 README.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5860 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 03:02 · PVG 11:02 · LAX 19:02 · JFK 22:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.