Tampermonkey开发教程之按钮

2020-07-23  阅读 45 次

Tampermonkey开发教程之按钮

// ==UserScript==
// @name     开发教程之按钮样式
// @namespace  https://greasyfork.org/zh-CN/users/104201
// @version    5.4
// @description  插件样式
// @author     雅爱
// require  https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
// @noframes
// @match    *://*/*
// @require  https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js
// ==/UserScript==

function addStyle(cssText) {
    let a = document.createElement('style');
    a.textContent = cssText;
    let doc = document.head || document.documentElement;
    doc.appendChild(a);
}

/**
 * 主界面 组件
 */
const comMain = {
    template: `<div id="crackVIPSet" style="top:50px;">
    <div id="nav">
    <button name="quickJump">▶</button>
    </div>
	<div id="list">
		<div>
		<b title="组合型解析" data-icon="?">组合解析</b>
		<b title="懒人专用" data-icon="?">懒人专用</b>
		</div>
	</div>
  </div>`,

};

/**
 * 主界面 CSS
 */
addStyle(`
  body{padding:0;margin:0}
  #crackVIPSet{z-index:999999;position:fixed;display:grid;grid-template-columns:50px 130px;width:50px;height:50px;overflow:hidden;padding:5px 0 5px 0;opacity:0.4;font-size:12px}
  #crackVIPSet button{cursor:pointer}
  #crackVIPSet:hover{width:180px;height:450px;padding:5px 5px 5px 0;opacity:1}
  #crackVIPSet #nav{display:grid;grid-auto-rows:50px 50px 200px;grid-row-gap:5px}
  #crackVIPSet #nav [name=quickJump]:active{cursor:move}
  #crackVIPSet #nav button{background:yellow;color:red;font-size:28px;padding:0;border:0;cursor:pointer;border-radius:0 5px 5px 0}
  #crackVIPSet #list{overflow:auto;margin-left:2px}
  #crackVIPSet #list b{display:block;cursor:pointer;color:#3a3a3a;font-weight:normal;font-size:14px;padding:10px;background-color:#ffff00cc;border-bottom:1px dashed #3a3a3a}
  #crackVIPSet #list b:before{content:attr(data-icon);padding-right:5px}
  #crackVIPSet #list b:first-child{border-radius:5px 5px 0 0}
  #crackVIPSet #list b:last-child{border-radius:0 0 5px 5px}
  #crackVIPSet #list b:hover{background-color:#3a3a3a;color:white}
`);

/**
 * 第二部分,开始生成主界面
 */
// 通讯总线
Vue.prototype.$tele = new Vue();

let crackApp = document.createElement("div");
crackApp.id = "crackVIPSet";
document.body.appendChild(crackApp);

new Vue({
    el: "#crackVIPSet",
    render: h => h(comMain)
});

方法二

// ==UserScript==
// @icon            https://www.5devip.com/favicon.ico
// @name            获取联盟 Cookie
// @namespace       https://tao.ccvok.com/
// @author          雅爱笔记
// @description     自动绘制手动获取联盟 Cookie
// @match           *://*/*
// @require         http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @version         0.0.1
// @grant           GM_addStyle
// ==/UserScript==



(function () {
    'use strict';

var $ = unsafeWindow.jQuery;

//与元数据块中的@grant值相对应,功能是生成一个style样式
GM_addStyle ('body{padding:0;margin:0}'
  + '#crackVIPSet{z-index:999999;position:fixed;display:grid;grid-template-columns:50px 130px;width:50px;height:50px;overflow:hidden;padding:5px 0 5px 0;opacity:0.4;font-size:12px}'
  + '#crackVIPSet button{cursor:pointer}'
  + '#crackVIPSet:hover{width:180px;height:450px;padding:5px 5px 5px 0;opacity:1}'
  + '#crackVIPSet #nav{display:grid;grid-auto-rows:50px 50px 200px;grid-row-gap:5px}'
  + '#crackVIPSet #nav [name=quickJump]:active{cursor:move}'
  + '#crackVIPSet #nav button{background:yellow;color:red;font-size:28px;padding:0;border:0;cursor:pointer;border-radius:0 5px 5px 0}'
  + '#crackVIPSet #list{overflow:auto;margin-left:2px}'
  + ' #crackVIPSet #list b{display:block;cursor:pointer;color:#3a3a3a;font-weight:normal;font-size:14px;padding:10px;background-color:#ffff00cc;border-bottom:1px dashed #3a3a3a}'
  + '#crackVIPSet #list b:before{content:attr(data-icon);padding-right:5px}'
  + '#crackVIPSet #list b:first-child{border-radius:5px 5px 0 0}'
  + '#crackVIPSet #list b:last-child{border-radius:0 0 5px 5px}'
  + '#crackVIPSet #list b:hover{background-color:#3a3a3a;color:white}');

//按钮的html代码
var ccvok_html = '<div id="crackVIPSet" style="top:50px;">'+
   '<div id="nav"><button name="quickJump">▶</button></div>'+
	'<div id="list">'+
		'<div>'+
		'<b id="Cookie_bd" title="获取cookie到本地" data-icon="?">Cookie到本地</b>'+
		'<b id="Cookie_wl" title="获取Cookie到网络" data-icon="?">Cookie到网络</b>'+
		'</div>'+
	'</div>'+
  '</div>';

//将以上拼接的html代码插入到网页
$("body").append(ccvok_html);

$("#Cookie_wl").unbind().click(function () {
	alert(document.cookie);
	console.log(document.cookie);

});


$("#Cookie_bd").unbind().click(function () {
    alert('你点击了 Cookie到本地');	
});

/*
var ul_tag = $("div.WB_handle>ul");
if (ul_tag) {
    ul_tag.removeClass("WB_row_r3").addClass("WB_row_r4").append(down_btn_html);
}
*/

})();


本文地址:https://www.5devip.com/post/162.html
版权声明:本文为原创文章,版权归 本站 所有,欢迎分享本文,转载请保留出处!

评论已关闭!