Chrome で開いたページに任意のスタイルシートを適用する

以下は、Chrome 拡張を作成して、指定した URL に対して任意のスタイルシートを自動で適用する方法です。

プロジェクトディレクトリを作成する

$ mkdir -p user_defined_css/www.example.com
$ cd $_

マニフェストファイルを作成する

matches にスタイルシートを適用したい URL を指定。
css に適用するスタイルシートのファイル名を指定。

manifest.json

{
  "name": "www.example.com css",
  "version": "1.0",
  "description": "CSS for www.example.com",
  "content_scripts": [
    {
      "matches": ["http://www.example.com/*"],
      "css": ["style.css"]
    }
  ],
  "manifest_version": 2
}

適用したいスタイルシートを作成する

style.css

div {
  color: green;
}

ファイルツリー

以下の状態にします。

- www.example.com/
    - manifest.json
    - style.css

作成した Chrome 拡張を読み込む

1. chrome:extensions を開く
2. 右上にある「デベロッパー モード」を有効にする
3. 「パッケージ化されていない拡張機能を読み込む」をクリック
4. 最初に作成したディレクトリ (www.example.com) を指定

• 参考

これで新規にページを開いた際に自動的にスタイルシートが適用されます。
スタイルシートを適用したいページをすでに開いていた場合はリロードします。