ブラウザでカスタムユーザースクリプトを作成・実行する方法

カスタムユーザースクリプトとブラウザ拡張機能は、開発者がウェブサイトと対話する方法に革命をもたらしました。反復的なタスクの自動化、煩わしい要素の削除、不足している機能の追加など、userscriptsは、サイト所有者が変更を実装するのを待たずにウェブを変更する強力な方法を提供します。

ブラウザユーザースクリプトとマネージャーの理解

Userscriptsは、特定のウェブページ上で実行され、その動作や外観を変更するJavaScriptファイルです。これらは、オンザフライで動作する軽量なブラウザ拡張機能と考えることができます。これらのスクリプトを実行するには、スクリプトの実行、保存、権限を処理するブラウザ拡張機能であるユーザースクリプトマネージャーが必要です。

ユーザースクリプトマネージャーの選択

Tampermonkeyは、Chrome、Firefox、Edge、Safariで1,000万人以上のユーザーを抱え、圧倒的なシェアを誇ります。オープンソース支持者には、Violentmonkeyが完全な透明性を持つ同様の機能を提供しています。オリジナルのマネージャーであるGreasemonkeyは、既存のスクリプトのほとんどとの互換性を破壊するAPI変更により、遅れをとっています。

Chromiumベースのブラウザでは、Tampermonkeyが最も安定して動作する傾向があります。Firefoxユーザーは、より軽量でプライバシー重視のViolentmonkeyを好むことが多いです。

最初のカスタムユーザースクリプトの作成

すべてのユーザースクリプトは、マネージャーにコードをいつどのように実行するかを伝えるメタデータブロックから始まります:

// ==UserScript==
// @name         My Custom Script
// @match        https://example.com/*
// @grant        none
// @version      1.0
// ==/UserScript==

(function() {
  'use strict';
  // Your code here
})();

@matchディレクティブは非常に重要です。これは、どのページがスクリプトをトリガーするかを決定します。より広範なマッチングが必要な場合は、シンプルなワイルドカードパターンに@includeを使用してください。@grantディレクティブはAPIアクセスを制御します。noneから始めて、必要に応じてGM_setValueやGM_xmlhttpRequestなどの権限を追加してください。

DOM操作の戦略

フレームワークは避けましょう。プレーンなJavaScriptの方が、ユーザースクリプトにとってより信頼性が高く高速です。主な課題はタイミングです。変更したい要素が存在する前にスクリプトが実行される可能性があります。

// Wait for specific element
const waitForElement = (selector) => {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }
    
    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });
    
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
};

// Usage
waitForElement('.target-class').then(element => {
  element.style.display = 'none';
});

MutationObserverは動的サイトの最良の味方です。DOM変更を監視し、それに応じて反応することで、ブラウザユーザースクリプトを悩ませるほとんどのタイミング問題を解決します。

デプロイ前のテスト

常にブラウザコンソールで最初にプロトタイプを作成してください。DevTools(F12)を開き、対象サイトに移動し、セレクターとロジックを直接テストします:

// Test your selector
document.querySelectorAll('.ad-banner').forEach(el => el.remove());

// Verify element properties
console.log(document.querySelector('#main-content').innerHTML);

動作したら、コードをユーザースクリプトテンプレートでラップし、シンプルなconsole.log()でスクリプトが読み込まれることを確認してテストします。この2段階のアプローチにより、デバッグの悪夢になる前にほとんどの問題をキャッチできます。

よくある落とし穴と解決策

競合状態は初心者を悩ませます。要素は非同期で読み込まれるため、スクリプトが早すぎるタイミングで実行される可能性があります。任意のタイムアウトではなく、MutationObserverまたはDOMContentLoadedイベントを使用してください。

クロスオリジン制限は、カスタムユーザースクリプトがアクセスできるものを制限します。@grant GM_xmlhttpRequest権限はAPI呼び出しのCORSをバイパスしますが、控えめに使用してください。

パフォーマンスは重要です。非効率なセレクターや過度なDOM操作は、ページを遅くする可能性があります。DOM更新をバッチ処理し、広範なセレクターよりも特定のセレクターを使用し、完了したらオブザーバーを切断してください。

現代のブラウザの制約

ChromiumブラウザのManifest V3はユーザースクリプトを殺していませんが、状況を変えました。ユーザースクリプトマネージャーは異なるAPIを使用することで適応し、互換性を維持しています。ただし、同期XHRリクエストなどの一部の高度な機能は永久に失われました。

モバイルブラウザは拡張機能のサポートを大幅に制限しています。Android版FirefoxとKiwi Browserのみが、Tampermonkeyを適切にサポートしています。iOSは依然として閉鎖的な環境です。Safariの限定的な拡張機能モデルは、従来のユーザースクリプトマネージャーをサポートしていません。

まとめ

ブラウザユーザースクリプトは、ウェブサイトが提供するものとユーザーが必要とするもののギャップを埋めます。シンプルに始めましょう。煩わしい要素を非表示にしたり、キーボードショートカットを追加したりします。ワークフローに慣れてきたら、より複雑な自動化に取り組んでください。オンデマンドで書き換えることができれば、ウェブは無限に柔軟になります。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.