在真实 IDE 中开发 Tampermonkey 脚本并自动部署到 OpenUserJs 存储库
Develop Tampermonkey scripts in a real IDE with automatic deployment to OpenUserJs repo
我最近开始开发托管在 OpenUserJs 上的 Tampermonkey 脚本。看来我将来会在这个脚本上投入更多的时间,让它保持最新并在有时间的时候扩展他的功能。我在 chrome(脚本的 edit 按钮)中集成的 Tampermonkey 编辑器上写的第一行。
但我不喜欢它,我最想念的是某种 autocomplete/intellisense。 Visual Studio这里好多了,所以我改用VS了。问题:进行任何更改后,我必须复制孔代码并将其粘贴到 Tampermonkey 编辑器中 (Google Chrome)。这很烦人而且不太灵活,因为当脚本增长时我无法真正将我的代码拆分为多个 js 文件。
那么有没有办法自动执行此操作?我的想象是:我将js文件保存在VS中(ctrl + s),然后将脚本加载到我的google chrome本地开发实例中进行测试。
分机:
我想在 OpenUserJs 上发布 alpha/beta 版本作为托管版本。所以我可以很容易地在不同的系统上测试发布。而且我还有至少一个系统,我可以像我的最终用户那样在 OpenUserJs 存储库上执行真正的更新过程。我认为这很重要,根据我的手动工作流程(OpenUserJs 编辑器中的 c&p),我已经看到了一些差异。
我更喜欢的选择是我从 git 知道的某种分支。这样我就可以像我的用户安装生产脚本一样从 OpenUserJs 安装脚本,但是我可以选择某个地方来获取例如分支 development 而不是 master。 OpenUserJs 似乎支持 github 作为源代码库,但没有任何分支。我无法想象,对于这样的问题没有解决方案,至少每个拥有更大脚本的开发人员都应该拥有...
I want to publish alpha/beta release [...]
您可以使用 @updateURL
用户脚本标记指出一个网站 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] 可从您要安装的位置访问,例如。 public Github 来自您个人计算机的 repo,或来自您工作计算机的您公司的私有 Gitlab 实例
[2] 请注意,为了可以在单击 link 后进行安装,文件名必须以 .user.js
结尾
我已经在另一个问题中回答过了;我认为有人应该合并它们。与此同时,由于我还没有看到很多这方面的信息,我会把它放在这里以供下一个寻求帮助的人使用。
编码即时更新
我们将仅配置几项内容,以便您可以在编辑器中编写代码并轻松查看浏览器中反映的更改。
- 转到 Chrome => Extensions 并找到 TamperMonkey 'card'。单击详细信息。在打开的页面上,允许它访问文件 URLs:
将脚本文件保存在文件系统中的任何位置。保存整个内容,包括 ==UserScript==
header。这适用于所有桌面 OS,但由于我使用的是 macOS,我的路径将是:/Users/me/Scripts/SameWindowHref.user.js
现在,转到 TM 扩展的仪表板,在其编辑器中打开有问题的脚本并删除所有内容 除了 整个 ==UserScript==
header
在header中添加一个@require
属性指向脚本的绝对路径。
此时,TM 的编辑器应如下所示:
更新: 看来现在需要在路径的开头使用 file://
URI scheme。在 windows 系统上将是:
// @require file://C:\path\to\userscript.user.js
对于 macOS 和 *nix,我们需要连续三个斜杠:
// @require file:///path/to/userscript.user.js
执行上下文
如果您有多个 JavaScript 文件通过 @require
调用(例如 jQuery 或将大量脚本分割成更小的部分以获得更好的体验),请不要跳过这部分.
@require
路径可以引用*.user.js
或直接引用*.js
文件,这些文件中任何UserScript-style注释header都有没有效果.
从主脚本的 ==UserScript==
header 开始,所有 @require
文件都是 text-concatenated 指定的顺序 ,带有单个换行符分隔每个文件。这种合并 运行s 作为一个大脚本。这意味着任何文件中的任何全局函数或变量在所有用户脚本文件中也将是全局的,这是不理想的。
一个文件中的错误可能会影响后续文件 运行。此外,要在所有文件上启用严格模式,'use strict';
必须是 第一个文件 的 第一个语句 @require
.
在所有 @require
个文件 运行 之后,您的主要用户脚本(由 TamperMonkey 的编辑器访问的那个)在单独的上下文中 运行。如果你想要严格模式,你也必须在这里启用它。
工作流程
现在,每次该脚本匹配 (@match
) 您正在访问的网站时,TamperMonkey 将直接加载 运行 直接从磁盘文件中的代码,由 @require
字段。
我使用 VSCode(可以说是 有史以来最好的 多平台代码编辑器。而且是免费的),所以这就是我处理脚本的地方,但任何文本编辑器都可以.它应该是这样的:
请注意 TM 的编辑器和您的 IDE/Editor 如何具有相同的 header。
代码中的每个更改都会自动保存在 VSCode 中,因此如果您没有记得保存。然后,您必须 重新加载网站 才能看到更改,但您也可以使用 browser-sync's CLI 中的 one-liner 轻松实现自动化,仅举一个工具, 体验很棒
如果您不使用 git,您应该考虑将它与您的用户脚本一起使用,即使您是唯一的开发者。它将帮助跟踪您的进度,同时理智地处理不同的功能,回滚错误,并帮助您自动向用户发布新更新!
奖金提示!
使用 GitHub 或其他 SCM
您必须添加 @updateURL
标签,后跟 URL 以及来自 GitHub 或您选择的任何提供商的原始文件。 GitHub的例子:
请注意,需要 @version
标记才能进行更新检查。绝大多数用户不需要 @downloadURL
标签,因此除非您的脚本拥有庞大的追随者群,否则请使用 @updateURL
.
TM 将检查更新,因为它是从设置选项卡配置的:
Externals 设置从脚本 @require
调用的脚本检查更新的频率(例如 jQuery)。
您还可以“强制”更新检查:
使用外部库(如jQuery)
它必须 至少 存在于 TM 的编辑器中,Chrome 才能加载它。但是,我建议保持 headers(TM 和磁盘上的文件 header)相同以避免混淆。简单地 @require
就像这样使用它:
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
RTFM
看看TM's documentation page;它不咬人!
它非常简洁,而且快速阅读后,您将清楚地了解可以不费吹灰之力完成的工作!
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')
如果 header 发生变化,需要执行另一个脚本
Tampermonkey 使用一种叫做 WebDAV 的东西来使用外部编辑器来编辑用户脚本; TamperDAV。
我还没有尝试过,但看起来应该可以连接 Visual Studio。
除 carles 和 @required URL 之外的 Mac 用户 - 它需要三个斜杠!我花了太长时间才让它工作。
@required file:///Users/me/STUFF/Code/Scripts/SameWindowHref.user.js
Trim21提供,可能是目前最好的large-scale UserScript development solution,使用webpack配合LiveReloadPlugin实现模块化开发和自动化测试
可以使用ES5/ES6和TypeScript在IDE上开发模块化脚本。真的好用!
集成LiveReloadPlugin,可以直接刷新任意@match
URL.
比之前的方案更好,大大提高了UserScript的开发效率!
我最近开始开发托管在 OpenUserJs 上的 Tampermonkey 脚本。看来我将来会在这个脚本上投入更多的时间,让它保持最新并在有时间的时候扩展他的功能。我在 chrome(脚本的 edit 按钮)中集成的 Tampermonkey 编辑器上写的第一行。
但我不喜欢它,我最想念的是某种 autocomplete/intellisense。 Visual Studio这里好多了,所以我改用VS了。问题:进行任何更改后,我必须复制孔代码并将其粘贴到 Tampermonkey 编辑器中 (Google Chrome)。这很烦人而且不太灵活,因为当脚本增长时我无法真正将我的代码拆分为多个 js 文件。
那么有没有办法自动执行此操作?我的想象是:我将js文件保存在VS中(ctrl + s),然后将脚本加载到我的google chrome本地开发实例中进行测试。
分机:
我想在 OpenUserJs 上发布 alpha/beta 版本作为托管版本。所以我可以很容易地在不同的系统上测试发布。而且我还有至少一个系统,我可以像我的最终用户那样在 OpenUserJs 存储库上执行真正的更新过程。我认为这很重要,根据我的手动工作流程(OpenUserJs 编辑器中的 c&p),我已经看到了一些差异。
我更喜欢的选择是我从 git 知道的某种分支。这样我就可以像我的用户安装生产脚本一样从 OpenUserJs 安装脚本,但是我可以选择某个地方来获取例如分支 development 而不是 master。 OpenUserJs 似乎支持 github 作为源代码库,但没有任何分支。我无法想象,对于这样的问题没有解决方案,至少每个拥有更大脚本的开发人员都应该拥有...
I want to publish alpha/beta release [...]
您可以使用 @updateURL
用户脚本标记指出一个网站 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] 可从您要安装的位置访问,例如。 public Github 来自您个人计算机的 repo,或来自您工作计算机的您公司的私有 Gitlab 实例
[2] 请注意,为了可以在单击 link 后进行安装,文件名必须以 .user.js
我已经在另一个问题中回答过了;我认为有人应该合并它们。与此同时,由于我还没有看到很多这方面的信息,我会把它放在这里以供下一个寻求帮助的人使用。
编码即时更新
我们将仅配置几项内容,以便您可以在编辑器中编写代码并轻松查看浏览器中反映的更改。
- 转到 Chrome => Extensions 并找到 TamperMonkey 'card'。单击详细信息。在打开的页面上,允许它访问文件 URLs:
将脚本文件保存在文件系统中的任何位置。保存整个内容,包括
==UserScript==
header。这适用于所有桌面 OS,但由于我使用的是 macOS,我的路径将是:/Users/me/Scripts/SameWindowHref.user.js
现在,转到 TM 扩展的仪表板,在其编辑器中打开有问题的脚本并删除所有内容 除了 整个
==UserScript==
header在header中添加一个
@require
属性指向脚本的绝对路径。
此时,TM 的编辑器应如下所示:
更新: 看来现在需要在路径的开头使用 file://
URI scheme。在 windows 系统上将是:
// @require file://C:\path\to\userscript.user.js
对于 macOS 和 *nix,我们需要连续三个斜杠:
// @require file:///path/to/userscript.user.js
执行上下文
如果您有多个 JavaScript 文件通过 @require
调用(例如 jQuery 或将大量脚本分割成更小的部分以获得更好的体验),请不要跳过这部分.
@require
路径可以引用*.user.js
或直接引用*.js
文件,这些文件中任何UserScript-style注释header都有没有效果.
从主脚本的 ==UserScript==
header 开始,所有 @require
文件都是 text-concatenated 指定的顺序 ,带有单个换行符分隔每个文件。这种合并 运行s 作为一个大脚本。这意味着任何文件中的任何全局函数或变量在所有用户脚本文件中也将是全局的,这是不理想的。
一个文件中的错误可能会影响后续文件 运行。此外,要在所有文件上启用严格模式,'use strict';
必须是 第一个文件 的 第一个语句 @require
.
在所有 @require
个文件 运行 之后,您的主要用户脚本(由 TamperMonkey 的编辑器访问的那个)在单独的上下文中 运行。如果你想要严格模式,你也必须在这里启用它。
工作流程
现在,每次该脚本匹配 (@match
) 您正在访问的网站时,TamperMonkey 将直接加载 运行 直接从磁盘文件中的代码,由 @require
字段。
我使用 VSCode(可以说是 有史以来最好的 多平台代码编辑器。而且是免费的),所以这就是我处理脚本的地方,但任何文本编辑器都可以.它应该是这样的:
请注意 TM 的编辑器和您的 IDE/Editor 如何具有相同的 header。
代码中的每个更改都会自动保存在 VSCode 中,因此如果您没有记得保存。然后,您必须 重新加载网站 才能看到更改,但您也可以使用 browser-sync's CLI 中的 one-liner 轻松实现自动化,仅举一个工具, 体验很棒
如果您不使用 git,您应该考虑将它与您的用户脚本一起使用,即使您是唯一的开发者。它将帮助跟踪您的进度,同时理智地处理不同的功能,回滚错误,并帮助您自动向用户发布新更新!
奖金提示!
使用 GitHub 或其他 SCM
您必须添加 @updateURL
标签,后跟 URL 以及来自 GitHub 或您选择的任何提供商的原始文件。 GitHub的例子:
请注意,需要 @version
标记才能进行更新检查。绝大多数用户不需要 @downloadURL
标签,因此除非您的脚本拥有庞大的追随者群,否则请使用 @updateURL
.
TM 将检查更新,因为它是从设置选项卡配置的:
Externals 设置从脚本 @require
调用的脚本检查更新的频率(例如 jQuery)。
您还可以“强制”更新检查:
使用外部库(如jQuery)
它必须 至少 存在于 TM 的编辑器中,Chrome 才能加载它。但是,我建议保持 headers(TM 和磁盘上的文件 header)相同以避免混淆。简单地 @require
就像这样使用它:
// @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
RTFM
看看TM's documentation page;它不咬人! 它非常简洁,而且快速阅读后,您将清楚地了解可以不费吹灰之力完成的工作!
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')
如果 header 发生变化,需要执行另一个脚本
Tampermonkey 使用一种叫做 WebDAV 的东西来使用外部编辑器来编辑用户脚本; TamperDAV。
我还没有尝试过,但看起来应该可以连接 Visual Studio。
除 carles
@required file:///Users/me/STUFF/Code/Scripts/SameWindowHref.user.js
Trim21提供,可能是目前最好的large-scale UserScript development solution,使用webpack配合LiveReloadPlugin实现模块化开发和自动化测试
可以使用ES5/ES6和TypeScript在IDE上开发模块化脚本。真的好用!
集成LiveReloadPlugin,可以直接刷新任意@match
URL.
比之前的方案更好,大大提高了UserScript的开发效率!