【Chrome拡張機能】コンテンツスクリプト

satoshiii

対象読者

• Chromeの拡張機能について知りたい方
• コンテンツスクリプトについて知りたい方
• 表示中の画面に対してデータを取得したら、見た目を変える方法が知りたい方

コンテンツスクリプトとは？

現在表示中のページを構成しているDOM要素を読み込んだり、変更したりすることができます。

簡単にいうと、表示しているページの値を読み込んだり表示内容を変えたりすることができます。

サンプルと動作

拡張機能をインストールしてる状態で、以下のURLからGoogleを開くと、、、

https://www.google.co.jp/

こうなります。

DOM操作して、bodyのバックグランドカラーを無理やり黄色に変えることができます。

コードと解説

マニフェストファイル

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "content_scripts": [
    {
      "matches": ["https://www.google.co.jp/*"],
      "js": ["jquery-3.6.0.min.js", "myscript.js"]
    }
  ]
}

content_scripts

コンテンツスクリプトで使うために、これを指定する必要があります。

js：読み込ませたいjavascriptファイルを指定します。順番も影響出る可能性があるので、jquery→myscriptの順で読み込ませてください。

matches：matchesで有効になるURLを指定します。今回は、googleのURLを指定してます。

JavaScriptファイル

$(function() {
    $('body').css('background', '#000');
});

console.log("コンテンツスクリプトからのログ");

jQueryを使って背景色を黄色に変更しています。

なので、+でjqueryファイルが必要です。こちらURLを参考にダウンロードしてください

https://proengineer.internous.co.jp/content/columnfeature/12468

ファイル名は、「jquery-3.6.0.min.js」にしないとマニフェストファイルで読み込めないので注意してください。

まとめ

satoshiii

コンテンツスクリプトを使えるようになると

特定のサイトから必要な情報だけを取得したり、

自分の見やすいようにサイトの表示を自由に変えることができるようになります。

ソースコードはこちらを参照

https://github.com/satoNobu/chrome_ex/tree/content_script

他のChrome拡張機能についてはこちらにまとめています。

2022年3月21日【Chromeの拡張機能】開発 まとめ