纯js油猴插件版GUI页面助手
想必大部分人都知道,油猴插件是个好东西,他可以在指定的页面加入一些js的功能,来快速地实现网页填表等功能
今天我写的内容不仅仅是这些简单操作,而是包含了以下知识点的操作:
1.纯js在指定页面上生成类似gui的界面,基本控件包含按钮用于点击执行功能,带滚轮编辑框用于显示日志,
以及右下角弹出窗口,大概样子是这样的:
2.js脚本的按钮对应的功能,写在服务器上的php文件里,每点击按钮时对该文件发出post请求,获得返回的文本进行执行
。这里需要ajax基础知识和php代码的编写
好了,直接上代码:
js部分(这里我命令为gui.js,弄好后复制粘贴到油猴插件里面):
// ==UserScript==
// @name 游戏辅助gui
// @namespace http://playdreamer.cn/
// @include http://*
// @version 1.0.0
// @description 道长发布的强大脚本,by道长论剑论坛。
// @author 道长
// @grant none
// ==/UserScript==
//---用户自定义设置区域----------
buju='auto';
pifu=0;
//--服务端可见区域---------------
function IsPC() {
var a = navigator.userAgent;
var b = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var c = true;
for (var v = 0; v < b.length; v++) {
if (a.indexOf(b[v]) > 0) {
c = false;
break
}
}
if (c == false) {
console.log("你的当前设备为移动端,已为你优化默认布局");
buju = 80
} else if (buju == "auto") {
if (window.screen.height == 1080) {
buju = 300
} else if (window.screen.height == 768) {
buju = 100
} else if (window.screen.height == 720) {
buju = 50
} else if (window.screen.height < 720) {
buju = 0
} else if (window.screen.height > 1080) {
buju = 500
} else {
buju = 300
}
console.log("功能按钮布局已自动优化为" + buju)
}
}
IsPC();
var btnList = {},
paddingLeft = '0px',
paddingRight = '0px',
clrs1 = 'color',
clrs2 = 'ground',
color0 = '#E0EEEE',
ground0 = '#9370DB',
color1 = '#BFEFFF',
ground1 = '#BDB76B',
color2 = '#E0EEE0',
ground2 = '#CD661D',
color3 = '#FFFAFA',
ground3 = '#FFB6C1',
color4 = null,
ground4 = null,
color = eval(clrs1 + pifu),
ground = eval(clrs2 + pifu),
buttonWidth = '70px',
buttonHeight = '20px',
currentPos = 5,
delta = 30,
nowversion = "1.1.0",
database = window.localStorage;
var btnBox2 = document.createElement('div');
btnBox2.style.position = 'absolute';
btnBox2.style.top = '210px';
btnBox2.style.left = 460 + buju + 'px';
btnBox2.style.width = buttonWidth;
btnBox2.style.height = buttonHeight;
document.body.appendChild(btnBox2);
var btnBox1 = document.createElement('div');
btnBox1.style.position = 'absolute';
btnBox1.style.top = '210px';
btnBox1.style.left = 540 + buju + 'px';
btnBox1.style.width = buttonWidth;
btnBox1.style.height = buttonHeight;
document.body.appendChild(btnBox1);
function createButton(a, b, c) {
btnList[a] = document.createElement('button');
var d = btnList[a];
d.innerText = a;
d.style.marginTop = currentPos + "px";
d.style.color = color;
d.style.background = ground;
d.style.paddingLeft = paddingLeft;
d.style.paddingRight = paddingRight;
d.style.width = '100%';
d.style.height = '100%';;
d.addEventListener('click', c);
b.appendChild(d)
}
var html580ads = {
init: function(a, c) {
a = '<h2 id="outle" style="height: 40px; top:-15px; line-height: 30px; padding-left: 5px; font-size: 20px;text-align:center; color:' + color + ";background:" + ground + ';border-bottom: 1px solid #aaaaaa; position: relative; "><b>' + a + '</b><span style="width: 21px; height: 20px;position: absolute; top: 1px; right:30px;"><a id="btn_min" href="javascript:void(0); ">一</a>  <a id="btn_close" href="javascript:void(0);" >X</a></span></h2><div id="mainoutle" style="height:150px; width:300px; overflow: hidden; font-size: 18px; line-height: 18px;text-decoration:underline; color:rgb(195, 66, 255);"><div style="padding:2px;"><b>' + c + "</b></div></div>";
var b = this;
c = document.body;
b.oDiv = document.createElement("div");
b.oDiv.id = "miaov_float_layer";
b.oDiv.style.cssText = "border: 1px solid #aaaaaa; display:none;width:300px;";
c.appendChild(b.oDiv);
b.oDiv.innerHTML = a;
var d = document.getElementById("btn_min");
a = document.getElementById("btn_close");
b.oDivContent = b.oDiv.getElementsByTagName("div")[0];
var e = 0;
c = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);
b.oDiv.style.display = "block";
e = b.oDivContent.offsetHeight;
c ? (b.oDiv.style.position = "absolute", b.repositionAbsolute(), window.attachEvent("onscroll", function() {
b.repositionAbsolute()
}), window.attachEvent("onresize", function() {
b.repositionAbsolute()
})) : (b.oDiv.style.position = "fixed", b.repositionFixed());
d.timer = null;
d.isMax = !0;
d.onclick = function() {
b.startMove(b.oDivContent, (this.isMax = !this.isMax) ? e : 0, function() {
d.className = "min" == d.className ? "max" : "min"
})
};
a.onclick = function() {
b.oDiv.remove()
}
},
startMove: function(a, c, b) {
a.timer && clearInterval(a.timer);
var d = this;
a.timer = setInterval(function() {
d.doMove(a, c, b)
}, 30)
},
doMove: function(a, c, b) {
var d = (c - a.offsetHeight) / 8;
a.offsetHeight == c ? (clearInterval(a.timer), a.timer = null, b && b()) : (d = 0 < d ? Math.ceil(d) : Math.floor(d), a.style.height = a.offsetHeight + d + "px", window.navigator.userAgent.match(/MSIE 6/ig) && 2 == window.navigator.userAgent.match(/MSIE 6/ig).length ? this.repositionAbsolute() : this.repositionFixed())
},
repositionFixed: function() {
this.oDiv.style.right = 0;
this.oDiv.style.bottom = 0
},
repositionAbsolute: function() {
var a = document.body.scrollTop || document.documentElement.scrollTop,
c = document.documentElement.clientHeight;
this.oDiv.style.left = (document.body.scrollLeft || document.documentElement.scrollLeft) + document.documentElement.clientWidth - this.oDiv.offsetWidth + "px";
this.oDiv.style.top = a + c - this.oDiv.offsetHeight + "px"
},
changemsgcss: function() {
document.getElementById("outle").style.color = color;
document.getElementById("outle").style.background = ground
}
};
function alertmsg(a, c) {
1 == database.alert_flag ? (document.getElementById("btn_close") && html580ads.oDiv.remove(), html580ads.init(a, c)) : console.log("你有一条弹窗消息待显示,可弹窗功能未开启")
}
function mainoutle(a, c) {
document.getElementById("mainoutle").style.height = a + "px";
document.getElementById("mainoutle").style.width = c + "px";
html580ads.oDiv.style.width = c + "px"
};
database.alert_flag = 1;
alertmsg("道长仙人跳", "此脚本内测开发中,有新功能需求建议请联系道长。\n道长唯一qq:434857005");
(function() {
var e, isInitialized = false,
_console = {};
function createElement(a, b) {
var c = document.createElement(a);
c.style.cssText = b;
return c
}
function createPanel(a) {
a.bgColor = a.bgColor || ground;
a.color = a.color || color;
a.css = a.css || '';
a.freeConsole = false;
var b = createElement('div', 'font-family:Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;padding:5px;text-align:left;opacity:0.8;position:fixed;left:300px;top:216px;min-width:200px;max-height:50vh;overflow:auto;background:' + a.bgColor + ';color:' + a.color + ';' + a.css);
b.style.left = 610 + buju + 'px';
return b
}
function log() {
var c = createElement('div', 'line-height:18px;background:' + (e.children.length % 2 ? 'rgba(255,255,255,0.2)' : ''));
var d = [].slice.call(arguments).reduce(function(a, b) {
return a + ' ' + b
}, '');
c.textContent = d;
e.appendChild(c);
e.scrollTop = e.scrollHeight - e.clientHeight
}
function clear() {
e.innerHTML = ''
}
function init(a) {
if (isInitialized) {
return
}
isInitialized = true;
a = a || {};
e = createPanel(a);
document.body.appendChild(e);
if (!a.freeConsole) {
_console.log = console.log;
_console.clear = console.clear;
console.log = originalFnCallDecorator(log, 'log');
console.clear = originalFnCallDecorator(clear, 'clear')
}
}
function destroy() {
isInitialized = false;
console.log = _console.log;
console.clear = _console.clear;
e.remove()
}
function hidelog() {
e.style.visibility = "hidden"
}
function showlog() {
e.style.visibility = "visible"
}
function changecss() {
e.style.color = color;
e.style.background = ground
}
function checkInitialized() {
if (!isInitialized) {
throw 'You need to call `screenLog.init()` first.';
}
}
function checkInitDecorator(a) {
return function() {
checkInitialized();
return a.apply(this, arguments)
}
}
function originalFnCallDecorator(a, b) {
return function() {
a.apply(this, arguments);
if (typeof _console[b] === 'function') {
_console[b].apply(console, arguments)
}
}
}
window.screenLog = {
init: init,
log: originalFnCallDecorator(checkInitDecorator(log), 'log'),
clear: originalFnCallDecorator(checkInitDecorator(clear), 'clear'),
destroy: checkInitDecorator(destroy),
hidelog: checkInitDecorator(hidelog),
showlog: checkInitDecorator(showlog),
changecss: checkInitDecorator(changecss)
}
})();
screenLog.init();
screenLog.log('道长仙人跳By道长: version---' + nowversion);
//----函数类-------------------------------------
function GetFunc(name){
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var a=xmlhttp.responseText;
eval(a);
}
}
xmlhttp.open("POST","https://dashennet.cn/functions/?t="+Math.random(),true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("do="+name);
}
function go(s){
console.log(s);
}
function Test(){
GetFunc("签到");
}
//----按钮排列-------------------------------------
createButton('测试1-1',btnBox1,Test);
createButton('测试1-2',btnBox1,Test);
createButton('测试2-1',btnBox2,Test);
createButton('测试2-2',btnBox2,Test);
php部分,这里我命名为index.php,因为这样做在post的时候只需要post上个目录即可
我把它放在 https://dashennet.cn/functions/ 目录下
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: X-Requested-With');
$do=$_POST["do"];
$qd="console.log('签到一次!');go('jh 1;w;event_1_46497436;jh 5;n;n;n;w;sign7');";
$签到="function qd(){
console.log('签到一次!');
go('jh 1;w;event_1_46497436;jh 5;n;n;n;w;sign7;home');
}
qd();";
switch ($do)
{
case "签到":
echo $签到;
break;
default:
echo "<h1>道长提示</h1><p>购买授权请加道长qq号:434857005</p>";
}
?>
完事儿后,任意一个网页刷新都可见我的js的按钮界面,任意点击一个按钮
看看调试控制台输出的信息如下
成功,教程到此结束!