Vivaldi - Windows の場合だけ特定のスタイルを適用する

Stylus を使ってよく見るサイトは独自スタイルを適用することがよくある。ヘッダー、フッター、サイドバーを消すとか。OS に依存しない場合はいいけど、レンダリングやディスプレイによって微妙に変えたい場合に対応できない。css で OS を判断して分岐できないから。Dropbox と連携して複数環境 (と言っても二台) で Stylus の設定を同期しているので、windows では適用したいけど mac では適用したくないなどがある。特にフォント周り。それぞれの os で同期したときだけ有効と無効を切り替えればいいかと運用してたけど、都度気になってしまうので効率が悪い。Stylus に同期しない設定を追加するような機能追加をすればいいかと思って実装していたけど、npm の実装に依存して対応できなさそうなので諦めた。PR 作るにしてもテストできる範囲は限られてるし。

Stylus じゃなくて Tampermonkey で個別に対応すればいいことに気がつく。以下。

// ==UserScript==
// @name         All Windows
// @namespace    http://tampermonkey.net/
// @version      2025-05-18
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.className = 'self-tampermonkey';
    style.textContent = `
    設定したいスタイル
  `;

    // body がまだ無い場合に備えて
    function insertStyleWhenReady() {
        if (document.body) {
            document.body.insertAdjacentElement("afterend", style);
        } else {
            new MutationObserver((mutations, observer) => {
                if (document.body) {
                    document.body.insertAdjacentElement("afterend", style);
                    observer.disconnect();
                }
            }).observe(document.documentElement, { childList: true, subtree: true });
        }
    }

    insertStyleWhenReady();
})();

また便利になった。