ユーザースタイルシートを適用する拡張機能を自作してみる

Web ページに外部スタイルシートを適用する Chrome 拡張は有りますが、使い慣れたエディターで編集したかったり、そもそも外部拡張機能を入れたくないという事で、ユーザースタイルシートを適用する拡張機能の自作に挑戦してみます。

Chromium 拡張を自作

最低限用意するファイルは manifest.json ファイルと .css ファイルの2種類。
ローカルにフォルダーを作って、そこに2つのファイルを入れてブラウザに読み込ませれば拡張機能として動作します。
ほぼ最低限のソースで自作に挑戦します。

manifest.json(全ページに適用)

{
  "name": "User CSS",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["all.css"]
  }]
}

name と .css のファイル名は任意で。manifest.json として保存します。

manifest.json(特定のページに適用)

{
  "name": "User CSS",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["https://*.example.com/*"],
    "css": ["example.css"]
  }]
}

name と .css のファイル名は任意で。manifest.json として保存します。
"matches"のルールは複数指定したい場合は「,」で区切って ["https://*.example.com/*","http://*.example.com/*"] の様に記述出来ます。

manifest.json(複数のスタイルシートを適用)

{
  "name": "User CSS",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["all.css"]
  },
  {
    "matches": ["https://*.example.com/*"],
    "css": ["example.css"]
  }]
}

name と .css のファイル名は任意で。manifest.json として保存します。
複数のルールを「,」で繋げて追加して行きます。最後は「,」は要りません。

この場合、全てのページに all.css のスタイルシートが適用され、example.com のページには、all.css と example.css の2つのスタイルシートが適用されます。

CSSファイル

manifest.json のソース内で指定したファイル名、ここでは all.css と example.css として manifest.json と同じ階層に作成します。
ファイルの中身は直接そのままCSSコードを記述すれば良い様ですが、「!important」を付けないと適用されないかもしれません。

拡張機能として読み込ませる

Microsoft Edge の場合、拡張機能の管理ページを開き、「開発者モード」にチェックを入れて、上記作成したファイルの入ったフォルダーを管理ページ上にドラッグ&ドロップします。
構文エラーが出る時は何行目に問題が有るかも教えてくれるので修正して再度アップします。
読み込みに成功すれば、以後ローカルでCSSファイルを編集すると、ブラウザを再起動する度に自動的に変更が適用されます。