2017/12/26

Firefox Quantum (57以上) のメニュー編集の代替

公開日 2017/12/26

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

実現方法

「Menu Wizard」を使用してメニュー編集していたが、よくよく考えると削除しかしていないため、userChrome.cssを編集して、FirefoxのUIを直接変更して実現することにした。

userChrome.cssを使用することで、Webページを「Stylish」で編集する感覚で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ファイルを指定した文字コードで保存してください。

userChrome.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
/* ファイルの文字コードを設定 */
@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,/* ？ */
        #context-openlinkintab,         /* [リンクを新しいタブで開く] */
        #context-openlinkinusercontext-menu,    /* [リンクを新しいコンテナータブで開く] */
        #context-openlink,              /* [リンクを新しいウィンドウで開く] */
        #context-openlinkprivate,       /* [リンクを新しいプライベートウィンドウで開く] */
        #context-sep-open,              /* [区切り] */
        #context-bookmarklink,          /* [このリンクをブックマーク] */
/*      #context-savelink,              /* [名前を付けてリンク先を保存...] */
        #context-savelinktopocket,      /* [リンクを Pocket に保存] */
        #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-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-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-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,              /* [ページの情報を表示] */
/*      #spell-separator,               /* [区切り] */
/*      #spell-check-enabled,           /* [スペルチェックを行う] */
/*      #spell-add-dictionaries-main,   /* [辞書を追加...] */
/*      #spell-dictionaries,            /* [言語] */
/*      #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_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;
}
 
/* コンテキストメニューを削除(拡張機能用) */
/* @charsetとuserChrome.cssの文字コードに注意 */
    menuitem[label="スクリーンショットを撮る"],  /* スクリーンショットを撮る */
/*  menuitem[label="NoScript"],         /* NoScript */
    #context-dummy-dummy-dummy          /* ダミー */
{
  display: none !important;
}
 
/* ブックマークを削除 */
/*  #PlacesToolbar,                     /* ブックマークツールバー */
      #PlacesToolbar .bookmarks-actions-menuseparator, /* [区切り] */
      #PlacesToolbar .openintabs-menuitem,             /* [タブですべて開く] */
    #context-dummy-dummy-dummy          /* ダミー */
{
  display: none !important;
}

変更履歴

更新日 内容
2018/02/25 [タブを再読み込み]を非表示に変更
ショートカットや更新ボタンでこと足りたため
2018/02/25 [タブをミュート]を非表示に変更
タブ上にミュート切換えボタンがあるため
2018/02/25 [タブを閉じる]を非表示に変更
タブ上のクローズボタンでこと足りるため
2018/02/25 [リンクの URL をコピー]を表示に変更
個人的にURLコピーしたかったため
2018/02/25 #context-sep-sendlinktodeviceを非表示で追記
リンクの区切りが2重になる問題を修正するため
2018/02/25 idなしの区切りを隣接セレクタを使用して追加
2018/03/04 @charsetを追加
2018/03/04 拡張機能のコンテキストメニュー削除を追加
ラベル名が判明している場合、同様の方法で削除可能
2018/03/07 ブックマークメニューを追加
2018/03/07 ブックマークの[タブですべて開く]を非表示で追加
ブックマークメニューの[タブですべて開く]は表示のままとする

参考

広告

6 コメント:

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

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

2018/02/24 15:11
匿名 さんのコメント...

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

2018/02/25 10:45
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すべてを変更しているとは考えにくいため)

2018/02/25 12:26
匿名 さんのコメント...

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

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

2018/02/25 15:20
匿名 さんのコメント...

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

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

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

2018/03/31 6:21
toshi さんのコメント...

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

2018/03/31 18:08

コメントを投稿