Firefox Quantum (57以上) で使用不可になった 「Menu Wizard」の代替について考える。残念ながら、WebExtensions（Firefox 57+用のAPI）では、コンテキストメニュー編集系アドオンの作成はできないため、自分なりに代替してみた。
実現方法
いままでは「Menu Wizard」を使用してコンテキストメニュー編集していたが、よくよく考えるとコンテキストメニュー(右クリックメニュー)の削除しかしていないため、userChrome.cssを編集して、FirefoxのUIを直接変更して実現することにした。
（userChrome.cssを使用することで、Webページを「Stylish」や「Stylus」で編集する感覚で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_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;
}
/* [[-をweb検索]]を削除 */
/* リンクを右クリックした場合、削除する。 */
/* 選択中のテキストがある場合、削除しない。 */
#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 に記載があるため、追加する。 |
備考
メニュー項目の表示順序を編集する
メニュー項目の位置を変更したい場合、下記の方法があります。
別の方法
上記アドオンを使用するとGUI操作でuserChrome.cssを生成できます。メニューの削除用のuserChrome.cssがGUI操作で作成できます。ですが、筆者には合わなかったので使用はしていません。選択肢の一つとしての紹介に留めます。
コメント: 13
勝手にアップロードされてアドオンでコンテキストメニューを編集できなくて困っており、
とても役に立ちました。
ありがとうございます。
userChrome.cssにこの記述をまるっとコピペしてFirefox（58.02）を再起動しても反映されません。。
何か考えられることはありますでしょうか？
考えられる可能性として以下の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行目の項目の説明が逆ではないでしょうか？
> #context-savepage, /* [ページを Pocket に保存] */
> #context-pocket, /* [名前を付けてページを保存...] */
> 81行目と82行目の項目の説明が逆ではないでしょうか？
→ご指摘の通り、項目の説明が逆になっておりましたので、修正しました。
ご指摘ありがとうござます。m(_ _)m
これ順番は変えられるのでしょうか？
「タブを閉じる」を一番上にするだけで他は変えなくていいのですが……
使わないコンテキストメニューの機能を煩わしく思っていたので、ありがたく利用させて頂きました。
コメントアウトしたのに機能するので頭抱えていましたが、コメントアウトすると機能するのですね。
申し訳ありません、コメントを見逃しておりました。
>> これ順番は変えられるのでしょうか？
>> 「タブを閉じる」を一番上にするだけで他は変えなくていいのですが……
→下記のCSSで特定のメニューを最上部へ移動することが可能です。(ただし、移動するメニューの直後に拡張機能で追加したメニューがある場合、拡張機能で追加したメニューが2番目に追加される動作となるようです)
#context_closeTab { /* 移動するメニュー */
-moz-box-ordinal-group: 0;
}
また、userChrome.jsで最上段に同一動作のメニューを新規追加する方法でも実現可能です(移動元のメニューは、非表示とする)。
>> コメントアウトしたのに機能するので頭抱えていましたが、コメントアウトすると機能するのですね。
→その通りです。コメントアウトすることで機能し、コメントアウトしないことでメニューを削除します。削除するメニューを列挙していると考えると納得できるのではないでしょうか。
>また、userChrome.jsで最上段に同一動作のメニューを新規追加する方法でも実現可能です(移動元のメニューは、非表示とする)。
これはどうやればいいのでしょうか？
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をメールで送信 */
も追加お願いします。
> #context-sendlink, #context-sendpage
→追加しました。更新履歴の通りです。