KawaiZombi / Chrome start page customizer

// ==UserScript==
// @name         Chrome start page customizer
// @namespace    chr
// @version      0.2
// @description  Customaze chrome start page
// @author       KawaiZombi
// @include      https://*/*
// @require      https://code.jquery.com/jquery-3.2.1.slim.min.js
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-end
// ==/UserScript==

(function() {
    'use strict';
    function isNewTab() {
      return $('link[href^="chrome-search://"]').length;
    }
    
    function restore() {
        $('body').css({
            'background': GM_getValue('background').charAt(0) === '#' ? GM_getValue('background') : 'url('+GM_getValue('background')+')',
            'background-repeat': 'no-repeat',
            'background-size': 'cover'
        });
	  	hideAttribution();
    }
  
  	function hideAttribution(){
	  	
		if(GM_getValue('toggle')){
			$('#most-visited').hide();
		  	$('#dood').hide();
		}else{
			$('#most-visited').show();
		  	$('#dood').show();
		}
	  if(!$('#most-visited').length || !$('#dood').length){
			setTimeout(hideAttribution, 300);
	  }
	}
    
    function styleWrap($wrap) {
        $wrap.css({
            position: 'fixed',
            top: 0
        });
    }
    
    function readImg(){
        var fileTypes = ['jpg', 'jpeg', 'png', 'bmp'];
        var reader = new FileReader();
        reader.onload = function(){
            $('body').css({
                'background': 'url('+reader.result+')',
                'background-repeat': 'no-repeat',
                'background-size': 'cover'
            });
            GM_setValue('background', reader.result);
        };
        var extension = this.files[0].name.split('.').pop().toLowerCase(),
            isSuccess = fileTypes.indexOf(extension) > -1;
        if(!isSuccess) return;
        reader.readAsDataURL(this.files[0]);
    }
    
    function createMenu() {
        var $wrap = $('<div id="cust-wraper">');
        var $label = $('<a>').text('Open customizer menu');
        var $body = $('<div id="cust-body">');
        var $color_input = $('<input type="color">');
        var $file_input = $('<input type="file">');
	  	var $mv_logo_toggle = $ ('<input type="checkbox">');
        $color_input
            .val(GM_getValue('background'))
            .change(function(){
                $('body').css('background', $(this).val());
                GM_setValue('background', $(this).val());
            });
	    $mv_logo_toggle
		  .attr('checked',GM_getValue('toggle'))
		  .change(function(){
			var val = $(this).is(':checked');
		 	GM_setValue('toggle', val);
		  	console.log(val);
		  	if(val){
				$('#most-visited').hide();
			  	$('#dood').hide();
			}else{
				$('#most-visited').show();
			  	$('#dood').show();
			}
		});
        $file_input
            .change(readImg);
        $body
            .append($color_input)
            .append($file_input)
		  	.append($mv_logo_toggle)
            .css('display', 'none');
        $wrap
            .append($label)
            .append($body)
            .mouseout(function(){
                $(this).find('#cust-body').css('display', 'none');
            })
            .mouseover(function(){
                $(this).find('#cust-body').css('display', 'block');
            });
        $('body')
            .append($wrap);
        styleWrap($wrap);
    }
    
    if(!isNewTab()) return;
    setTimeout(restore, 200);
    createMenu();
    
})();