Home » Javascript » Minify Google Search Script within JavaScript CallBack

Minify Google Search Script within JavaScript CallBack

Posted by: admin November 1, 2017 Leave a comment

Questions:

I’m working on minifying a couple of the Google CSS files that are dynamically added to the <head> section within my web application. I have this Javascript file that is calling the Google Search Library:

//google site search
(function () {
    var cx = 'KEY_VALUE';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
})();

Upon further inspection, I noticed that gse.jscontains the following:

(function(opts_){window.__gcse=window.__gcse||{};window.__gcse.ct=(new Date).getTime();window.__gcse.scb=function(){var a=window.__gcse;a.plainStyle&&delete opts_.rawCss;google.search.cse.element.init(opts_)&&("explicit"!=a.parsetags?"complete"==document.readyState||"interactive"==document.readyState?(google.search.cse.element.go(),a.callback&&a.callback()):google.setOnLoadCallback(function(){google.search.cse.element.go();a.callback&&a.callback()},!0):a.callback&&a.callback())};
var b=document.createElement("script"),c=opts_.protocol+"://"+opts_.uds+"/"+(opts_.loaderPath||"jsapi")+"?autoload=",d=encodeURIComponent,e='{"name":"search","version":"1.0","callback":"__gcse.scb"',f=window.__gcse;if(!f||!f.plainStyle)var g=opts_.protocol+(opts_.uiOptions&&opts_.uiOptions.enableMobileLayout?"://www.google.com/cse/static/style/look/mobile/":"://www.google.com/cse/static/style/look/")+opts_.theme.toLowerCase().replace("v2_","v2/")+".css",e=e+(',"style":"'+g+'"');
opts_.language&&(e+=',"language":"'+opts_.language+'"');var h=c+d('{"modules":['+(e+"}")+"]}");opts_.callback&&(h=h+"&callback="+opts_.callback);b.src=h+"";b.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(b);
})({"theme":"V2_DEFAULT","protocol":"https","uds":"www.google.com","loaderPath":"jsapi"});

After this script is executed, my Web Application pulls in these 2 CSS files:

<link type="text/css" href="https://www.google.com/uds/api/search/1.0/KEY_VALUE/default+en.css" rel="stylesheet">

<link type="text/css" href="https://www.google.com/cse/static/style/look/v2/default.css" rel="stylesheet">

So what I really want to do is either pull in the minified versions of these CSS files and/or do some type of JavaScript customization to replace these CSS files with minified versions of them.

Any help is greatly appreciated!

Answers: