読者です 読者をやめる 読者になる 読者になる

まめ畑

ゆるゆると書いていきます

Googleの検索ボックスを小さくするJetpack Feature

Jetpack javascript

少し前からGoogleの検索ボックスが大きくなりました。
個人的には前の小さいサイズがよかったのですが、こんなエントリがありました。
obsolete blog
Googleの検索ボックスがやたら主張するようになったのでユーザースタイルシート(Stylish)で小さくする - F.Ko-Jiの「一秒後は未来」
それぞれ別々の方法で大きさを戻してます。


Jetpack Featureでもやってみました。
しかし、サジェストの部分の文字サイズが変わらないのが詰まっているところ。
pageModsを使用して設定するのですが、これはページのロードが完了した時点で呼ばれるので、その時点で存在する要素にはスタイルを設定出来るのですが、サジェストの部分はロード時には存在しません。なので、検索Boxに対するキーイベントをトリガーにするようにしてみましたがスタイルが適用されない事があるのと、IMEがONになっているとEnterを押下するまでスタイルが反映されないのが悩んでいるところ。
Old Google Search Box

/*
   @author: con_mame
   @url: http://d.hatena.ne.jp/con_mame/
   @title: Old Google Search Box
   @description: Back To Old Google Search Box Size
   @version: 0.1
*/

(function(){
   jetpack.future.import("jetpack.pageMods");

   var addStyle = function(doc){
      var elements = [$(".lst", doc), $(".lsb", doc)];
      jQuery.each(elements, function(){
         this.css({fontSize:"12px", height:"inherit"});
      });
   }

   var options ={};
   options.matches = ["http://www.google.com/*", "http://www.google.co.jp/*"];

   jetpack.pageMods.add(addStyle, options);
})();


キーイベントをトリガーにするコード

(function(){
   jetpack.future.import("jetpack.pageMods");

   var addStyle = function(doc){
      var elements = [$(".lst", doc), $(".lsb", doc)];
      jQuery.each(elements, function(){
         this.css({fontSize:"12px", height:"inherit"});
      });

      $("input[name='q']", doc).keyup(function(){
         $(".gac_c", doc).css({fontSize:"12px", height:"inherit"});
      });
   }

   var options ={};
   options.matches = ["http://www.google.com/*", "http://www.google.co.jp/*"];

   jetpack.pageMods.add(addStyle, options);
})();