Visual Studio 在真实的的IDE中开发Tampermonkey脚本,并自动部署到OpenUserJs存储库

sqxo8psd  于 2022-11-17  发布在  其他
关注(0)|答案(6)|浏览(240)

我最近开始开发一个Tampermonkey脚本,它托管在OpenUserJs上。看起来我打算在将来在这个脚本上投入更多的时间,让它保持最新,并在时间允许的情况下扩展它的功能。我在Tampermonkey编辑器上写的第一行代码集成在chrome中(脚本的 edit 按钮)。
但是我不喜欢它,我最缺少的是某种自动完成/智能感知。Visual Studio在这里要好得多,所以我改用VS。问题是:在任何修改之后,我必须复制漏洞代码并将其粘贴到Tampermonkey编辑器(Google Chrome)中。这很烦人,而且不太灵活,因为当脚本增长时,我不能真正将代码拆分到多个js文件中。
那么,有没有一种方法可以实现自动化呢?我的想象是:我将js文件保存在VS(ctrl + s)中,然后将脚本加载到我的本地google chrome开发示例中以进行测试。

分机号

我想在OpenUserJs上发布alpha/beta版本作为托管版本。这样我就可以在不同的系统上轻松地测试这个版本。而且我至少有一个系统,在那里我像我的最终用户一样通过OpenUserJs repo进行真实的的更新过程。我认为这很重要,我已经看到了一些根据我的手动工作流程(OpenUserJs编辑器中的c&p)的差异。
我更喜欢的解决方案是一些分支,就像我从git中知道的那样。所以我从OpenUserJs中安装脚本,就像我的用户在生产版中做的那样,但是我可以选择某个地方来获得,比如分支 development 而不是 master。OpenUserJs似乎支持github作为源代码库,但是没有分支。我无法想象,对于这样的问题没有解决方案。至少每个拥有更大脚本的开发人员都应该拥有。

ttp71kqs

ttp71kqs1#

我已经在另一个问题中回答了这个问题;我想应该有人把它们合并起来。同时,由于我还没有看到很多关于这方面的信息,我会把它放在这里,供下一个寻求帮助的人使用。

编码到即时更新👨‍💻

我们将配置一些东西,以便您可以在编辑器中编写代码,并看到浏览器中反映的更改,而不会造成麻烦。
1.进入Chrome =〉Extensions并找到TamperMonkey“卡片”。点击详细信息。在打开的页面上,允许它访问文件URL:

1.将脚本文件保存在文件系统中的任意位置。保存整个脚本文件,包括==UserScript==头文件。这在所有桌面操作系统中都有效,但由于我使用的是macOS,因此路径将为:/Users/me/Scripts/SameWindowHref.user.js
1.现在,转到TM扩展的 Jmeter 板,在其编辑器中打开所讨论的脚本,并删除整个==UserScript==标题之外的所有内容
1.将指向脚本绝对路径的@require属性添加到标头。
此时,TM的编辑器应如下所示:

**更新:**似乎现在需要在路径开头使用file:// URI scheme。在Windows系统上将是:

// @require      file://C:\path\to\userscript.user.js

对于macOS和 *nix,我们需要连续三个斜杠:

// @require      file:///path/to/userscript.user.js

执行上下文💻

如果您有多个使用@require调用的JavaScript文件(例如jQuery,或者为了获得更好的体验而将大规模脚本分割成较小的片段时),请不要跳过这一部分。
@require路径可以引用*.user.js或直接引用*.js文件,这些文件中的任何UserScript样式的注解标题都无效
从主脚本的==UserScript==头文件开始,所有的@require文件都是按照指定的顺序连接在一起的,每个文件之间用一个换行符分隔。这种合并作为一个大脚本运行。这意味着任何文件中的任何全局函数或变量在所有用户脚本文件中也是全局的,这是不理想的。一个文件中的错误可能会影响后续文件的运行。另外,要对所有文件启用严格模式,'use strict';必须是与@require一起列出的第一个文件第一条语句
在所有@require文件运行后,主UserScript(由TamperMonkey的编辑器访问的UserScript)将在单独的上下文中运行。如果需要严格模式,还必须在此处启用它。

工作流程🕺

现在,每当脚本匹配(@match)您正在访问的网站时,TamperMonkey将直接加载并运行磁盘中@require字段指向的文件中的代码。
我使用的是VSCode(可以说是最好的多平台代码编辑器,而且是免费的),所以这就是我编写脚本的地方,但是任何文本编辑器都可以。它应该看起来像这样:

注意TM的编辑器和IDE/编辑器具有相同的标题。
代码中的每个更改都自动保存在VSCode中,因此如果您的忘记保存,则必须重新加载网站才能查看更改,但您也可以使用browser-sync's CLI中的一行程序轻松地自动执行此操作,这是一个很好的体验
如果你没有使用git,你应该考虑将它与你的用户脚本一起使用,即使你是唯一的开发者。它将帮助你跟踪你的进度,在同一时间理智地工作在不同的功能上,回滚错误,并帮助你自动发布新的更新给你的用户!
请分享您所有的作品herehere😄

额外提示!

使用GitHub或其他SCM

你必须添加一个@updateURL标签,后面跟着一个URL,其中包含来自GitHub或任何你选择的提供商的原始文件。

请注意,@version标签是进行更新检查所必需的。绝大多数用户不需要@downloadURL标签,所以除非你的脚本有大量的追随者,否则请使用@updateURL
TM将按照设置选项卡中的配置检查更新:
x1c4d 1x指令集

  • Externals* 设置检查从脚本的@require调用的脚本以进行更新的频率(例如jQuery)。

您也可以“胁迫”进行更新检查:

使用外部库(如jQuery)

它必须存在于TM的编辑器中至少Chrome才能加载它。但是,我建议保持两个头文件(TM的头文件和磁盘上的文件的头文件)相同,以避免混淆。简单地@require它像这样使用:

// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js

文档

看一看TM's documentation page;这本书非常简洁,只要快速阅读一下,你就会对你能做的事情有一个大致的了解。💪

rqqzpn5f

rqqzpn5f2#

我想发布alpha/beta版本[...]
你可以使用@updateURL usercript标签来指出一个web URL [1],并将其与git沿着使用来实现你的需求。
下面是我的实现方法:

  • 在我的Gitlab示例https://foo.com/user/project/raw/develop/main.user.js上,指出了develop分支的原始用户脚本文件。
  • 在项目的描述中提供了开发和其他重要功能分支的链接,这样人们就可以选择遵循开发版本而不是主版本[2]。
  • 我用这个模板来分享:
// ==UserScript==
// @name         New Userscript
// @namespace    foo.com
// @version      0.3
// @description  try to take over the world!
// @author       user
// @match        https://bar.org/*
// @grant        none
// @updateURL    https://foo.com/user/project/raw/develop/main.user.js
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();
  • 然后在Greasemonkey或Tempermonkey上触发检查用户脚本更新按钮后,他们将安装此URL上可用的脚本。

[1]可以从你想要安装的地方访问,例如从你的个人电脑上安装公共Github repo,或者从你的工作电脑上安装你公司的私有Gitlab示例
[2]请注意,为了在单击链接时安装,文件名必须以.user.js结尾

unguejic

unguejic3#

Carles的答案的扩展

from time import *  
import pathlib
from pyautogui import *
from glob import *
from pyperclip import *
import re
author='SmartManoj'
repo='SmartUserScripts'
namespace=f'https://github.com/{author}'
def local():
    return f'''// ==UserScript==
// @name        {name}
// @version     0.1
// @description try to take over the world!
// @author      {author}
// @namespace   {namespace}
// @match       {link}
// @updateURL   https://raw.githubusercontent.com/{author}/{repo}/master/{fn}
// ==/UserScript==

'''
def browser():
    return f'''// ==UserScript==
// @name        {name}
// @version     0.1
// @description try to take over the world!
// @author      {author}
// @namespace   {namespace}
// @match       {link}
// @require     {local_path}/{fn}
// @grant       GM_setClipboard
// ==/UserScript==

'''
hotkey('win','3') # chrome index
hotkey('ctrl','shift','h')
fn=prompt('Enter File name')
name=prompt('Enter Script name',default=fn)
sleep(1)
hotkey('ctrl','a')
hotkey('ctrl','x')
local_path=pathlib.Path(__file__).parents[0].as_uri()   
ext='.user.js'
l=len(glob(fn+ext))
if l:fn+=f'_{l+1}'
fn+=ext
a=paste()
link=re.search('@match\s*(.*)',a)[1].strip()
print(local(),file=open(fn,'w'))
copy(browser())
hotkey('ctrl','v')

Latest version
如果标题更改,则需要执行其他脚本

dfuffjeb

dfuffjeb4#

Tampermonkey使用一种叫做WebDAV的东西来使用一个外部编辑器来编辑用户脚本;篡改DAV。
我还没有尝试过,但看起来应该可以与Visual Studio连接。

dauxcl2d

dauxcl2d5#

Trim 21提供了,可能是迄今为止最好的large-scale UserScript development solution,使用webpack配合LiveReloadPlugin实现了模块化开发和自动化测试。
是的。
它可以使用ES 5/ES6和TypeScript在IDE上开发模块化脚本,非常容易使用!
集成LiveReloadPlugin,可以直接刷新任意@match网址。
比之前的方案更好,大大提高了UserScript的开发效率!
I've answered this in another question; I think someone should merge them. In the meantime, since it's I haven't seen a lot of info on this, I'll put it here for the next person looking for help.

xwbd5t1u

xwbd5t1u6#

对于Mac用户,除了carlesanswer和@所需的URL -它需要三个斜杠!我花了太长的时间才让它工作。

@required file:///Users/me/STUFF/Code/Scripts/SameWindowHref.user.js

相关问题