LoginSignup
5

More than 3 years have passed since last update.

posted at

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5