ContentScriptを使って自作のGoogleChromeの拡張機能をつくろう
ContentScriptとは
contentscript とは、Google Chrome などのウェブブラウザーで動作する拡張機能の一種です。このスクリプトは、特定のウェブサイトやウェブページが読み込まれたときに実行されます。contentscript は、ウェブサイトの要素を操作したり、ユーザーのアクションに応じて処理を実行したりすることができます。例えば、contentscript を使うと、特定のボタンを押したときにアラートを表示したり、ウェブサイトの HTML を変更したりすることができます。
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を拡張機能として使えるようになります。
この記事が役に立ったと思った方はバッジをいただけると幸いです。
Discussion
contentscirptって結構前からあるけど最近知った。これを知ってると結構便利ですよね。