36
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-06-28

Chrome Extension の作り方 (その1: 3つの世界) - Qiita

の続き。

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

できること

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

参考: 公式 content Scripts

例1) 背景色を変える

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

↓もとはこんな感じ。
ex01.png

ファイル構成

ファイル構成
content_scripts_test(フォルダ名は自由にどうぞ)
  └ content.js
  └ jquery-3.4.0.min.js
  └ manifest.json

↑フォルダの中に3つのファイルがある状態

manifest.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

content.js
$(function() {
  console.log("コンテントスクリプトだよ");
  $('body').css('background-color','orange');
});

↑JQueryの説明も省略

実行する

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

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

ex03.png

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

ex04.png

例2) DOM操作をする

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

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

などが可能です。 content.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

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

ex06.png

Content Scriptsではできないこと

Content Scripts にあるように、「アクセスできるAPIが制限されている」ので、「やりたいことができない」可能性があります。

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

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

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

連載リンク

Chrome Extension の作り方 (その1: 3つの世界) - Qiita
Chrome Extension の作り方 (その2: Contents Script) - Qiita
Chrome Extension の作り方 (その3: Browser Action / Page Action) - Qiita
Chrome Extension の作り方 (その4: Event Page / Background Page) - Qiita
Chrome Extension の作り方 (最終話: メッセージパッシング) - Qiita

36
28
0

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
  3. You can use dark theme
What you can do with signing up
36
28

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?