【小技】Firefox Quantumで不要な右クリックメニューを非表示にする

※2019/9/26 全面的に加筆修正。

私が旧仕様のFirefoxで愛用していたアドオンの1つに「Menu Wizard」があります。

コンテキストメニュー(右クリックメニュー)から不要な項目を非表示にすることができるアドオンで、作業効率化にとても役立っていたのですが、Firefox Quantum (Firefox ver.57)からは非対応となってしまいました。
仕様変更の影響で開発の継続は難しく、代替となるアドオンも見当たりません。

Menu Wizardは、私がChromeではなくFirefoxを選ぶ理由の1つともなっていたため、本当に残念ですが、収集した情報を元に試行錯誤した結果、同等の結果を実現することができたので、その方法をご紹介します。

ちなみに、下記画像内の2つのコンテキストメニューは、この記事で取り上げた方法の適用前と適用後で、リンク化された画像をクリックした際に開くメニューの比較になっています。


[特集]
GetMoney!

[PR]

概要

Firefox Quantumでコンテキストメニューを非表示にするには、「userChrome.css」を使用します。
平たく言えば、設定ファイルを付け加えて、そこに直に書き込むという方法になります。

CSSは、ウェブサイトにおいて、文字の大きさや背景色、任意の項目を表示する位置など、デザインのあらゆる部分に関わる設定ファイルです。
Firefox本体に適用されるCSSファイルを独自に作成することで、デザインをカスタマイズできるようにする、というわけですね。

ウェブサイト上に、何らかの理由で見せたくないけど消すわけにはいかない部分がある場合、CSSには次のように記述します。
userChrome.cssも、ルールはほとんど同じです。

要素A, 要素B {display:none;}

それでは、非表示したいコンテキストメニューの要素名をどのように調べればよいのか、そこが肝心な部分です。
この記事では、その方法を2つご紹介します。

1つは、Menu Wizardの設定ファイルからデータを転用する方法で、多数の要素名を一括して取得できるため、非表示にしたい項目がたくさんある方は、まずはこちらの方法をオススメします。
ただし、Menu Wizardの設定ファイルからは、他のアドオンにより追加される項目や、Firefox ver.57以降で追加された項目など、要素名を取得できないものがあります。

そこで2つ目の「ブラウザーツールボックス」を使用する方法です。
ブラウザーツールボックスは、Firefoxの開発者向けオプション機能で、これを使うことによって、Menu Wizardで取得できない要素名を調べることができます。
要素名を個別に取得する必要があるため、こちらは、ピンポイントで非表示にしたい項目がある方や、Menu Wizardでは要素名の取得できない項目がある方にオススメです。

Menu Wizardからデータを転用する方法

1. Menu Wizardのインストール

レガシーアドオンであるMenu Wizardは、Firefox Quantumでは動作しないため、まずは、Menu Wizardが動作するブラウザを用意しなければなりません。

個人的には、「Waterfox」を推奨します。
Menu Wizardは「Pale Moon」や「Basilisk」でも動作しますが、ベースになっているFirefoxのバージョンがWaterfoxより古いので、その分、要素名を取得できないケースが増えると考えられます。

また、Mozillaがすでにレガシーアドオンの配布を終了しているので、WaterfoxへMenu Wizardをインストールするために、「Classic Add-ons Archive」というアドオンの導入も必要です。

WaterfoxとClassic Add-ons Archiveについては、下記の記事にまとめてありますので、ご参考にどうぞ。


2. 設定ファイルの作成

WaterfoxへMenu Wizardをインストールするところまで完了したら、続いて、要素名を取得する手順へ進みます。

Menu Wizardの設定で、非表示にしたい項目のチェックを外して下さい。

チェックを外し終えたら、画面右上にある歯車のアイコンをクリックします。
下記のように設定項目が表示されるので、「設定を保存」をクリックして、設定ファイルをわかりやすい場所へ保存して下さい。

ここまで完了したら、Waterfoxは終了してOKです。

Menu Wizard

3. userChrome.cssの作成

保存した設定ファイルを、メモ帳などのテキストエディタで開いて下さい。
「menu_prefs:menu_item_list_disable={」の後に続く「"○○○":true,"×××":true」といった○○○や×××が要素名になります。
その他の部分は不要なので、それらを取り除き、要素名だけを抽出します。

    ●要素名を抽出する手順

  1. テキストエディタで「menu_prefs:menu_item_list_disable」を検索し、それより前の部分(menu_prefs:menu_item_list_disableを含む)を全て削除する。

  2. 同じく「menu_prefs:menu_item_list_label」を検索し、それより後ろの部分(menu_prefs:menu_item_list_labelを含む)を全て削除する。

    ここまで終わって、残った文字列が下記のようになっていればOKです。

    ={"○○○":true,"×××":true" ~中略~ △△△":true}

  3. テキストエディタで「":true,"」を「{display:none !important;}#」に全て置換する。

    残った文字列が下記のようになっていればOKです。

    ={"○○○{display:none !important;}#×××{display:none !important;}# ~中略~ △△△":true}

    なお、本来、要素ごとに{display:none !important;}と指定しなくても、#○○○,#×××と要素をカンマで区切ってまとめて指定すればよいのですが、1行が長くなり過ぎると指定が無視される(?)らしく、野暮ったいやり方ではあるものの、1つずつ個別指定しています。

  4. 先頭の「={"」を削除して、代わりに半角の「#」を入力する。

  5. 末尾の「":true}」を削除して、代わりに「{display:none !important;}」と入力する。

    残った文字列が下記のようになっていればOKです。

    #○○○{display:none !important;}#×××{display:none !important;} ~中略~ #△△△{display:none !important;}

ファイルを「userChrome.css」という名前で保存します。
「txt」ではなく「css」で保存する点に注意して下さい。

4. userChrome.cssをプロファイルフォルダへ移動

userChrome.cssを機能させるには、Firefoxのプロファイルフォルダへ移動させなければなりません。
また、ver.69以降、userChrome.cssはデフォルトで無効になっているため、初めてuserChrome.cssを使用される方は、about:configでuserChrome.cssの有効化も必要となります。

about:configは、オプションでは変更できない高度な設定を、直に書き換えることができる、言わば隠し設定的な機能です。
詳細は公式サイトのヘルプページを参照して下さい。

    ●プロファイルフォルダへ移動させる手順

  1. プロファイルフォルダ内に「chrome」という名前のフォルダを作成する。
    下記にある「●●●.default-release」という名前のフォルダが、プロファイルフォルダです。

    C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles

    Firefoxのヘルプ > トラブルシューティング情報 > プロファイルフォルダーの「フォルダーを開く」というボタンからも移動できます。

    通常はプロファイルフォルダは1つだけしかないはずですが、異なるビルドのFirefoxを併用されている方など、複数のプロファイルが存在する場合は、その数だけプロファイルフォルダがありますので、ご注意を。

  2. userChrome.cssをchromeフォルダへ移動させる。

    ●userChrome.cssを有効化する手順

  1. ロケーションバー(アドレスバー)に「about:config」と入力してエンターキーを押す。

  2. 「危険性を承知の上で使用する」をクリックします(以降の操作は間違いのないよう十分にご注意下さい)。

  3. 検索欄に「toolkit.legacyUserProfileCustomizations.stylesheets」と貼り付けると、自動的に一覧から絞り込まれます。

  4. ダブルクリック or 右クリックして「値を変更」を選び、値を「true」へ切り替える。

  5. タブを閉じて完了です。

Firefoxを再起動させれば、指定したメニューが非表示になっているはずです。

ブラウザーツールボックスを使用する方法

1. ブラウザーツールボックスの有効化と起動

F12キー、もしくは、Ctrl-Shift+Iを押して、Firefoxの「開発ツール」を開きます。
右上にある3つの点のアイコンをクリックして、メニューから「設定」を選び、「詳細設定」の項目にある「ブラウザーとアドオンのデバッガーを有効化」と「リモートデバッガーを有効化」にチェックを入れて下さい。

開発ツール 設定

非表示にした項目が開けるページを表示させます。
例えば、画像関連の項目を非表示にしたい場合は画像があるページを、リンク関連の場合はリンクがあるページを、といった具合です。

Crtl+Shift+Alt+Iを押すと、下記のようなダイアログが表示されます。
OKをクリックすると、ブラウザーツールボックスが起動します。

リモートデバッグ接続要求

2. 要素名の取得

要素名を取得するには、Firefox本体で要素を指定 → ブラウザーツールボックスで要素名を確認と、Firefox本体とブラウザーツールボックス交互に操作する必要があります。
でも、コンテキストメニューを開いても、他の部分をクリックすると閉じてしまいますよね。

それを防ぐために、ブラウザーツールボックスの右上にある3つの点のアイコンをクリックして、メニューから「ポップアップを自動で隠さない」を選択しておきます。

ポップアップを自動で隠さない

Firefox本体に戻って、非表示にしたい項目が含まれるように、コンテキストメニューを表示させます。
続いて、ブラウザーツールボックスの左上にある四角と矢印のアイコンをクリックして下さい。

ページから要素を選択します

再びFirefox本体へ戻って、コンテキストメニューにマウスポインタを合わせると、項目ごとに赤い点線で縁取りされるようになります。
非表示にしたい項目が縁取りされている状態で、その項目をクリックして下さい。

コンテキストメニュー

クリックされた項目のコードが、ブラウザーツールボックスで反転表示されます。
id=」の後ろにある「"」で挟まれた部分を、ダブルクリックしてコピー、メモ帳などのテキストエディタへ貼り付けて下さい。
これが要素名になります。

インスペクタ

非表示にしたい項目の要素名を全て取得し終えたら、ブラウザーツールボックスを閉じます。

3. userChrome.cssの作成

要素名を控えておいたテキストファイルを開いて、下記のように、1つ1つの要素名の前に半角の「#」と、同じく後ろに「{display:none !important;}」という形に整えます。

#○○○{display:none !important;}
#×××{display:none !important;}

本来、要素ごとに{display:none !important;}と指定しなくても、#○○○,#×××と要素をカンマで区切ってまとめて指定すればよいのですが、1行が長くなり過ぎると指定が無視される(?)らしく、野暮ったいやり方ではあるものの、1つずつ個別指定しています。

整え終えたら、ファイルを「userChrome.css」という名前で保存します。
「txt」ではなく「css」で保存する点に注意して下さい。

4. userChrome.cssをプロファイルフォルダへ移動

Menu Wizardからデータを転用する方法の手順4.と同じです。

非表示にできない項目の対処法

要素名に「:」が含まれる場合

「:」が含まれる要素(id)には、そのままでは、スタイルを指定しても適用されません。

「:」を含む要素名の一例

開く(ブックマーク)...placesContext_open:newwindow
新しいプライベートウィンドウで開く...placesContext_open:newprivatewindow

このような場合は、「placesContext_open\:newwindow」という具合に、「:」の直前に半角の「\」か、同じく半角のバックスラッシュを挿入することで、スタイルが適用されるようになります。

なお、「:」が含まれる場合というのは、「:hover」や「:before」といった擬似クラスや疑似要素のことではありません。
飽くまで、要素名自体の話です。

区切りのidが空欄の場合

idが空欄のため指定ができない区切りは、要素名を「menuseparator:not([id])」と指定してみて下さい。
ただし、idが空欄の区切り線に一括して適用されてしまうため、非表示にする必要のない区切りにまで適用される可能性がありますので、ご注意を。



不要なコンテキストメニュー(右クリックメニュー)を非表示にする方法の紹介は、以上となります。

なお、掲載されている情報は執筆当時におけるものであり、最新の状況とは異なる可能性がありますので、ご注意下さい。

[特集]
ECナビ

[オススメ]
ポイントサイトのポイントインカム

関連キーワード

■雑記の最新記事

コメント

  1. 九州男児

    そのMenu Wizardの設定ファイルから作ったuserChrome.cssを配布できませんか?

    2018/02/24 14:27

    匿名

  2. 匿名さん

    コメントありがとうございます。
    Menu Wizardの設定ファイルを元に、私が個人的に作成したuserChrome.cssについては、公開する考えはありません。
    理由は、UI上のメニュー項目と、設定ファイル内の項目、その紐付けがされていないからです。
    ある人にとっては必要なメニュー項目も、私個人が不必要と判断した場合はuserChrome.cssに含めていますし、その逆のパターンも同様ですが、どれがどれなのか特定されていません。
    これでは公開しても意味がないでしょう。
    わざわざ回りくどい手順を紹介しているのは、それなりの理由があってのことです。

    2018/02/24 18:26

    ハタラキバチ

コメントを書く

*「コメント」以外は空欄のままでもご投稿いただけます
ECナビでウェル活をもっとお得に
ポイントインカム
[PR]