カスタムルール
カスタムルールは、組み込みルールがカバーしていないサイトを補完したり、新しいルールが信頼できるかどうかをローカルで先に検証するために使用します。
フォームの入力
| フィールド | 必須 | 説明 |
|---|---|---|
| 技術名 | はい | ポップアップに表示される名前。例：MyCMS |
| カテゴリー | 組み込みの 23 カテゴリーから選択するか、独自のカテゴリーを入力する。デフォルトは「その他のライブラリ」。Select コンポーネントは自由入力に対応しており、カテゴリーリストにないものも入力できる | |
| 種類の説明 | 自分用のメモ。例：企業 CMS・サードパーティ決済。evidence のプレフィックスとして表示される。空白可 | |
| 信頼度 | 高 / 中 / 低。デフォルトは「中」 | |
| マッチ方法 | キーワード / 正規表現。デフォルトは「正規表現」 | |
| 公式サイト / リポジトリ URL | http:// または https:// で始まる必要がある。入力するとポップアップで技術名がクリック可能になる |
下部には 4 つのエリアがあります：
マッチ範囲：下記の patterns / selectors / globals がどのデータソースでマッチングされるかを決定する
- ページ URL：現在のウェブページのアドレス
- リソース URL：スクリプト / スタイル / iframe が読み込んだリソース
- DOM / ソースコード：ページの outerHTML
- レスポンスヘッダー：メインドキュメント + API + iframe のレスポンスヘッダー
- 動的リソース：MutationObserver が継続的に蓄積したリソース
マッチルール（patterns）：1 行に 1 件。キーワードモードではリテラル文字列の包含マッチ。正規表現モードでは JS の正規表現ソース（
/.../iの囲みは不要。i フラグは拡張機能が自動付加）CSS セレクター（selectors）：1 行に 1 件。例：
[data-v-app]・#__next。マッチ範囲に「DOM / ソースコード」が含まれている必要があるグローバル変数（globals）：1 行に 1 件。例：
React・Vue.config・__NEXT_DATA__。マッチすると高信頼度
追加 / 更新
- ルールを追加（緑色のメインボタン）：現在のフォームを新しいルールとして保存
- 現在のルールを更新：右下のリストで編集したいルールをクリックして「編集モード」に入り、変更後にこのボタンで保存
最終的にページ右上の「設定を保存」をクリックしなければ、ルールはストレージに書き込まれません。
追加済みルールのリスト
ページ下部に表示され、各ルールには以下が含まれます：
- タイトル：ルールの技術名
- メタ情報：カテゴリー · 種類 · 信頼度 · マッチ方法 · N 件の patterns
- 操作：「編集」「削除」の 2 ボタン（削除ボタンはホバーで赤くなる）
ルールの検証
追加 / 更新 / 設定を保存するたびに、以下の検証が行われます：
- 名前が必須
- patterns / selectors / globals のいずれか 1 つ以上が必要
- マッチ範囲が少なくとも 1 つ選択されている
- url フィールドを入力する場合は http(s)😕/ で始まる必要がある
- patterns（正規表現モード）の各行が
new RegExpを通過できる - selectors の各行が
document.createDocumentFragment().querySelectorを通過できる - globals の各行が
MyCMSまたはgoogle.mapsのようなドット区切りの変数名に一致する
検証に失敗すると赤いツールチップが表示され、最大 6 件の問題が列挙されます。
例：シンプルなキーワード
ExampleCMS を検出する：
text
技術名: ExampleCMS
カテゴリー: CMS / ウェブサイトプログラム
マッチ方法: キーワード
マッチルール:
examplecms
X-Generator: ExampleCMS
マッチ範囲: [x] ページ URL [x] リソース URL [x] DOM / ソースコード [x] レスポンスヘッダー例：WordPress テーマを検出する
text
技術名: WordPress テーマ: oceanwp
カテゴリー: テーマ / テンプレート
マッチ方法: キーワード
マッチルール:
/wp-content/themes/oceanwp/
マッチ範囲: [x] リソース URL [x] DOM / ソースコード例：動的に読み込まれる決済 SDK を検出する
決済ボタンをクリックした後にスクリプトがリクエストされるため、「動的リソース」にチェックを入れます：
text
技術名: ExamplePay
カテゴリー: 決済システム
種類の説明: サードパーティ決済
マッチ方法: キーワード
マッチルール:
pay.example.com
examplepay-sdk
マッチ範囲: [x] 動的リソース例：正規表現でバージョン番号付きライブラリファイルを検出する
text
技術名: ExampleLib
カテゴリー: フロントエンドライブラリ
マッチ方法: 正規表現
マッチルール:
examplelib-[0-9.]+\.min\.js
マッチ範囲: [x] リソース URL [x] 動的リソース誤検知を減らす
app・main・loginのような汎用すぎるキーワードは使わない。ほぼすべてのサイトに含まれるpayではなく完全なドメインpay.example.comを優先するoceanwpではなく特定のパス/wp-content/themes/oceanwp/を優先する- 確信が持てない場合は信頼度を「低」に設定する。ポップアップにグレーのバッジが表示され、これは推測に過ぎないことが示される
- ルールを保存した後は必ず対象ウェブページを更新してからポップアップを開いて効果を確認する。そうしないとキャッシュが古いままになる