ContentScriptを使って自作のGoogleChromeの拡張機能をつくろう

ContentScriptとは

contentscript とは、Google Chrome などのウェブブラウザーで動作する拡張機能の一種です。このスクリプトは、特定のウェブサイトやウェブページが読み込まれたときに実行されます。contentscript は、ウェブサイトの要素を操作したり、ユーザーのアクションに応じて処理を実行したりすることができます。例えば、contentscript を使うと、特定のボタンを押したときにアラートを表示したり、ウェブサイトの HTML を変更したりすることができます。

Amazon | Samsung T7 Shield 1TB 外付けSSD 最大転送速度1,050MB/秒 USB3.2 Gen2(10Gbps, Type-C) PS4 PS5 MU-PE1T0R-IT/EC 国内正規品 | 日本サムスン | パソコン・周辺機器 通販

ContentScriptでクロームの拡張機能を作るにはまずmanifest.jsonを作成する

manifest.jsonは、Chromeの拡張機能を定義するための設定ファイルです。manifest.jsonは、JSON形式で記述されます。manifest.jsonには、拡張機能の名前やバージョン、説明、拡張機能がどのようなWebページで動作するかなどの情報が記述されます。

以下は、manifest.jsonの例です。

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "This is my first Chrome extension.",
  "content_scripts": [
    {
      "run_at":"document_end",
      "matches": ["https://www.google.com/*"],
      "js": ["contentscript.js"]
    }
  ]
}

上記の例では、拡張機能の名前が「My Extension」、バージョンが「1.0.0」、説明が「This is my first Chrome extension.」です。そしてcontentscriptがいつ実行されるのかを明示するのが「run_at」です。
そして、拡張機能がGoogleのWebページhttps://www.google.com/*
で動作することが「matches」で定義されています。また、contentscript.jsというJavaScriptファイルが拡張機能で使用されることも定義されています。

contentscriptを拡張機能にするにはどうしたらいいですか？

拡張機能を作成するには、まずディレクトリを作成します。

content_scripts_test(フォルダ名は任意です)
  └ content.js
  └ contentscript.css
  └ jquery-3.4.0.min.js
  └ manifest.json

ディレクトリを作成したらchrome://extensions/ にアクセスします。ここで「パッケージ化されてない拡張機能を読み込む」をクリックして作成したディレクトリをアップロードします。これで自分が作成したcontentscriptを拡張機能として使えるようになります。

この記事が役に立ったと思った方はバッジをいただけると幸いです。