Greasy Fork 支持简体中文。

Programer's Web Friend

change Programer's Web style to mobile device friendly ,and more readble

目前為 2018-11-24 提交的版本,檢視 最新版本

// ==UserScript==
// @name         Programer's Web Friend
// @namespace    https://tampermonkey.net/
// @version      2.1.0
// @description  change Programer's Web style to mobile device friendly ,and more readble
// @author       @Amormaid
// @run-at       document-end
// @match        http://*/*
// @include     http://*
// @include     https://*
// @exclude     http://localhost*
// @license     MIT License
// @grant       none
// ==/UserScript==


main()

function main() {
  // var root = document.body;
  // var hostname = /\d+\.\d+\.\d+\.\d+/.test(window.location.hostname) ? "ip": window.location.hostname;
  var hostname = window.location.hostname;

  if (exclude_check(hostname)) {
    return
  }

  // console.clear();

  try {
    console.time("allen_web_time_count");
  
    // customer change 
    let rules = customer_rules()
    let matched_rule = rules.filter( rule_item => rule_item.hostname instanceof Array 
      ? rule_item.hostname.includes(hostname) 
      : rule_item.hostname === hostname 
    )[0]
    matched_rule.action()
    // main_content_adjust(obj.main_ele);
    var main_content = main_ele_searcher();
    ele_remover(main_content);
    // full window
    // document.body.style.cssText = "position:absolute; top:0;right:0; bottom:0;left:0;"
    // document.body.style.width = window.innerWidth
    // document.body.style.height = window.innerHeight
    
    change_style();
    console.timeEnd("allen_web_time_count");
  } catch(err) {
    //console.log(err.name,' ',err.message);
    console.log(err.message);
  }
}

//  white list check
function exclude_check(hostname_param) {
  // 不执行脚本的网站白名单
  let exclude_list = ["www.youtube.com", "demo.mycodes.net", "kiwivm.64clouds.com", "www.instagram.com", "www.h-ui.net", "www.layui.com", "www.kixeye.com", "pan.baidu.com", "www.rishiqing.com", "wx.qq.com", "mail.126.com", "twitter.com", "reactjs.org", "codepen.io", "free.modao.cc", "lanhuapp.com", "developers.weixin.qq.com", "jira.vankeservice.com", "www.tapd.cn", "10.0.74.227", "modao.cc", "element-cn.eleme.io", ""]
  return exclude_list.includes(hostname_param)
}

// 自定义样式调整
function customer_rules() {
  let rules = [
    {
      rule: "default",
      hostname: "ip",
      regexp: "",
      action: () => {}
    },
    {
      rule: "default",
      hostname: "wc-kx-vip.sjc.kixeye.com",
      regexp: "",
      action: () => {
        $$('#above-game-message', 'remove_one');
        $$('#kxp-footer-bar', 'remove_one');
        $$('#topnavbar_back', 'remove_one');
      }
    },
    {
      rule: "default",
      hostname: ["www.baidu.com", "zhidao.baidu.com"],
      regexp: "",
      action: () => {
        let interval_id = setInterval( () => {
          const right_list_length = 4
          $$("#content_right", 'remove_all');
          var zhidao_body = $$("#body", "return_one");
          var container = $$("#container", "return_one");
          var head = $$("#head", "return_one");
          var pad = $$("#s_tab", "return_one");
          $$("#rs", "remove_all")
          var u = $$("#u", "return_one");
          container.style.cssText = "display:block;width:100%;position:relative;"
          head && (() =>  {
            head.style.position = 'relative';
            head.style.width = window.innerWidth - 100 + 'px';
            head.style['min-width'] = 0;
          })();
          pad && (() =>  {
            pad.style.padding = '0 0 0 121px'
          })();
          u && (() =>  {
            u.style.display = 'none'
          })();
          zhidao_body && (() =>  {
            zhidao_body.style.left = "50px"
          })();

          let origin_length = document.getElementById("content_left").children.length

          if (origin_length > 5) {
            // console.log(content_list)
            let right_list = Array.prototype.slice.call($$(".result", "return_all"), right_list_length)
            let container_r = document.createElement("div")
            container_r.style.cssText += "display:block;position:absolute;top:40px;left:740px;width:600px;"
            // let str = Array.prototype.reduce.call(right_list, (html_str, item ,index , right_list) => (item.innerHTML + html_str), '')
            Array.prototype.forEach.call(right_list, item => {
              item.style.cssText += "padding:10px 0;"
              container_r.appendChild(item)
            })
            let container_r_dom = container.appendChild(container_r)
            let page_indic = $$("#page", "return_one")
            page_indic.style.cssText = "position:absolute;top:0px;left:660px;margin:-60px 0 0 0;z-index:300"

          }

        },300)
      }
    },
    {
      rule: "default",
      hostname: ["i.taobao.com", "trade.taobao.com", "rate.taobao.com", "buyertrade.taobao.com"],
      regexp: "",
      action: () => {
        $$(".m-guess-you-like", "remove_one");
        $$(".m-someone-like-you", 'remove_one');
        $$("#p4p_ad", 'remove_one');
        $$(".J_guess-you-like", 'remove_one');
      }
    },
    {
      rule: "default",
      hostname: ["www.cnblogs.com", "blog.csdn.net"],
      regexp: "",
      action: () => {
        var content = $$("#content", "return_one");
        $$("#sidebar", "remove_one");
        $$("#side", 'remove_one');

        content && (() =>  {
          content.style["margin-right"] = "10";
          content.style.width = window.innerWidth - 100 + 'px';
        })();

        let article = $$("#article_content", "return_one");
        article && (() => {
          article.style.height = "100%";
          article.style.overflow = "visible";
        })() 
        $$(".recommend-item-box", "remove_all");
        $$(".hide-article-box", "remove_one");
        $$("aside", "remove_one");
        let main = $$("main", "return_one") 
        if (main) main.style.float = "left";
        setTimeout(() => {
          $$(".adblock", "remove_one");
        },
        3000) 
        $$(".pulllog-box", "remove_one");
      }
    },
    {
      rule: "default",
      hostname: "www.w3school.com.cn",
      regexp: "",
      action: () => {
        $$("#navsecond", 'hide_one');
      }
    },
    {
      rule: "default",
      hostname: "wallstreetcn.com",
      regexp: "",
      action: () => {
        setInterval(() =>  {
          $$('.news-item__cover', 'remove_all');
          change_style();
        },
        500);

        $$('.left-bar', 'remove_one');
      }
    },
    {
      rule: "default",
      hostname: "www.merriam-webster.com",
      regexp: "",
      action: () => {
        $$(".right-rail", 'hide_one');
        $$("#recirc-bar-footer", 'hide_one');
        $$(".wgt-related-to.jc-card-box.clearfix", 'hide_one');
      }
    },
    {
      rule: "default",
      hostname: "blog.sina.com.cn",
      regexp: "",
      action: () => {
        $$("#column_1", 'hide_one');
      }
    },
    {
      rule: "default",
      hostname: ["blog.jobbole.com", "web.jobbole.com"],
      regexp: "",
      action: () => {
        $$("#sidebar", 'hide_one');
        var grid = $$(".grid-8", 'return_one');
        grid && (() =>  {
          grid.style.width = "100%"
        })();
      }
    },
    {
      rule: "default",
      hostname: "juejin.im",
      regexp: "",
      action: () => {
        var interval_id = setInterval(() =>  {
          var a = $$(".show-full", 'return_one');
          var b = $$(".show-full-block", 'return_one');
          $$(".show-full-btn", 'remove_one');
          $$('.columen-view-aside', 'hide_one');

          if (a) a.style.height = "auto";
          a && a.setAttribute('style', 'height:auto') 
          if (b) {
            clearInterval(interval_id);
            b.setAttribute('style', 'height:auto')
          }
        },
        100);
        setInterval(change_style, 300)
      }
    },
    {
      rule: "default",
      hostname: "www.cnblogs.com",
      regexp: "",
      action: () => {
        $$("#sideBar", 'hide_one');
        $$("#vid", 'hide_one');
        $$("#left", 'hide_one');
        $$("#right_content", 'hide_one');
        $$("#leftcontent", 'hide_one');
        var a = $$("#centercontent", 'return_one');
        if (a) {
          a.style['padding-left'] = 0;
        }
      }
    },
    {
      rule: "default",
      hostname: "github.com",
      regexp: "",
      action: () => {
        document.body.style.minWidth = '100px';
        var github_pad = document.querySelector('.column.three-fourths.codesearch-results.pr-6');
        if (github_pad) {
          github_pad.style.padding = '10px 0 10px 30px';
        }
      }
    },
    {
      rule: "default",
      hostname: "wiki.jikexueyuan.com",
      regexp: "",
      action: () => {
        $$(".detail-left", 'hide_one');
        var a = $$(".detail-main", 'no_option', 'one');
        a.style['margin-left'] = '0px';
        a.style.width = document.body.clientWidth + 'px';
      }
    },
    {
      rule: "default",
      hostname: "www.cssmoban.com",
      regexp: "",
      action: () => {
        var a = $$(".wide-main.col-media-main.clearfix", 'return_one');
        a.style.width = document.body.clientWidth + 'px';
      }
    },
    {
      rule: "default",
      hostname: "www.kancloud.cn",
      regexp: "",
      action: () => {
        var interval_id = setInterval(() =>  {
          var a = $$(".sidebar", 'return_one');
          if (a) {
            $$(".workspace", 'return_one').style.left = "180px";
            a.style.width = '180px';
            change_style(a);
            clearInterval(interval_id);
          }
        },
        100);
      }
    },
    {
      rule: "default",
      hostname: "php.net",
      regexp: "",
      action: () => {
        $$('.layout-menu', 'remove_one');
        if ($$(".sect1", 'return_one')) $$(".sect1", 'return_one').style.width = document.body.clientWidth - 50 + "px";
        if ($$("#usernotes", 'return_one')) $$("#usernotes", 'return_one').style.width = document.body.clientWidth - 50 + "px";
      }
    },
    {
      rule: "default",
      hostname: "www.zhihu.com",
      regexp: "",
      action: () => {
        $$('.Question-sideColumn.Question-sideColumn--sticky', 'remove_one');
        $$('.AdblockBanner-inner', 'remove_one');
        $$('.QuestionHeader-side', 'remove_all');
        $$('.AppHeader-userInfo', 'remove_all');

        var browser_width = document.body.clientWidth - 50 + "px";
        $$('.QuestionHeader-content', 'return_one').style.width = browser_width;

        setInterval(() =>  {
          $$('.HitQrcode', 'remove_one');
        },
        100);
      }
    },
    {
      rule: "default",
      hostname: "www.letscorp.net",
      regexp: "",
      action: () => {
        $$('#commentlist', 'remove_one');
        $$('#sidebar', 'remove_one');
        $$('#header', 'remove_one');

        var browser_width = document.body.clientWidth - 50 + "px";
        $$('#container', 'return_one').style.width = browser_width;
        $$('#main', 'return_one').style.height = "auto";
        var p_ele = $$('p', 'return_all');
        Array.prototype.forEach.call(p_ele,
        function(e) {
          e.style["font-size"] = "16px";
        });
      }
    },
    {
      rule: "default",
      hostname: "segmentfault.com",
      regexp: "",
      action: () => {
        $$("#loginBanner", "remove_one");
      }
    },
    {
      rule: "default",
      hostname: "huziketang.mangojuice.top",
      regexp: "",
      action: () => {
        for (var i = 0; i < 10000; i++) {
          clearInterval(i);
        }-
        $$("div", "return_all").forEach(function(ele) {
          if (ele.id && ele.id !== "wrapper" && ele.id !== "uyan_frame" && ele.id !== "donate-mask") {
            ele.parentNode.removeChild(ele);
          }
        });
      }
    },
    {
      rule: "default",
      hostname: "lvv2.com",
      regexp: "",
      action: () => {
        if ($$(".link.show", "return_all")) {
          $$(".link.show", "return_all").forEach(function(ele) {
            if (ele.querySelector('a.title')) {
              // console.log(ele.querySelector('a.title').innerHTML)
              ele.querySelector('a.title').style.fontSize = '16px'
              var title = ele.querySelector('a.title').innerHTML
              var porn_list = ['日', '勾引', '野外', '肏', '抽插', '公厕', '舔', '茎', '肛', '奴', '约炮', '母狗', '调教', '草', '鸡巴', '小受', '口爆', '野战', 'SM', 'sm', '贱货', '被虐', '淫', '内裤', '屁眼', '蕾丝', '姿势', '体位', '色情', '骚', '屌', '淫荡', '射', '艹', '丝袜', '情色', '调情', '做爱', '操', '捆绑', '挑逗', '绿帽', '潮喷', '援交', 'jj', 'JJ', '潮吹', '3p', '3P', '腰', '臀', '肉棒', '啪啪', '圣水']
              var politic_list = ['中共', '土共', '民主', '法治', '天安门', '老兵', '自由', '殴打', '近平', '奴隶', '道德', '强拆', '法律', '监狱', '城管', '土匪', '毛腊肉', '老毛', '专制', '社会主义', '党中央', '统治', '酷刑', '党员', '人民', '民族', 'P2P', '普京', '英雄', '纳税', '维权', '执法', '警察', '独裁', '政府', '郭文贵', '文革', '武装', '共产', '垬', '毛泽东', '政权', '枪', '举报', '恐怖', '宗教', '卖国', '死', '软禁']
              var key_word_list = porn_list.concat(politic_list) 
              var porn_detection = key_word_list.some(function(ele) {
                return title.indexOf(ele) > -1
              }) 
              porn_detection && ele.parentNode.removeChild(ele)
              // ele.parentNode.removeChild(ele);
            }
          });
        }
      }
    },
    {
      rule: "default",
      hostname: "",
      regexp: "",
      action: () => {

      }
    },

  ]

  return rules
}

//window.frames
//Array.prototype.slice.call(ele)

//寻找页面的主要内容
function main_ele_searcher() {
    var ele = document.querySelectorAll("*");
    var arr = [];
    //var  arr_index = [];
    var w, h;

    var body_width = document.body.clientWidth;
    var body_height = document.body.clientHeight;

    if (!body_height) {
        var max_width = 0, max_height = 0;
        document.documentElement.style.height = '100%';
        document.body.style.height = '100%';

        for (let i = 0, ele_length = ele.length; i < ele_length; i++) {
            w = ele[i].clientWidth;
            h = ele[i].clientHeight;
            if (w > max_width) { max_width = w; }
            if (h > max_height) { max_height = h; }
            w = null;
            h = null;
        }
        body_width = max_width;
        body_height = max_height;
    }


    for (let i = 0, ele_length = ele.length; i < ele_length; i++) {
        w = ele[i].clientWidth;
        h = ele[i].clientHeight;
        //console.log(h);

        if (w && h && w > body_width / 2 && h > body_height / 5 && w < body_width && h < body_height) {
            arr[w * h] = ele[i];
            //console.log(ele[i]);
            //arr_index.push(w * h);
        }
        w = null;
        h = null;
    }
    var main_ele = arr[arr.length - 1] || document.body;
    return {
        main_ele,
        body_width,
        body_height
    };
}

//去除侧边栏这样“狭长”的内容
function ele_remover(obj) {
    var w, h;
    var { main_ele, body_width, body_height } = obj;
    var ele = document.querySelectorAll("*");
    //console.log(main_ele,body_width, body_height )
    for (let i = 0, ele_length = ele.length; i < ele_length; i++) {
        w = ele[i].clientWidth;
        h = ele[i].clientHeight;
        //  main_ele.parentNode.children
        if (!ele[i].contains(main_ele) && !main_ele.contains(ele[i]) && (ele[i] !== main_ele) && w * 1.4 < h && w < body_width / 2 && w > body_width / 10) {
            //content_adjust(ele[i]);
            console.log("---------element   removed ------------");
            console.log(ele[i]);
            console.log("---------element   removed ------------");

            ele[i].parentNode.removeChild(ele[i]);
        }
        w = null;
        h = null;
    }
}

//去除被移除元素的兄弟元素的padding  margin
function content_adjust(ele) {
    var siblings = ele.parentNode.children;
    ele.parentNode.style.position = "relative";
    // console.log(ele);
    for (let i = 0, ele_length = siblings.length; i < ele_length; i++) {
        //console.log(siblings[i]);
        siblings[i].setAttribute('style', 'position:relative;padding:20px;margin:0px;overflow:visible;');
    }
}


//调整主要内容的样式
function main_content_adjust(main_ele) {
    //var a = [{x,y,top,right,bottom,left,width}]=main_ele.getClientRects();
    main_ele.parentNode.style.position = "relative";
    main_ele.style.cssText = "position:absolute; top:0;right:0; bottom:0;left:0;"
    // main_ele.setAttribute('style','position:relative;padding:20px 20px 20px 40px;margin:auto;clear:both;overflow:visible;');
    var ratio = 0.9 * (window.innerWidth) / main_ele.clientWidth;
    var ele = main_ele.querySelectorAll('*');
    // console.log(ele);
    for (let i = 0, ele_length = ele.length; i < ele_length; i++) {
        ele[i].style.width = ele[i].clientWidth * ratio + "px";
        ele[i].style.overflow = 'visible';
        //console.log(i);
    }

}



// body 全屏
function full_body() {
  let root = document.body
  root.style.cssText = "position:absolute; top:0;right:0; bottom:0;left:0;"
  
}
//背景调色
function change_style(DOM_node = document.body) {
    //  执行速度 :  for 循环 > forEach > 尾递归 >递归 (迭代)
    let background_base_color = 50;
    let background_offset = 20;
    let font_base_color = 230;
    let font_offset = 20;
    var all = (DOM_node  || document).querySelectorAll('*');
    for (let i = 0, ele_length = all.length; i < ele_length; i++) {
        let item = all[i]
        let item_style = item.style
        let tag_exclude_check = !('script,style,img').includes(item.nodeName.toLowerCase())
        if(tag_exclude_check && !item_style.backgroundColor){
            item_style.backgroundColor =  random_color(background_base_color,background_offset);
            item_style.color =  random_color(font_base_color,font_offset);
        }
    }
    /*
    let background_base_color = 40;
    let background_offset = 20;
    let font_base_color = 200;
    let font_offset = 50;
    let html_str  = DOM_node.innerHTML ;
    //  匹配速度 string.indexOf > string.match
    // let html_str  = DOM_node.innerHTML.replace(/\&/g,'') ;
    // var all = (new DOMParser()).parseFromString(html_str, "text/xml");
    let html_str_arr = html_str.split(">");
    let new_html_str_arr = html_str_arr.map((item, index) => {
        if(item.indexOf('</') > 0) {return item }
        if(!item.match(/\<div|\<form|\<table|\<dl|\<ol|\<ul|\<pre|\<h|\<a|\<p|\<code|\<em|\<span|\<td|\<th|\<input|\<textarea/i)) {return item }
        let font_color_str = ";color:"+random_color(font_base_color,font_offset);
        if(item.indexOf('background-color') > 0) {
            let reg = /background-color\s*\:\s*[\w\,\(\)\#]+/;
            let str = 'background-color:' + random_color(background_base_color,background_offset) + font_color_str;
            return item.replace(reg, str)
        }
        if(item.indexOf('background') > 0) {
            let reg = /\#[^\s]+|rgb[^\)]+\)/;
            let str = random_color(background_base_color,background_offset);
            return item.replace(reg, str).replace(/(style=(["'])[^'"]+)\2/,"$1" + font_color_str + "$2")
        }
        return  `${item} style="background-color:${random_color(background_base_color,background_offset)}${font_color_str}"`;
    })

    DOM_node.innerHTML = new_html_str_arr.join(">")
    DOM_node.style.backgroundColor = random_color(background_base_color,background_offset);
    */
}

function random_color(base_color, offset, ratio=1){
    base_color = (base_color & 255) === (~~base_color) ? ~~base_color : 255;
    offset = ~~offset
    offset = (base_color+offset > 0 && base_color+offset < 256)? offset : 0
    return `rgba(${(base_color + offset*Math.random())&255},${(base_color + offset*Math.random())&255},${(base_color + offset*Math.random())&255},0.8)`;
}


function ele_hide(e) {
    if (e) e.style.display = "none";
}
function ele_hide_all(all) {
    Array.prototype.forEach.call(all, function (e) { e.style.display = "none"; });
}
function ele_remove(e) {
    if (e) e.parentNode.removeChild(e);
}
function ele_remove_all(all) {
    Array.prototype.forEach.call(all, function (e) { e.parentNode.removeChild(e); });
}


function $$(selector, operation_code) {
    // operation_code  : return_one return_all remove_one remove_all hide_one hide_all

    switch (operation_code) {
        case 'return_one': //return_one
            return document.querySelector(selector);
        case 'return_all':// return_all
            return document.querySelectorAll(selector);
        case 'remove_one':  //remove_one
            ele_remove(document.querySelector(selector));
            break;
        case 'remove_all': //remove_all
            ele_remove_all(document.querySelectorAll(selector));
            break;
        case 'hide_one': //hide_one
            ele_hide(document.querySelector(selector));
            break;
        case 'hide_all':// hide_all
            ele_hide_all(document.querySelectorAll(selector));
            break;

        default:
            var result = document.querySelectorAll(selector);
            return result.length > 1 ? result : result[0];
    }
}


function remove_div_padding_margin(ele) {
    if (ele) {
        ele.setAttribute('style', 'overflow:visible;position:relative;padding:0px;margin:0px;left:0px;');
    }
    if (ele && ele.children.length > 0) {
        Array.prototype.forEach.call(ele.children, (function (e) {
            remove_div_padding_margin(e);
        }));
    }
}

function content_get() {
    var ajax = new XMLHttpRequest();
    ajax.open('get', '/');
    ajax.send();
    ajax.onreadystatechange = function () {
        if (ajax.readyState == 4 && ajax.status == 200) {
            content_new = ajax.responseText;
            //console.log(content_new);
            content_old = content_old || content_new;
            if (content_new !== content_old) {
                location.reload();
            }
        }
    };

    setTimeout(content_get, 1000);
}