2018-08-14T14:14:07Z

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

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

実現方法

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

(userChrome.cssを使用することで、Webページを「Stylish」やStylus」で編集する感覚でFirefoxのUIを編集することができます)

実現結果

動作 変更前 変更後
ページ enter image description here enter image description here
画像 enter image description here enter image description here
リンク enter image description here enter image description here
タブ enter image description here enter image description here

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 に記載があるため、追加する。

備考

メニュー項目の表示順序を編集する

メニュー項目の位置を変更したい場合、下記の方法があります。

userChrome.cssの一部を外部ファイル化する

肥大化したuserChrome.cssを分割したい場合、下記の方法があります。

別の方法

上記アドオンを使用するとGUI操作でuserChrome.cssを生成できます。メニューの削除用のuserChrome.cssがGUI操作で作成できます。ですが、筆者には合わなかったので使用はしていません。選択肢の一つとしての紹介に留めます。

参考

 コメント: 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
→追加しました。更新履歴の通りです。

コメントを投稿