The Nu Html Checker (v.Nu) を利用して HTML ページのチェックを行うユーザースクリプト。
「✔ メッセージなし」「⚠ Info または Warning のみ」「❌ Error あり」によって3パターンのアイコンを表示し、さらに Info 以上のメッセージがあるときはアイコン押下でメッセージを表示します。
① 当ユーザースクリプトをブラウザにインストールして適当なウェブページを開くと、画面の左下に ✔ / ⚠ / ❌ のいずれかのアイコンが表示されます。
② 開いているページの HTML に何かしらのメッセージがある場合（アイコンが ⚠ か ❌ の場合）、アイコンを押下するとバリデート結果が表示されます。バリデートは複数のサービスを使用しており（設定でカスタマイズ可）、チェック結果に差異が生じることもあります。下画像の例では、「“html”開始タグに“lang”属性の設定を検討せよ」の警告は https://validator.w3.org/nu/ でのチェックでのみ表示されています。
- デフォルトではブラウザで表示したすべての HTML ページでチェックが行われてしまいます。特定のドメインやディレクトリ配下のページだけで良いのであれば、負荷軽減のため @include や @match の設定を推奨します。
| キー | 解説 | 設定例 | 未指定時のデフォルト値 | 補足 |
|---|---|---|---|---|
| CHECKER_URL | バリデーターの URL リスト | ['https://validator.w3.org/nu/', 'https://validator.nu/'] | ['https://validator.w3.org/nu/'] | |
| FILTER_PATTERN | 除外するエラー、警告メッセージの正規表現文字列 | .*Unicode Normalization.*|.*appears to be written in.* | なし（空文字） | 参考ページ |
| TARGET_MIME | バリデートを行うページの MIME タイプ（ 'text/html; charset=utf-8' のような引数指定は不可） | ['text/html'] | ['text/html', 'application/xhtml+xml'] | |
| CONSOLE_TITLE | Console に表示する当機能名 | 任意の文字列 | '【HTML Validator】' | |
| CLASSNAME_PLEFIX | クラス名の接頭辞 | 任意の文字列 | 'htmlvalidator-' |
例えば Violentmonkey ではスクリプトのインストール後、「値」のタブからキーを設定することができます。
Firefox 81 + Violentmonkey 2.12.7 で動作確認しています。 Chrome などの他ブラウザでもたぶん動くと思います。
- 動作原理は hokaccha 氏の gm-html5validator を参考にしましたが、ソースコードはゼロから書き直しています。
- ✔ / ⚠ / ❌ のアイコン画像は Clker-Free-Vector-Images 氏が Pixabay に公開されているデータ を利用しています。