Chrome Extension の作り方 (その2: Contents Script)

[Chrome Extension の作り方 \(その1: 3つの世界\) \- Qiita](https://qiita.com/sakaimo/items/416f36db1aa982d8d00c)

の続き。

Content Scripts について説明します。

# できること

今ブラウザ上に表示されているページに対して、スクリプトを挿入してDOM操作(要素の追加、取得、編集、削除)ができます。

参考: [公式 content Scripts](https://developer.chrome.com/extensions/content_scripts) 

# 例1) 背景色を変える

例えば、特定のURL (http://example.com/ )の画面内の背景色を変えたいとします。

↓もとはこんな感じ。
![ex01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/016f810d-90b3-3f76-d713-0b62f0935ec8.png)


## ファイル構成

```:ファイル構成
content_scripts_test(フォルダ名は自由にどうぞ)
  └ content.js
  └ jquery-3.4.0.min.js
  └ manifest.json
```
↑フォルダの中に3つのファイルがある状態

## manifest.json

```json:manifest.json
{
  "manifest_version":2,
  "name":"いま表示されてる画面のDOMを操作する",
  "version":"1.0",
  "content_scripts":[
    {
      "matches":[
        "http://example.com/"
      ],
      "js":[
        "jquery-3.4.0.min.js",
        "content.js"
      ]
    }
  ]
}
```
↑ manifest.jsonの書き方の説明は省略


## content.js

```js:content.js
$(function() {
  console.log("コンテントスクリプトだよ");
  $('body').css('background-color','orange');
});
```
↑JQueryの説明も省略


# 実行する


Chromeで `chrome://extensions/` を開いて、 `contents_script_test`フォルダをドラッグ&ドロップすればインストール完了。

↓ こんな画面になるはず。念のため、この画面の右上にある「デベロッパーモード」がONになってることを確認しておいてください。

![ex03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/64565772-e7fc-49ef-d05b-68281d1b2d89.png)


この状態で `http://example.com/` にアクセスすると背景がオレンジになってるし、デベロッパーツール(Windowsなら`F12`, Macなら `command+option+i`) のconsoleにデバッグメッセージが表示されるはずです。↓

![ex04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/8b989394-d39a-faa9-0e31-a7cbdb1c10e9.png)


# 例2) DOM操作をする

その画面のDOMを好き勝手にできちゃうということなので、

- 特定の文字列をハイライトする
- 特定の文字列が含まれていたらalertを出す
- ボタンを追加してみる

などが可能です。 `content.js` を書き換えてみました。

```js:content.js
$(function() {
  console.log("コンテントスクリプトだよ");
  
  // example をハイライトする (文字の背景色を変える)
  const reg = new RegExp(/(example)/, "gi");
  const $bodyText = $("body").html();
  $("body").html(
    $bodyText.replace(reg, "<span style='background-color: lightblue'>$1</span>")
  );

  // permission が含まれていたらアラート出す
  if ($bodyText.match(/permission/i)) {
    alert("このページには [permission] という文字列が含まれています");
  }

  // 画面内にボタンを追加して、clickされたら何か処理させる
  $("div").append("<input type='button' value='送信' id='sendButton'>");
  $("#sendButton").click(function() {
    console.log('ボタンが押された');
    // ここになんらかの処理
    // 例えばページから特定の情報を取得してどっかのサーバーにPOSTするとかもできちゃう
  });
});
```

ハイライトの処理とか、ボタン追加の処理とか、もっとうまい書き方があるのかもしれないけれど、それはそれとして、ここではページのDOMをいろいろ変更できるよ、という例でした。

上記のコメント内に「ボタンを押したらPOSTする」が書かれていますが、逆に**「特定のページにアクセスしたら、どこかのサーバーからデータを取得して、そのデータをもとにページを書き換える」** なんてこともできます。

↓このエクステンションを実行するとこうなります。

指定した文字列が存在するのでアラートが上がり、
![ex05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/1d71c9f3-3474-62c7-5baf-0339b200c0f0.png)


↓ ハイライトされます。ボタンを押すとconsoleにログがでます。

![ex06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/17449adc-0d83-aec1-c616-bcdf1e96bcd1.png)


# Content Scriptsではできないこと

[Content Scripts](https://developer.chrome.com/extensions/content_scripts) にあるように、「アクセスできるAPIが制限されている」ので、「やりたいことができない」可能性があります。

例えば `Content Scripts` は `tabs` のAPIにアクセスできないため、「現在Chromeで開いている全てのタブのタイトルとURLを取得する」ことはできません。

これらのAPIを全て使えるのが `Event Page (Background Page)` になります。
さらに `Content Scripts` と `Event Page (Background Page)` を通信させることで、`Event Page (Background Page)`で取得した情報を `Content Scripts` の中で使うことも可能になります。

このあたりの例は次の次くらいで例をあげたいと思います。

# 連載リンク

[Chrome Extension の作り方 \(その1: 3つの世界\) \- Qiita](https://qiita.com/sakaimo/items/416f36db1aa982d8d00c)
[Chrome Extension の作り方 \(その2: Contents Script\) \- Qiita](https://qiita.com/sakaimo/items/6b7b464de4bdcad18802)
[Chrome Extension の作り方 \(その3: Browser Action / Page Action\) \- Qiita](https://qiita.com/sakaimo/items/129a785146e5873c42a6)
[Chrome Extension の作り方 \(その4: Event Page / Background Page\) \- Qiita](https://qiita.com/sakaimo/items/edd910a770b3d5ba83e3)
[Chrome Extension の作り方 \(最終話: メッセージパッシング\) \- Qiita](https://qiita.com/sakaimo/items/5e41d6b2ad8d7ee04b12)