トップ > userChromeJS

リファラの書き換え決定版〜userChromeJSでRefControl

userChromeJS Firefox

特定のリファラを制限するサイトに対してはRefControlアドオンが必須になってくるわけですが、userChromeJSでも同様の機能は使えます。

リファラーを柔軟に書き換る（偽装する）ためのuserChrome.js用スクリプトを作ってみた。 - iMona@zuzu開発者日記〜主に日々の行動記録〜
便利に使わせて頂いています。うまく機能しているようです。

感想

サイトデータをwedataとかで管理できたら便利そう。

Firefoxでページ内検索後自動的に閉じる2 userChromeJS編

Firefox userChromeJS

ページ内検索バーは検索が終わっても出っぱなしになる。
ので検索バーからフォーカスを移すと自動的に閉じる
userChromeJS用スクリプトを書いた。


以下をsmartlyCloseFindbar.uc.jsとでも名付けて保存して下さい。

// ==UserScript==
// @name           smartlyCloseFindbar.uc.js
// @namespace      http://d.hatena.ne.jp/blooo/
// @include        main
// ==/UserScript==
(function(){

function closeFindbar(e){
	if(!gFindBar.hidden)
	{
		if(e.target.id != "FindToolbar"){
			gFindBar.close();
		}
	}
}

addEventListener('mousedown', closeFindbar, false);
addEventListener('keydown', closeFindbar, false);

})();

タブを切り替えたり検索バーやロケーションバーにフォーカスを移すと
ページ内検索バーが閉じるはず。
全然smartlyじゃないけど。
できればいずれタイムアウト設定(?)とか付け加えたいと思う。


本当は前書いたようにクイック検索を使えばいいんだろうけど
Firefoxでページ内検索後自動的に閉じる - blooo
どうしてもctrl+fで開いてしまう癖が抜けない。


最初はctrl+fをクイック検索に置き換えれないかと思ったんだけど
わからなかったので代替策。

Tab Mix Plusを使わない

Firefox アドオン userChromeJS

Tab Mix PlusやTab Mix Lite CEを使わずに、同等の機能を使う方法。
userChromeJS, user.jsを使う。ツリー型タブ、FireGesturesも使っていれば◎。


実現可能だったのは、

  • 最近閉じたタブの履歴を保存する数を増やす（１０から３０に）
  • 検索バーからの検索を新しいタブで開く
  • タブの×ボタンを非表示に
  • 最後のタブを閉じてもウィンドウを閉じなくする
  • 最近閉じたタブの履歴をタブバーとページ上の右クリックコンテキストメニューに表示。
  • 未読タブの色を変える
  • タブのロックおよび保護機能
追記
  • 多段タブ機能

かなり満足行くレベルまでいけると思う。ただし、

  • タブを開くとき、右に開く
  • タブを閉じたとき、左に移る
  • ロケーションバーからの検索を新しいタブで開く

についてはツリー型タブを使い、

  • 左のタブをすべて閉じる
  • 右のタブをすべて閉じる

の機能はFireGesturesでまかなっている。
よって両アドオンを使っていない人はうまく行かないことがあるかもしれない。




まず、

user.jsを使って

  • 最近閉じたタブの履歴を保存する数を増やす（１０から３０に）
  • 検索バーからの検索を新しいタブで開く
  • タブの×ボタンを非表示に
  • 最後のタブを閉じてもウィンドウを閉じなくする

ことができる。


以下をコピーしてuser.jsに貼り付ける。かっこ[]内はデフォルト設定。
ちなみにuser.jsについてわからない方はこちら：google:firefox+user.js

//閉じたタブの履歴を保存する数 [10]
user_pref("browser.sessionstore.max_tabs_undo", 30);
//検索バーでEnterを押したとき、新しいタブで開くかどうか [false]
user_pref("browser.search.openintab", true);

//タブについている×（閉じる）ボタン [1]
//0:アクティブなタブにのみ表示
//1:すべてのタブに表示
//2:一切表示しない
//3:「タブの一覧を表示」の右に表示
user_pref("browser.tabs.closeButtons", 2);

//最後のタブを閉じると同時にウィンドウも閉じるか [true]
user_pref("browser.tabs.closeWindowWithLastTab",false);
追記

「ロケーションバーからの検索を新しいタブで開く」については、

user_pref("browser.tabs.opentabfor.urlbar", true);

もあったようだが、もう使えないっぽい(実験済。Firefox ver3.5.2で動作せず）
Firefox 3 で browser.tabs.opentabfor.urlbar - 青(ryの中から

userChromeJSを使う

  • 最近閉じたタブの履歴をタブバーとページ上コンテキストメニューに表示。
  • 未読タブの色を変える
  • タブのロックおよび保護機能
  • 多段タブ機能（ツリー型タブを使っていない人用）

これらの機能はそれぞれ、

を使わせて頂いています。
未読タブは赤文字、読み込み中タブは青文字で表示される。それで十分。色の切り替わりはTab Mix Plusなどよりワンテンポ遅れる気もするが慣れれば問題なし。
ちなみに、

  • タブを保護：「Protect This Tab 」 :そのタブを閉じられなくする機能。
  • タブをロック：「lock This Tab」:そのタブのページ遷移を抑制する機能。

と説明されている。



ツリー型タブを使うので

  • タブを開くとき、右に開く
  • タブを閉じたとき、左に移る

はツリー型タブが適当にやってくれる。
一応、タブを閉じた後すぐ左を開くuserChromeJSスクリプトもあるが、ツリー型タブを使うとうまく動かないっぽい。

  • ttp://space.geocities.jp/alice0775/STORE/Active-Left-mod.uc.js

(前述userChrome.jsの話題69 タブの保護, タブのロック - alice0775のファイル置き場 - Yahoo!ジオシティーズにて紹介されている。)

  • ロケーションバーからの検索を新しいタブで開く

これはツリー型タブの機能を使った。



さらに

FireGesturesを使えば

  • 左のタブをすべて閉じる
  • 右のタブをすべて閉じる

の機能は簡単に使えるようになる。
キーボード派の人は、ここからスクリプトを拝借して好きなキーにすればいいのでは。



以上で完了。
他にも参考になるサイトがあります。
userChrome.jsで擬似Tab Mix Plusを再現してみる - ケーズメモ

メニューバーを消してアイコンにまとめる(withoutアドオン)

Firefox userChromeJS

結果から。このようになる。


アドオン(Compact MenuやTiny Menu)がなくてもuserChromeJSを使って消せる。


そのようなuserChromeJSは２３種類見つかった。

  1. メニューバーを寄せ集める - Griever
  2. Compact Menu for userChrome.js - サバニFRP
  3. Firefoxのメニューを短くまとめるuc.jsスクリプト - AとBと改造日記

1のMedleyMenuを使わせて頂いております。


設定部分は、

(function() {
 var medleyList = [
    'file-menu',      //ファイル
    'edit-menu',      //編集
    'view-menu',      //表示
    'history-menu',   //履歴
    'bookmarksMenu',  //ブックマーク
    'tools-menu',     //ツール
    'helpMenu',       //ヘルプ
//    'endHistorySeparator',  //最近閉じたタブ の上の区切り
//    'historyUndoMenu',      //最近閉じたタブ
    'gmarksMenu',     //Gmarks
//    'menu_FileQuitItem'    //終了
    ];
//以下省略

という具合にしている。(Gmarksメニューを追加した。)



さらに、

アイコンをFirefoxのものに変更した。

紹介されているCSSで、

#medley-menu{
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABtklEQVQ4ja2TTWsTURSG779z2diipRQ/UEoXwTENCSQpBalFoaJQijKNaZo4pDNpJ2SGDuEmJOkwEOIXitJC1XTvD+guuXlcXA3iQmzrC8/mXO7zLg5HiMtmyrDjT7zTs9zugGxlQNb6SqZ8QnrnmNT2EcnCZ5a2PnLf/IDx/B3xzTdktqKzKcOOCyGEeLh3qjbkd86L8SxUQgghcrsDLsLC+iFCCCGy1jcukjuP2lqQefUFgMWufuj3+/R6PaIoIgxDut0u7XabVquFlBIpJQC31po/BeWTvzaNx+MJSimUUgDceNDQgvTOsR5oMWEY0ul0aDabNBoNgiDA933q9Tq1Wg3XdQGYXwm0ILV99E+tvxiNRgDMLftakHz5CYCrvv4opSQIAjzPw3VdHMehUqlgWRblcplSqQTAbLauBcaL95PWP5t+ZzgcTgCYSe1rwb3NtwBc2QelFL7v47outm1jWRbFYpFCoUA+n8c0TUzTBGA6WdWC+Mbr86x/ktiSowWxhF1dfBqxsH7I3ccdbq+1uLkqmV85YG7ZZzbncT1T41raZSa1x3TSIZZwiCXs6qUP8b/kB3fkhrnvnMMsAAAAAElFTkSuQmCC") !important;
}

の部分を、

#medley-menu{
   -moz-binding: url("chrome://global/content/bindings/menu.xml#menu-iconic") !important;
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAADm0lEQVQ4jWWTfVDTBRzGv+w3YC8/trGNNWBAcNBEC4wzzuTaIYqMiaN1wqzR2oGiAWocL3EYHLS0AJHAXCC+lONWXt5NeyGytOS4I6SQFy9eEoXjrZOIIl4kHE//VHfS8/fzef76PERrwo80+wfo3sh+9mDdl+mVjoncExd/T7N+2L3xlWM2v605MaRK4a9lqMGbAhu16ggKNxvk294aTP/uzsr1uUX0L7sw+MCF/r8e4pM7k6s7Dx6bjTPnObKiosIfGbCruGWXEoMnNzxj/iPu1YuwvV6Kj/IzcG1uEa1zK/jit2XUjswhoeobvFZSAEe5ccSu8dOXEXGojIj7voxpGs8WYbxIgeHsIDhD3ZH/7hl8sLSKy/Mu1IzPY2/bJOIaB1FoLcLMcCY+y9sydjpSuoGsnqS+ligcncoU4qddQvQms/jqOQGad0eg+R0LigdmUTKyhJz+BWg//QUhhqMYvmXE/e+T0RSvLKRTfu5ZgynChwOJPHRtE6ArSYTRLD90VlmQml8H/ef3scs5gc3VnVAXX8dj2go4q3dgaVKPj2MlrVQfyK28+6IIPfFCdOtF6Er1wUCxGkdz07GudggxZ35GeO4VqHafgpe2BhpjHm5f0WKhJw5nnxbN00k503AvhUVvkhhtOyU478tAH2uCwuSEPL8d0oIOyPa3QKGrAH9zGSK3WjDTo8H01fWoVIvnySbmFPRqeK6+5yVoS/DCt5GEzgNhMB16E8bMUpwrfQn7rLXgxVjBqA8hIy0Bf7Y+hTlnAFpSJCNUI6ColmBm5masF/rS5Lib4oEftJ64sYPFkIkPm+4JROvywUQcgYf/Hgw3BGDhkhK/npTh3Hqmnt4m8q73cmt3+LqjI0mK/r0KjGVJYYsNgvrxZJDqMBi5Cb7KZBSlbsEDuw+mK3n4Oom/ckIpTiUiojoPeqFR6LZ6IYiHHw0y3LYoMJyjREdmICoTQvCe1hvdBwSYLmcxWeGDW/tFsEeLB5tNEar/bCzxoPJqd7dle6An2hPE6N4jxYDFGxP7WIxlsBh4mcVooRhT1UrcMLNTx2O48Y/oHErkY3Ine63AzeXwYXB1Ex99Bhb3LEKMpvMwnidGb7oMtlDBdCyfjETkufZTHkQUtY5DVblCztBpObPY5M+4nGGc1ctPMisXNvFnD4cJbgaznGwiCvmn/79wiUgqIdqo4ZF5O5eO6Lhk3c6lgmg+GTyJQomIJSLmX+BvCazFEBpHzQgAAAAASUVORK5CYII=") !important;
}

に変更する。

結果



このようになる。


ちなみに、一番上の（タイトルバーの下の）バーは、メニューバーである。
メニューバーに検索バーやロケーションバーを載せている。


これで実はもうHide All Toolbarsなくてもやっていけるかも。メニューバーもステータスバーも消せたし。

ページ内検索バー(Findbar)を上につけた

Firefox userChromeJS

ページ内検索バー(Findbar)を画面下部から上部に移す方法。
ステータスバーも上に移動したから目線は上に固定できる。


まず、alice0775さんのuserChromeJSスクリプトを入手します。
userChrome.jsの話題16 ページ内検索(Findbar)をタブバーの下に表示する - alice0775のファイル置き場 - Yahoo!ジオシティーズ



ツリー型タブを使っている場合、このままではうまく表示されないので、
上から数行目の

var tabpanels = tabbrowser.mPanelContainer;

を

var tabpanels = tabbrowser;

に変更します。これで

このように上部に表示されます。

userChromeでMakeLink(CopyUrlLitePlus.uc.jsの改造)

Firefox userChromeJS

userChromeJSでMakeLinkをする方法はいくつかあるだろうが、
CopyUrlLitePlus.uc.jsを利用させて頂きました。


アンカータグ（Aタグ）を簡単に作ることが可能。
CopyUrlLitePlus.uc.js - Code-404


しかし、問題点があった。
リンク上で右クリックしてリンク先のアンカーを作りたかったが、
リンク先のURLは取得できるものの、タイトル（リンク文字列）が取れない。



そこでリンク文字列を取得できるようにちょっと改造した。

改造手順・・・２ステップ

およそ250行？付近の

function convertText

の下にいくつか手を加える。



1)１カ所目

      if(gContextMenu.onLink){
        text = text.replace(/%RLINK_HTMLIFIED%/g, link_html);
        text = text.replace(/%RLINK%/g, link);
      }

の2行を消し、

      if(gContextMenu.onLink){
//変更ここから      
//        text = text.replace(/%RLINK_HTMLIFIED%/g, link_html);
//        text = text.replace(/%RLINK%/g, link);
          text = text.replace(/%LINK_URL_HTMLIFIED%/g, linkUriHtml);
          text = text.replace(/%LINK_URL%/g, linkUri);
          text = text.replace(/%LINK_TITLE_HTMLIFIED%/g, linkTitleHtml);
          text = text.replace(/%LINK_TITLE%/g, linkTitle);
//ここまで
      }

に書き換える。


2)２カ所目

    if(gContextMenu.onLink){
      var link = gContextMenu.getLinkURL().toString();
      var link_html = htmlEscape(link);
    }

を

    if(gContextMenu.onLink){
//変更ここから    
//      var link = gContextMenu.getLinkURL().toString();
//      var link_html = htmlEscape(link);
        var linkUri = gContextMenu.getLinkURL().toString();
        var linkUriHtml = htmlEscape(linkUri);
        var linkTitle = gContextMenu.linkText();
        var linkTitleHtml = htmlEscape(linkTitle);
//ここまで
    }


以上で完了。


ちなみに

ユーザー設定部分は

  var mMenus = [
    {
      //画像
      label: "Image Source",
      accesskey: "I",
      text: '<img src="%IMAGE_URL_HTMLIFIED%" alt="%IMAGE_ALT_HTMLIFIED%" />',
      condition: "image"
    },
    {
      //画像のアンカータグ
      label: "Image Anchor",
      accesskey: "H",
      text: '<a href="%LINK_URL_HTMLIFIED%"><img src="%IMAGE_URL_HTMLIFIED%" alt="%IMAGE_ALT_HTMLIFIED%" /></a>',
      condition: "link-image"
    },    
    {
      //区切り
      label: "separator",
      condition: "image"
    },  
    {
      //リンク先のアンカータグ
      label: "Link Anchor",
      accesskey: "L",
      text: '<a href="%LINK_URL_HTMLIFIED%">%LINK_TITLE_HTMLIFIED%</a>',
      condition: "link"
    },
    {
      //リンク先のタイトル+URL
      label: "Link PlainText",
      accesskey: "K",
      text: '%LINK_TITLE%%EOL%%LINK_URL%',
      condition: "link"
    },
    {
      //区切り
      label: "separator",
      condition: "link"
    },    
    {
      //選択部分を使ってアンカータグ
      label: "Selection Anchor",
      accesskey: "S",
      text: '<a href="%URL_HTMLIFIED%">%SEL_HTMLIFIED%</a>',
      condition: "select"
    },
    {
      //選択部分を引用
      label: "Selection BlockQuote",
      accesskey: "Q",
      text: '<blockquote cite="%URL_HTMLIFIED%" title="%TITLE_HTMLIFIED%">%EOL%%SEL_HTMLIFIED%%EOL%</blockquote>',
      condition: "select"
    },
    {
      //区切り
      label: "separator",
      condition: "select"
    },    
    {
      //今見ているページのアンカータグ
      label: "Page Anchor",
      accesskey: "A",
      text: '<a href="%URL_HTMLIFIED%">%TITLE_HTMLIFIED%</a>'
    },
    {
      //今見ているページのタイトル+URL
      label: "Page PlainText",
      accesskey: "P",
      text: '%TITLE%%EOL%%URL%'
    },
  ];

としている。これで結構うまくいく。


結果

１．何もないところで

  • "Page Anchor"
<a href="http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">Wikipedia</a>
  • "Page PlainText"
Wikipedia
http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
２．リンク上で


  • "Link Anchor"
<a href="http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD%E3%83%9A%E3%83%87%E3%82%A3%E3%82%A2%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88">ウィキペディア日本語版</a>
  • "Link PlainText"
ウィキペディア日本語版
http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%82%AD%E3%83%9A%E3%83%87%E3%82%A3%E3%82%A2%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%89%88
３．選択文字列上で


  • "Selection Anchor"
<a href="http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">現在</a>
  • "Selection BlockQuote"
<blockquote cite="http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8" title="Wikipedia">
現在
</blockquote>
４．画像上で

  • "Image Source"
<img src="http://upload.wikimedia.org/wikipedia/ja/thumb/2/2a/Image_from_Gutza_Wikipedia_.jpg/140px-Image_from_Gutza_Wikipedia_.jpg" alt="" />
  • "Image Anchor"
<a href="http://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Image_from_Gutza_Wikipedia_.jpg"><img src="http://upload.wikimedia.org/wikipedia/ja/thumb/2/2a/Image_from_Gutza_Wikipedia_.jpg/140px-Image_from_Gutza_Wikipedia_.jpg" alt="" /></a>

のようになる。

ちなみに元のスクリプトからアイコンを非表示にし、ラベルも"Make Anchor"に変えてみた。


ちなみにアイコンはコメントアウトして非表示にし、ラベルも変えてある。