Edited at

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) を指定

これで新規にページを開いた際に自動的にスタイルシートが適用されます。

スタイルシートを適用したいページをすでに開いていた場合はリロードします。