Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

以下は、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) を指定

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

dhomma
JavaScript と Standard ML が好き
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした