为Greasemonkey脚本创建"config"或"options"页面

Question

我写了一个简单的Greasemonkey脚本,我正在尝试为这个脚本创建一个"配置"页面(就像用于Google Chrome扩展程序的那样).是否有任何方法可以为用户脚本创建配置页面,就像Google Chrome扩展程序的"选项"页面一样？没有任何方法可以将.html页面作为Greasemonkey脚本的一部分包含在内(据我所知),所以我正在寻找其他选项.

// ==UserScript==
// @name       Redirector
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      http://*/*
// @copyright  2012+, You
// @run-at document-start
// ==/UserScript==

redirectToPage("http://www.youtube.com/", "http://www.google.com");

function redirectToPage(page1, page2){
if(window.location.href.indexOf(page1) != -1){
    window.location.href = page2;
}
}

Answer 1

有一些库为用户脚本提供配置页面:

1)GM_config

2)MonkeyConfig

3)GM_registerMenuCommand子菜单JS模块

每个库的使用情况各不相同,但通常会授予他们所需的权限,例如GM_getValue和GM_setValue,并通过@require指令要求库,例如:

// ==UserScript==
// @name          My Userscript
// @description   An example userscript with a config page
// @version       0.0.1
// @require       https://www.example.com/lib/myconfig.js
// @grant         GM_getValue
// @grant         GM_setValue
// @grant         GM_addStyle
// @grant         GM_registerMenuCommand
// ==/UserScript==

const config = new MyConfig({ ... })

然后注册菜单命令,打开配置页面/对话框,例如:

GM_registerMenuCommand('Configure My Userscript!', () => {
    config.open()
})

在MonkeyConfig的情况下,它可以为您注册命令:

const config = new MonkeyConfig({
    title: 'Configure My Userscript!',
    menuCommand: true,
    // ...
})

对于高级用途,配置程序可能允许为关闭/取消/保存按钮提供回调,以及提供对CSS和其他选项的控制.可以在GM_config wiki和MonkeyConfig主页上找到详细说明.

Answer 2

如果你使用它作为chrome,那么它不是Greasemonkey而是Tampermonkey.

您可以考虑使用GM_getResourceText,将您的html粘贴到pastebin.com(或类似),并将链接作为@resource之一添加到元数据块.至少,我知道它适用于Greasemonkey.

例如:

// @resource configHtml http://pastebin.com/raw.php?i=2RjKfwJQ

// ... some DOM node that you will append to the current page
node.innerHTML = GM_getResourceText("configHtml");