为 Greasemonkey 脚本创建”配置”或”选项”页面

Create a "config" or "options" page for a Greasemonkey script

我写了一个简单的 Greasemonkey 脚本，我正在尝试为这个脚本创建一个"配置"页面(就像用于 Google Chrome 扩展的那个页面。)有什么方法可以为用户脚本创建配置页面，例如 Google Chrome 扩展的"选项"页面？没有任何方法可以将 .html 页面包含为 Greasemonkey 脚本的一部分(据我所知)，因此我正在寻找其他选项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// ==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;
}
}

相关讨论

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

1) GM_配置

Example

2)猴子配置

Example

3) GM_registerMenuCommand 子菜单 JS 模块

每个库的用法各不相同，但通常您授予他们所需的权限，例如 GM_getValue 和 GM_setValue，并通过 @require 指令要求该库，例如：

1
2
3
4
5
6
7
8
9
10
11
12

// ==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({ ... })

然后您注册一个打开配置页面/对话框的菜单命令，例如：

1
2
3

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

在 MonkeyConfig 的情况下，它可以为你注册命令：

1
2
3
4
5

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

对于高级用途，配置器可以允许为关闭/取消/保存事件注册侦听器，并提供对 CSS 和其他选项的控制。详细说明可以在 GM_config wiki 和 MonkeyConfig 主页上找到。

相关讨论

如果您将它用于 chrome，那么它不是 Greasemonkey 而是 Tampermonkey。

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

例如：

1
2
3
4

// @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");

相关讨论

此用户脚本不使用任何外部库。通过修改你可以做出好的用户界面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// ==UserScript==
// @name UI development
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author ManojBhakarPCM
// @match https://www.google.com/
// @grant none
// ==/UserScript==

(function() {
'use strict';
function ui_create(contentss){
var div = document.createElement('div');
//var contentss ="TESTsssss";
div.innerHTML = '<span id="mbpcm_close" style="float: right;font-size:25px;cursor: pointer;"></span>'+ contentss +'';
document.body.appendChild(div);
var modal = document.getElementById("mbpcm_modal");
var close = document.getElementById("mbpcm_close");
close.onclick = function(){modal.style.display ="none";}
}
function ui_add_opener(parent,classs,stylee){
var btn = document.createElement("button");
btn.setAttribute("class",classs);
btn.setAttribute("style",stylee);
btn.setAttribute("id","mbpcm_ui_opener");
btn.innerHTML ="Settings";
parent.appendChild(btn);
var modal = document.getElementById("mbpcm_modal");
var btnn = document.getElementById("mbpcm_ui_opener");
btnn.onclick = function(){modal.style.display ="block";}
}
function ui_addElement(el,cls,styl,val,innerHtml){
var modal = document.getElementById("mbpcm_content");
var e = document.createElement(el);
e.setAttribute("class",cls);
e.setAttribute("style",styl);
e.setAttribute("value",val);
e.innerHTML = innerHtml;
modal.appendChild(e);
return e;
}

ui_create("Title<span>discription</span>");
ui_add_opener(document.getElementById("gbw"),"RNmpXc","nothing");
ui_addElement("button","modal","none","none","TestButton").onclick = function(){alert("hellow ji");}
ui_addElement("br","","","","");
ui_addElement("button","none","none","none","TestButton").onclick = function(){alert("How are you");}
ui_addElement("button","none","none","none","TestButton").onclick = function(){alert("Kaise ho");}
})();

对您已经包含的页面使用参数，如果设置了该参数，则清除整个文档：
http://page.my.script.runs.on/?configPage=true

1
2
3

if(getUrlParameter("configPage") ==="true") {
$(document).empty
}

相关讨论

这是非常需要的，但现在两种方法的组合应该可以工作。

1) 对于个人用途，我在脚本顶部只有一堆变量。这里的问题是，如果其他人使用我的脚本，更新最终会删除他的偏好。

2) 在您的网站上有一个配置页面。虽然这非常有效，但网站总是被删除。脚本没有充分的理由依赖网站来工作。

如果您同时执行这两项操作，则用户可以在脚本网站消失时编辑脚本中的首选项。

这是一个示例，其中不需要的功能被 // 注释掉了。

http://go-here.nl/gm/wikipedia-clean-up.php

祝你好运，享受

相关讨论