javascript浏览器书签-制作护眼插件

欢迎使用Markdown编辑器写博客

最近发现浏览器书签原来还行执行JS脚本，觉得挺有意思，于是我就自己实现了一个简单的书签护眼工具。
废话不多说，直接贴代码：

javascript: (function() {
    var MiniSite = new Object();
    MiniSite.Browser = {
        ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
        moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
        opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
        safari: /safari/.test(window.navigator.userAgent.toLowerCase())
    };
    //动态引用外部js文件
    MiniSite.JsLoader = {
        load: function(sUrl, fCallback) {
            var _script = document.createElement('script');
            _script.setAttribute('charset', 'gbk');
            _script.setAttribute('type', 'text/javascript');
            _script.setAttribute('src', sUrl);
            document.getElementsByTagName('head')[0].appendChild(_script);
            if (MiniSite.Browser.ie) {
                _script.onreadystatechange = function() {
                    if (this.readyState == 'loaded' || this.readyStaate == 'complete') {
                        if (fCallback != undefined) {
                            fCallback()
                        }
                    }
                }
            } else if (MiniSite.Browser.moz) {
                _script.onload = function() {
                    if (fCallback != undefined) {
                        fCallback()
                    }
                }
            } else {
                if (fCallback != undefined) {
                    fCallback()
                }
            }
        }
    };
    //判断有没有jquery引用
    if ((typeof jQuery) != 'function') {
        MiniSite.JsLoader.load('https://lib.baomitu.com/jquery/3.3.1/jquery.min.js',
        function() {
            a()
        })
    } else {
        a()
    }
    //护眼主逻辑
    function a() {
        function b(ele) {
            ele.find("*").each(function() {
                var ifimg = $(this).css("background-image") != 'none';
                var cssText = $(this).attr("style") + (ifimg ? ";opacity:0.5 !important;": ";background-color:rgb(17,17,27) !important;") + ";color:rgb(45,188,63) !important;";
                $(this).css("cssText", cssText)
            });
            ele.find("img").each(function() {
                var cssText = $(this).attr("style") + ";opacity:0.5 !important;";
                $(this).css("cssText", cssText)
            });
            ele.find("iframe").css("opacity", 0.5)
        }
        b($(document));
        $("iframe").each(function() {
            b($($(this)[0].contentWindow.document))
        })
    }
})();

我比较懒没用原生js，原理是直接用JQuery把所有元素设置了背景颜色和前景颜色。
然后觉得图片又很刺眼，所以直接把img标签的透明度调成了50%。
然后又发现有的页面iframe很多，但是有同源机制修改不了内部元素，所以直接把iframe的透明度也调成了50%。

效果如下：

可根据喜好修改成自己的颜色值，把以上代码直接粘贴到书签的网址栏即可。

当然最好先精简一下代码再粘贴。

---