// ==UserScript==
// @name 点击变色
// @version 0.46
// @description 点击变色并在新窗口打开 alt+ctrl+c 打开颜色设置面板
// @match *://*/*
// @author 变异小僵尸
// @namespace https://greasyfork.org/users/85375
// @downloadURL none
// ==/UserScript==
(function() {
'use strict';
//变量
var color = "#bbb";
var storage = window.localStorage;
var isHttp = 'https:' == document.location.protocol ? true : false;
var styles = '';
// 设置storage
if (storage.getItem('colorDown')) {
color = storage.getItem('colorDown');
} else {
storage.setItem('colorDown', color);
}
// 设置界面
var colorHtml = '[点击变色]颜色设置(当前域名)
' +
'' +
'' +
'
';
// 设置按键
window.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e.keyCode == 67 && e.ctrlKey && e.altKey) {
if (!document.querySelector('#colorControl')) {
var div = document.createElement('div');
div.setAttribute('id', 'colorControl');
div.setAttribute('style', 'position: fixed;top: 15px;right: 15px;background-color: white;height: auto;line-height: 30px;z-index:99999');
div.innerHTML = colorHtml;
document.body.appendChild(div);
} else {
document.querySelector('#colorControl').style.display = 'block';
}
if (!document.querySelector('#colorJscolor')) {
var script = document.createElement("script");
if (isHttp) {
script.setAttribute('src', 'https://cdn.bootcss.com/jscolor/2.0.4/jscolor.min.js');
} else {
script.setAttribute('src', 'http://cdn.bootcss.com/jscolor/2.0.4/jscolor.min.js');
}
script.setAttribute('id', 'colorJscolor');
var heads = document.querySelectorAll("head");
if (heads.length) {
heads[0].appendChild(script);
} else {
document.documentElement.appendChild(script);
}
}
//获取设置
document.querySelector('#colorDownOk').addEventListener('click', function() {
setColor();
}, false);
document.querySelector('#colorDownHide').addEventListener('click', function() {
// document.body.removeChild(document.querySelector('#colorControl'));
document.querySelector('#colorControl').style.display = 'none';
// document.head.removeChild(document.querySelector('#colorJscolor'));
}, false);
}
};
// 设置颜色
var style = 'a:visited{color:' + color + ' !important}';
addStyle(style);
//获取所有a标签
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i++) {
// console.log(a[i].childNodes);
// childNodes(a[i], 1);
a[i].addEventListener('mousedown', function(e) {
// e.preventDefault()
var that = this;
that.addEventListener('click', function(e) {
var href = that.getAttribute('href').toLowerCase();
// 判定a标签链接
if (href === "" || href == "#" || href == "javascript:;" || href == "javascript:void(0);" || href == "javascript" || href == "javascript:void(0)") {
window.location.href = that.getAttribute('href');
} else {
// 阻止默认点击
e.preventDefault();
// 再新窗口打开链接
window.open(that.getAttribute('href'));
}
}, false);
styles = that.getAttribute('style');
if (styles !== null) {
styles = styles.toLowerCase();
if (styles.indexOf('color:' + color) === -1) {
styles += ';color:' + color + ';';
}
} else {
styles = 'color:' + color + ';';
}
//添加
that.setAttribute('style', styles);
}, false);
}
//创建style
function addStyle(string) {
var style = document.createElement("style");
style.setAttribute("type", "text/css");
style.setAttribute("id", 'colorDownStyle');
if (style.styleSheet) { // IE
style.styleSheet.cssText = string;
} else { // w3c
var cssText = document.createTextNode(string);
style.appendChild(cssText);
}
var heads = document.querySelectorAll("head");
if (heads.length) {
heads[0].appendChild(style);
} else {
document.documentElement.appendChild(style);
}
}
// 获取颜色
function setColor() {
var i = document.querySelector('#colorDownInput').value;
if (/^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(i)) {
storage.setItem('colorDown', i);
color = i;
var style = 'a:visited{color:' + color + ' !important}';
if (document.querySelector('#colorDownStyle')) {
document.head.removeChild(document.querySelector('#colorDownStyle'));
}
addStyle(style);
} else {
alert('请输入正确的颜色,如:#ffffff');
}
}
// 获取所有元素 type 1元素 2节点属性 3文本 8注释 9document 11 document片段
function childNodes(id, type) {
var node = [];
function foo(id2){
for (var i = 0; i < id2.childNodes.length; i++) {
if (id2.childNodes[i].nodeType === type) {
if (type === 1) {
//递归
node.push(id2.childNodes[i]);
foo(id2.childNodes[i], type);
}
}
}
}
foo(id);
return node;
}
})();