macOS版 Firefox のコンテキストメニューを編集する

2021/11/20

本記事は、「Firefox のコンテキストメニューを編集する」の記事を前提としています。

macOS におけるコンテキストメニュー編集の問題

Firefox90 から macOS 版の Firefox は、ネイティブコンテキストメニューに対応しました。それにより、コンテキストメニューがネイティブ機能で動作するように変更されました。

ですが、ネイティブコンテキストメニュー対応により、コンテキストメニュー関連へCSSが適用されない仕様となりました。これにより、 userChrome.menus.css によるコンテキストメニュー編集が動作しなくなっていました。

簡易の回避策（about:config）

ネイティブコンテキストメニューを使用しない、元々のコンテキストメニューを使用することで問題を回避できます。ただし、表示の美しさはある程度損なわれます。

about:config で widget.macos.native-context-menus を false に設定する。
もしくは、user.jsに次のコードを追加する。

user.js// macOS のネイティブコンテキストメニューを使用する (default:true)
user_pref('widget.macos.native-context-menus', false);

userChrome.js で対応する

次のユーザースクリプトを使用する。

macOSNativeContextMenuHidden.uc.js// ==UserScript==
// @name          macOSNativeContextMenuHidden.uc.js
// @description   Apply CSS hiding to native context menus in macOS.
//                It assumes that the user is using userChrome.menus.css.
//                Native context menu in macOS (widget.macos.native-context-menus).
//                Native context menus have been supported by default since Firefox90.
// @include       main
// @charset       UTF-8
// @author        toshi (https://github.com/k08045kk)
// @license       MIT License | https://opensource.org/licenses/MIT
// @version       1
// @since         1 - 20211120 - 初版
// @see           https://github.com/k08045kk/userChrome.js
// @see           https://github.com/k08045kk/userChrome.menus.css
// ==/UserScript==

(function() {
  document.addEventListener('popupshowing', (event) => {
    const menupopup = event.target;
    const query = 'menupopup, menugroup, menuitem, menu, menuseparator, toolbarbutton';
    menupopup.querySelectorAll(query).forEach((item) => {
      const cssStyleDeclaration = window.getComputedStyle(item, null);
      const display = cssStyleDeclaration.getPropertyValue('display');
      item.hidden = display == 'none';
      // Note: macOS のネイティブコンテキストメニューでは、CSSが適用されないため、
      //       hidden 属性で非表示にする。
      // Note: 対象コンテキストメニューを事前に削除（display: none !import;）する必要があります。
      //       （userChrome.menus.css の使用を前提としています）
    });
  });
  // Note: 問題が発生した場合、問題を指摘してください。
  //       作者は、MacOS版 Firefox を愛用していないため、問題に気づくことはありません。
}());