Firefox Quantum コンテキストメニュー編集の代替え

Firefox Quantum (57以上) で使用不可になったMenu Wizardの代替えについて考える。残念ながら、WebExtensions(Firefox 57+用のAPI)では、コンテキストメニュー編集系アドオンの作成はできないため、自分なりに代替えしてみた。

実現方法

これまでは、Menu Wizardを使用してコンテキストメニュー編集していました。ですが、よく考えるとコンテキストメニュー(右クリックメニュー)の削除しかしていないため、userChrome.cssを編集して、FirefoxのUIを直接変更して実現することにした。

実現結果

変更前

ページ前

変更後

ページ後

userChrome.cssへの追加コード

先頭の/*を追加/削除することでメニューの表示/非表示を制御出来ます。お好みで変更してください。先頭の/*を追加すると表示で、削除すると非表示です。

※全角文字を含む場合(拡張機能用の[スクリーンショットを撮る]を指定する場合)、@charsetの指定が必要になります。また、userChrome.cssファイルを指定した文字コードで保存してください。

/* ファイルの文字コードを設定 */
@charset "UTF-8";

/* コンテキストメニューを削除 */
/*  #mainPopupSet,                      /* ポップアップ */
/*    #tabContextMenu,                  /* タブコンテキストメニュー */
        #context_reloadTab,             /* [タブを再読み込み] */
        #context_toggleMuteTab,         /* [タブをミュート] */
        #context_toggleMuteTab + menuseparator,         /* [区切り] */
/*      #context_pinTab,                /* [タブをピン留め] */
/*      #context_unpinTab,              /* [タブのピン留めを外す] */
/*      #context_duplicateTab,          /* [タブを複製] */
        #context_duplicateTab + menuseparator,         /* [区切り] */
        #context_selectAllTabs,         /* [すべてのタブを選択] */
        #context_bookmarkSelectedTabs,  /* [タブをブックマーク...] */
        #context_bookmarkTab,           /* [タブをブックマーク] */
        #context_reopenInContainer,     /* [コンテナーを開きなおす] */
        #context_moveTabOptions,        /* [タブを移動] */
        #context_openTabInWindow,       /* [新しいウィンドウへ移動] */
        #context_sendTabToDevice_separator,             /* [区切り] */
        #context_sendTabToDevice,       /* [タブを端末へ送信] */
/*      #context_sendTabToDevice + menuseparator,       /* [区切り] */
        #context_reloadAllTabs,         /* [すべてのタブを再読み込み] */
        #context_bookmarkAllTabs,       /* [すべてのタブをブックマーク...] */
/*      #context_closeTabsToTheEnd,     /* [右側のタブをすべて閉じる] */
/*      #context_closeOtherTabs,        /* [他のタブをすべて閉じる] */
/*      #context_closeOtherTabs + menuseparator,        /* [区切り] */
/*      #context_undoCloseTab,          /* [閉じたタブを元に戻す] */
        #context_closeTab,              /* [タブを閉じる] */
/*    #contentAreaContextMenu,          /* コンテキストメニュー */
/*      #context-navigation,            /* [ナビゲート] */
/*        #context-back,                /* [戻る] */
/*        #context-forward,             /* [進む] */
/*        #context-reload,              /* [更新] */
/*        #context-stop,                /* [停止] */
/*        #context-bookmarkpage,        /* [ブックマーク] */
/*      #context-sep-navigation,        /* [区切り] */
        #page-menu-separator,           /* [区切り] */
/*      #spell-no-suggestions,          /* [(修正候補がありません)] */
/*      #spell-add-to-dictionary,       /* [辞書に追加] */
/*      #spell-undo-add-to-dictionary,  /* [辞書への追加を元に戻す] */
/*      #spell-suggestions-separator,   /* [区切り] */
        #context-openlinkincurrent,     /* [選択した URL を開く] */
        #context-openlinkincontainertab,/* [Open Link in New Personal Tab] */
        #context-openlinkintab,         /* [リンクを新しいタブで開く] */
        #context-openlinkinusercontext-menu,    /* [リンクを新しいコンテナータブで開く] */
        #context-openlink,              /* [リンクを新しいウィンドウで開く] */
        #context-openlinkprivate,       /* [リンクを新しいプライベートウィンドウで開く] */
        #context-sep-open,              /* [区切り] */
        #context-bookmarklink,          /* [このリンクをブックマーク] */
/*      #context-savelink,              /* [名前を付けてリンク先を保存...] */
        #context-savelinktopocket,      /* [リンクを Pocket に保存] */
        #context-sendlink,              /* ※[リンクのURLをメールで送信] */
        #context-copyemail,             /* [メールアドレスをコピー] */
/*      #context-copylink,              /* [リンクの URL をコピー] */
/*      #context-sep-copylink,          /* [区切り] */
/*      #context-media-play,            /* [再生] */
/*      #context-media-pause,           /* [一時停止] */
/*      #context-media-mute,            /* [ミュート] */
/*      #context-media-unmute,          /* [ミュート解除] */
/*      #context-media-playbackrate,    /* [再生スピード] */
/*      #context-media-loop,            /* [連続再生] */
/*      #context-media-showcontrols,    /* [コントロールを表示] */
/*      #context-media-hidecontrols,    /* [コントロールを隠す] */
        #context-video-fullscreen,      /* [全画面表示] */
        #context-leave-dom-fullscreen,  /* [全画面表示モードを終了] */
        #context-media-sep-commands,    /* [区切り] */
        #context-reloadimage,           /* [画像を再読み込み] */
        #context-viewimage,             /* [画像だけを表示] */
        #context-viewvideo,             /* [動画だけを表示] */
        #context-copyimage-contents,    /* [画像をコピー] */
/*      #context-copyimage,             /* [画像の URL をコピー] */
/*      #context-copyvideourl,          /* [動画の URL をコピー] */
/*      #context-copyaudiourl,          /* [音声の URL をコピー] */
/*      #context-sep-copyimage,         /* [区切り] */
/*      #context-saveimage,             /* [名前を付けて画像を保存...] */
        #context-sendimage,             /* [画像の URL をメールで送信...] */
        #context-setDesktopBackground,  /* [デスクトップの背景に設定...] */
        #context-blockimage,            /* ※[画像をブロックする] */
/*      #context-viewimageinfo,         /* [画像の情報を表示] */
/*      #context-viewimagedesc,         /* [画像の詳細情報を表示] */
/*      #context-savevideo,             /* [名前を付けて動画を保存...] */
/*      #context-saveaudio,             /* [名前を付けてオーディオを保存...] */
/*      #context-video-saveimage,       /* [スナップショットを保存...] */
        #context-sendvideo,             /* [動画の URL をメールで送信...] */
        #context-sendaudio,             /* [音声の URL をメールで送信...] */
/*      #context-ctp-play,              /* [このプラグインを有効化] */
/*      #context-ctp-hide,              /* [このプラグインを非表示] */
/*      #context-sep-ctp,               /* [区切り] */
        #context-savepage,              /* [名前を付けてページを保存...] */
        #context-pocket,                /* [ページを Pocket に保存] */
        #context-sep-sendpagetodevice,  /* [区切り] */
        #context-sendpagetodevice,      /* [ページを端末へ送信] */
        #context-sendpage,              /* ※[ページのURLをメールで送信] */
        #context-sep-viewbgimage,       /* [区切り] */
        #context-viewbgimage,           /* [背景画像だけを表示] */
/*      #context-undo,                  /* [元に戻す] */
/*      #context-sep-undo,              /* [区切り] */
/*      #context-cut,                   /* [切り取り] */
/*      #context-copy,                  /* [コピー] */
/*      #context-paste,                 /* [貼り付け] */
/*      #context-delete,                /* [削除] */
/*      #context-sep-paste,             /* [区切り] */
/*      #context-selectall,             /* [すべて選択] */
/*      #context-sep-selectall,         /* [区切り] */
/*      #context-keywordfield,          /* [この検索にキーワードを設定...] */
/*      #context-searchselect,          /* [[-をweb検索]] */
        #context-sep-sendlinktodevice,  /* [区切り] */
        #context-sendlinktodevice,      /* [リンクを端末へ送信] */
/*      #frame-sep,                     /* [区切り] */
/*      #frame,                         /* [このフレーム] */
/*      #context-viewpartialsource-selection,   /* [選択した部分のソースを表示] */
/*      #context-viewpartialsource-mathml,      /* [MathML のソースを表示] */
/*      #context-sep-viewsource,        /* [区切り] */
/*      #context-viewsource,            /* [ページのソースを表示] */
/*      #context-viewinfo,              /* [ページの情報を表示] */
/*      #context-metadata,              /* ※[プロパティを表示する] */
/*      #spell-separator,               /* [区切り] */
/*      #spell-check-enabled,           /* [スペルチェックを行う] */
/*      #spell-add-dictionaries-main,   /* [辞書を追加...] */
/*      #spell-dictionaries,            /* [言語] */
/*      #context-spell-check-enabled,   /* ※[スペルチェックを有効にするチェックボックス] */
/*      #context-sep-bidi,              /* [区切り] */
/*      #context-bidi-text-direction-toggle,    /* [テキストの記述方向を切り替える] */
/*      #context-bidi-page-direction-toggle,    /* [ページの記述方向を切り替える] */
/*      #fill-login-separator,          /* [区切り] */
/*      #fill-login,                    /* [ログイン情報を入力] */
/*      #inspect-separator,             /* [区切り] */
/*      #context-inspect,               /* [要素を調査] */
/*      #context-media-eme-separator,   /* [区切り] */
/*      #context-media-eme-learnmore,   /* [DRM の詳細...] */
/*    #placesContext,                   /* ブックマークメニュー */
/*      #placesContext_open,            /* [開く] */
/*      #placesContext_open\:newtab,    /* [新しいタブで開く] */
/*      #placesContext_openContainer\:tabs,     /* [タブですべて開く] */
/*      #placesContext_openLinks\:tabs,         /* [タブですべて開く] */
/*      #placesContext_open\:newwindow,         /* [新しいウィンドウで開く] */
/*      #placesContext_open\:newprivatewindow,  /* [新しいプライベートウィンドウで開く] */
/*      #placesContext_openSeparator,   /* [区切り] */
/*      #placesContext_new\:bookmark,   /* [新しいブックマーク...] */
/*      #placesContext_new\:folder,     /* [新しいフォルダー...] */
/*      #placesContext_new\:separator,  /* [新しい区切り] */
/*      #placesContext_newSeparator,    /* [区切り] */
/*      #placesContext_createBookmark,  /* [ページをブックマークに追加] */
/*      #placesContext_cut,             /* [切り取り] */
/*      #placesContext_copy,            /* [コピー] */
/*      #placesContext_paste,           /* [貼り付け] */
/*      #placesContext_editSeparator,   /* [区切り] */
/*      #placesContext_delete,          /* [削除] */
/*      #placesContext_delete_history,  /* [ページを削除] */
/*      #placesContext_deleteHost,      /* [このサイトの履歴を消去] */
/*      #placesContext_deleteSeparator, /* [区切り] */
/*      #placesContext_sortBy\:name,    /* [名前順に並べ替える] */
/*      #placesContext_reload,          /* [ライブブックマークを再読み込み] */
/*      #placesContext_show\:info,      /* [プロパティ] */
    #context-dummy-dummy-dummy          /* ダミー */
{
  display: none !important;
}

/* 「…で検索: "…"」を削除 */
/* リンクを右クリックした場合、削除する。 */ 
/* 選択中のテキストがある場合、削除しない。 */ 
        #context-copylink:not([hidden]) ~ #context-copy[hidden] ~ #context-searchselect, /**/
    #context-dummy-dummy-dummy          /* ダミー */
{
  visibility: collapse !important;
} 

/* コンテキストメニューを削除(拡張機能用) */
/* @charsetとuserChrome.cssの文字コードに注意 */
    menuitem[label="Take a Screenshot"],        /* スクリーンショットを撮る */
    menuitem[label="スクリーンショットを撮る"], /* スクリーンショットを撮る */
/*  menuitem[label="NoScript"],                 /* NoScript */
    #context-dummy-dummy-dummy                  /* ダミー */
{
  display: none !important;
}

変更履歴

更新日 内容
2017/12/27 初版
2018/02/25 #context-sep-sendlinktodeviceを非表示で追記
リンクの区切りが2重になる問題を修正
2018/02/25 idなしの[区切り]を隣接セレクタを使用して追加
2018/03/04 @charsetを追加
2018/03/04 拡張機能のコンテキストメニュー削除を追加
ラベル名が判明している場合、同様の方法で削除可能
2018/03/07 ブックマークメニューを追加
2018/03/07 ブックマークの[タブですべて開く]を非表示で追加
ブックマークメニューの[タブですべて開く]は表示のままとする
2018/04/14 [Take a Screenshot]を非表示で追加
国際化対策のため
2018/04/18 [[-をweb検索]]の削除を追加
テキスト選択時は削除しない
2018/04/19 ブックマークを別ページへ移動
Firefox userChrome.cssのコードまとめ
2018/04/19 連続再生を表示で追加
漏れていたため
2018/04/19 タブですべて開くを表示で追加
漏れていたため
2018/04/19 以下の範囲のラベルがズレていたため修正
#context-sep-copylink,

#context-media-playbackrate,
2018/04/20 Added English version article.
Firefox Quantum context menu editing
2018/08/14 下記の項目を追加
#context-sendlink, #context-blockimage, #context-sendpage, #context-metadata, #context-spell-check-enabled,
ただし、筆者の環境では未確認の項目です。
Menus - Mozilla | MDN に記載があるため、追加する。
2018/12/12 Firefox64対応
Select All Tabs, タブをブックマーク…, Bookmark Tab, コンテナーを開きなおす, Move Tabを非表示で追加
2019/01/17 Firefox64対応、翻訳漏れを翻訳文字列に変更

備考

参考

 コメント: 13

匿名 さんのコメント... 

勝手にアップロードされてアドオンでコンテキストメニューを編集できなくて困っており、
とても役に立ちました。
ありがとうございます。

匿名 さんのコメント... 

userChrome.cssにこの記述をまるっとコピペしてFirefox(58.02)を再起動しても反映されません。。
何か考えられることはありますでしょうか?

toshi さんのコメント... 

考えられる可能性として以下の2点があります。
1. userChrome.cssの導入に問題があり、設定画反映されていない。
userChrome.cssに以下のコードを追加して、Firefoxの文字色が赤色になることを確認してください。

* {
color: red;
}

2. 標準テーマ以外を使用しており、コンテキストメニューのIDが標準と異なる
本ページの変更は、メニューのIDを使用して、IDの要素を非表示にしています。
そのため、メニューのIDが異なるとコンテキストメニューは非表示になりません。

テーマを標準とするか、ブラウザツールボックスを使用して、
対象Firefoxのコンテキストメニューを確認してください。
ラベル([タブを閉じる]等)で検索すれば、見つかるはずです。

[ブラウザーツールボックス - 開発ツール | MDN](https://developer.mozilla.org/ja/docs/Tools/Browser_Toolbox)


個人的な憶測ですが、[1.]である可能性が高いと考えます。
[2.]の場合、『一部意図したメニューが非表示とならない』動作になると考えます。
(独自テーマがメニューのIDすべてを変更しているとは考えにくいため)

匿名 さんのコメント... 

アドバイスありがとうございます。
お恥ずかしいのですが、結果的には私の失念で情報提供不足でした。。
自分が下記の設定を利用しており、firefoxのタブを消してツリー型タブ上のコンテキストメニューで確認していた為でした。
ttps://debuyoko.com/940

消していたFirefoxのデフォルトのタブ上のコンテキストメニューではしっかり反映されました。
ツリー型タブ上ではダメみたいなので、素直に諦めます。
ありがとうございました。

匿名 さんのコメント... 

Firefoxの右クリックの編集は他のサイトでも紹介されてますが、
行の先頭の文字を追加、削除で有効無効を切り替えるのはナルホドと思いました。
ところで

#context-savepage, /* [ページを Pocket に保存] */
#context-pocket, /* [名前を付けてページを保存...] */

81行目と82行目の項目の説明が逆ではないでしょうか?

toshi さんのコメント... 

> #context-savepage, /* [ページを Pocket に保存] */
> #context-pocket, /* [名前を付けてページを保存...] */
> 81行目と82行目の項目の説明が逆ではないでしょうか?
→ご指摘の通り、項目の説明が逆になっておりましたので、修正しました。
 ご指摘ありがとうござます。m(_ _)m

匿名 さんのコメント... 

これ順番は変えられるのでしょうか?
「タブを閉じる」を一番上にするだけで他は変えなくていいのですが……

匿名 さんのコメント... 

 使わないコンテキストメニューの機能を煩わしく思っていたので、ありがたく利用させて頂きました。
 コメントアウトしたのに機能するので頭抱えていましたが、コメントアウトすると機能するのですね。

toshi さんのコメント... 

申し訳ありません、コメントを見逃しておりました。

>> これ順番は変えられるのでしょうか?
>> 「タブを閉じる」を一番上にするだけで他は変えなくていいのですが……
→下記のCSSで特定のメニューを最上部へ移動することが可能です。(ただし、移動するメニューの直後に拡張機能で追加したメニューがある場合、拡張機能で追加したメニューが2番目に追加される動作となるようです)

#context_closeTab { /* 移動するメニュー */
-moz-box-ordinal-group: 0;
}

また、userChrome.jsで最上段に同一動作のメニューを新規追加する方法でも実現可能です(移動元のメニューは、非表示とする)。

>> コメントアウトしたのに機能するので頭抱えていましたが、コメントアウトすると機能するのですね。
→その通りです。コメントアウトすることで機能し、コメントアウトしないことでメニューを削除します。削除するメニューを列挙していると考えると納得できるのではないでしょうか。

匿名 さんのコメント... 

>また、userChrome.jsで最上段に同一動作のメニューを新規追加する方法でも実現可能です(移動元のメニューは、非表示とする)。

これはどうやればいいのでしょうか?

toshi さんのコメント... 

userChrome.jsは、保守が大変なため、自作するか使用者の多い既成品の使用をおすすめします。
『タブを閉じる』のコンテキストメニューを最上部に追加するuc.jsを自作するのであれば、下記のサイトを参考にすれば作成できると思います。
+ [Firefox userChrome.js用スクリプト:CopyTabTitleURL.uc.js - バグ取りの日々](http://www.bugbugnow.net/2018/02/CopyTabTitleAndURL.uc.js.html)
+ [SCRAPBLOG : [userChrome.js] 軽量マウスジェスチャで利用可能なスクリプト集](http://www.xuldev.org/blog/?p=76)

匿名 さんのコメント... 

#context-sendlink /* リンクのURLをメールで送信 */
#context-sendpage /* ページのURLをメールで送信 */
も追加お願いします。

toshi さんのコメント... 

> #context-sendlink, #context-sendpage
→追加しました。更新履歴の通りです。

 コメントを書く