Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@dhomma

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
5
Help us understand the problem. What is going on with this article?