UserScript 改变网页颜色

深夜里盯着白底的网页，眼睛一会就受不了。。

所以给白底网页来个眼镜保护色吧， 色值为 #CCE8CF 的～～

所以就写个 chrome 插件吧，

看了下文档 http://open.chrome.360.cn/extension_dev/overview.html 太长了。。

不过还有 UserScript 这样一种方法来替代chrome 插件。//UserScript 相关介绍在这 http://blog.csdn.net/dlmu2001/article/details/6202953

我们来写个js文件，文件名格式 入 pageColor.user.js 直接拖进 chrome 就好了～ //命名必须是xx.user.js阿

// ==UserScript==  
// @name         pageColor 
// @author       wtnull@163.com  
// @namespace    *   
// ==UserScript==  
(function(){
    var colorVal = {
        eyeGood:"#CCE8CF",
        grey :"#BBBBBB"
    }

    var colorChoice = '<p id="grey" style="cursor:pointer;border-radius:2px;z-index:10;border-bottom:1px solid blue;background:'+colorVal.grey+'">&nbsp</p>'+
               '<p id="eyeGood" style="cursor:pointer;border-radius:2px;z-index:10;background:'+colorVal.eyeGood+'">&nbsp;</p>';
    
    var body = document.body;
    var div = document.createElement('div');
    div.id='colorChoice';
    div.setAttribute('style', 'width:40px;position:fixed;z-index:999;top:-1000px;right: 5px; top: 60px;');
    div.innerHTML = colorChoice;

    body.appendChild(div);

    div.addEventListener('click', function(e){
        var event = e.target;
        var choice = event.id;

        var arr = document.getElementsByTagName('body')[0].getElementsByTagName('div');
        switch(choice){
            case 'eyeGood': colorChange(arr, colorVal.eyeGood);break;
            case 'grey': colorChange(arr, colorVal.grey);break;
            default: break;
        }
    });

    var colorChange = function(arr, colorValue){
        for(var i=0; i<arr.length; i++){
            arr[i].style.background=colorValue;
        }
    }
})();

简单的代码简单的保护眼睛～～

当然，在mac系统下，推荐下载 https://justgetflux.com/ 它可以帮助改变系统的显示颜色～～