Greasy Fork is available in English.
打开GKD网页审查工具后，允许用户添加选择器以供快捷选用查询。
// ==UserScript==
// @name GKD网页审查工具规则快捷搜索
// @namespace https://blog.adproqwq.xyz
// @version 0.1.2
// @description 打开GKD网页审查工具后，允许用户添加选择器以供快捷选用查询。
// @author Adpro
// @match https://i.gkd.li/*
// @exclude https://i.gkd.li
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @require https://cdn.jsdelivr.net/npm/js-base64@3.1.2/base64.min.js
// @require https://cdn.jsdelivr.net/npm/json5@2.2.3/dist/index.min.js
// @license Mulan PSL v2
// ==/UserScript==
(function() {
'use strict';
const layuiScript = document.createElement('script');
layuiScript.src = 'https://www.layuicdn.com/layui/layui.js';
const layuiCss = document.createElement('link');
layuiCss.rel = 'stylesheet';
layuiCss.href = 'https://www.layuicdn.com/layui/css/layui.css';
document.body.appendChild(layuiScript);
document.head.appendChild(layuiCss);
if(window.localStorage.getItem('selectors') === null) window.localStorage.setItem('selectors','[]');
var selector;
function chooseSelector(){
const layer = layui.layer;
const form = layui.form;
layer.open({
type: 1,
title: '选择选择器',
area: 'auto',
shadeClose: true,
success: (layero, index, that) => {
document.getElementsByName('certain')[0].onclick = () => {
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set('gkd', selector);
window.location = currentUrl.toString();
};
getSavedSelectors();
},
content: `
<div class="layui-form">
<div class="layui-form-item">
<div id="selectors" class="layui-form-item">
<label class="layui-form-label">选择选择器：</label>
</div>
<div class="layui-btn-container">
<button type="button" name="certain" class="layui-btn">确定</button>
</div>
</div>
</div>
`,
});
layui.use(() => {
form.render();
});
form.on('radio(selector-filter)', (data) => {
let elem = data.elem;
selector = elem.value;
});
}
function addSelector(){
let savedSelectors = JSON5.parse(window.localStorage.getItem('selectors'));
let selectorStorage = {};
const layer = layui.layer;
layer.prompt({title: '请输入选择器备注'}, function(value, index, elem){
if(value === '') return elem.focus();
selectorStorage.name = value;
layer.prompt({title: '请输入选择器'}, function(value, index, elem){
if(value === '') return elem.focus();
selectorStorage.base64 = Base64.encodeURI(value);
savedSelectors.push(selectorStorage);
window.localStorage.setItem('selectors', JSON5.stringify(savedSelectors));
layer.close(index);
});
layer.close(index);
});
}
function editSelector(){
const layer = layui.layer;
const form = layui.form;
var Index = -1;
layer.open({
type: 1,
title: '编辑',
area: 'auto',
shadeClose: true,
success: (layero, index, that) => {
document.getElementsByName('certain')[0].onclick = () => {
var savedSelectors = JSON5.parse(window.localStorage.getItem('selectors'));
const Tname = document.getElementsByName('Tname')[0].value;
const selector = document.getElementsByName('thisSelector')[0].value;
if(selector == '') savedSelectors.splice(Index,1);
else{
savedSelectors[Index].name = Tname;
savedSelectors[Index].base64 = Base64.encodeURI(selector);
}
window.localStorage.setItem('selectors',JSON5.stringify(savedSelectors));
layer.close(index);
};
getSavedSelectors();
},
content: `
<div class="layui-form">
<div class="layui-form-item">
<div id="selectors" class="layui-form-item">
<label class="layui-form-label">选择器：</label>
</div>
</div>
<div class="layui-form-item">
<label name="nameLabel" class="layui-form-label">备注：</label>
<div class="layui-input-group">
<input type="text" name="Tname" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label name="selectorLabel" class="layui-form-label">修改选择器为：</label>
<div class="layui-input-group">
<input type="text" name="thisSelector" lay-affix="clear" class="layui-input">
<div name="selectorTips" class="layui-input-suffix">
<i class="layui-icon layui-icon-tips"></i> 留空即为删除
</div>
</div>
</div>
<div class="layui-btn-container">
<button type="button" name="certain" class="layui-btn">确定</button>
</div>
</div>
`,
});
layui.use(() => {
form.render();
});
form.on('radio(selector-filter)', (data) => {
Index = -1;
var elem = data.elem;
var base64 = elem.value;
var savedSelectors = JSON5.parse(window.localStorage.getItem('selectors'));
for(let s of savedSelectors){
Index++;
if(s.base64 == base64){
document.getElementsByName('Tname')[0].value = s.name;
document.getElementsByName('thisSelector')[0].value = Base64.decode(s.base64);
break;
}
}
});
}
function getSavedSelectors(){
var savedSelectors = window.localStorage.getItem('selectors');
const selectorChoo = document.getElementById('selectors');
if(savedSelectors != '[]'){
savedSelectors = JSON5.parse(savedSelectors);
savedSelectors.forEach((b) => {
let TInput = document.createElement('input');
TInput.type = 'radio';
TInput.name = 'selector';
TInput.value = b.base64;
TInput.title = b.name;
TInput.setAttribute('lay-filter','selector-filter');
selectorChoo.appendChild(TInput);
});
}
}
var insertIcon = document.createElement('i');
var addIcon = document.createElement('i');
var editIcon = document.createElement('i');
insertIcon.setAttribute('class','layui-icon layui-icon-util');
insertIcon.setAttribute('style','cursor: pointer;');
addIcon.setAttribute('class','layui-icon layui-icon-add-1');
addIcon.setAttribute('style','cursor: pointer;');
editIcon.setAttribute('class','layui-icon layui-icon-edit');
editIcon.setAttribute('style','cursor: pointer;');
let app = document.getElementById('app');
let config = {
childList: true
};
let callback = (mutationsList) => {
mutationsList.forEach(() => {
isLoad();
});
};
let observer = new MutationObserver(callback);
observer.observe(app,config);
function isLoad(){
try {
throw document.querySelectorAll('.n-radio-group').length;
} catch (length) {
if(length == 0) return;
}
observer.disconnect();
var radioGroup = document.querySelector('.n-radio-group > div');
radioGroup.appendChild(insertIcon);
radioGroup.appendChild(addIcon);
radioGroup.appendChild(editIcon);
document.querySelector('.layui-icon-util').onclick = () => {
chooseSelector();
};
document.querySelector('.layui-icon-add-1').onclick = () => {
addSelector();
};
document.querySelector('.layui-icon-edit').onclick = () => {
editSelector();
};
}
})();