Chrome機能拡張のコンテンツスクリプトについて


投稿日:2015年7月10日
  • 5
  • 22



表示中のページを変更を加えるにはコンテンツスクリプトを使う

google_extention_6

Chrome機能拡張の解説」第6弾。

現在表示中のページを構成しているDOM要素を読み込んだり、変更したりするにはコンテンツスクリプトを利用します。

解説の都合で紹介が遅れましたが、多くのプラグインで使われている機能です。


コンテンツスクリプトを利用した機能拡張を作成する

ちなみに現在表示中のページで読み込んだJavaScriptファイルとは別の空間で実行されるため、コンテンツスクリプト内で利用しているjQueryなどのライブラリがページと異なっていても問題ありません。

google_extention43

詳しくはContent Scriptsの公式ページをご覧ください。

例によって早速コンテンツスクリプトを利用した機能拡張を作成します。

manifest.json

Test Extention 13を作り、バージョンを1.3へ変更。
content_scriptsのセクションを追加

今回はmatchesで有効になるURLを指定。

jsで読み込むJavaScriptファイルを指定しました。複数ある場合はサンプルの通りカンマ区切りで追加します。
ちなみにhtmlで読み込む時と同様に読み込みの順序も重要です。この例ではjQueryから読み込むようにしています。

{
	"manifest_version": 2,
	"name": "Test Extention",
	"version": "1.3",
	"content_scripts": [
		{
			"matches": ["https://www.google.co.jp/*"],
			"js": ["jquery-2.1.3.min.js", "myscript.js"]
		}
	]
}

myscript.js

これが今回のコンテンツスクリプトです。
2つのJavaScriptが読み込まれたことを示すためにjQueryを使って、背景色を変更してみます。

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

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

Test Extention 13のダウンロード

機能拡張を読み込んだらhttps://www.google.co.jp/にアクセスしてみてください。
するとページを読み込んだ後に背景が真っ黒になります。

google_extention46

また、F12でデバッガを起動するとコンソールに「コンテンツスクリプトからのログ」が流れます。

このようにコンテンスクリプトのデバックは普通のWebページと同じように行います。

またhttps://www.google.co.jp/*以外のページでは動作しないことを確認してください。

マニフェストファイルに記述する配列についても一読しておいてください。ざっくり訳すと以下の通りです。

matches 必須 パターンを使って一致するURLでコンテンツスクリプトを有効にする。
exclude_matches オプション 一致するURLを除外する。
match_about_blank オプション blankやsrcdocでも有効にするかということのようだ。デフォルトはfalse。
css オプション CSSファイルを読み込む。
run_at オプション コンテンツスクリプトを実行するタイミングを指定する。document_startはページのDOMを読み込む前。document_endはDOM要素を読み込んだ後。document_idleはブラウザが決めたアイドル状態の後に実行。document_idleは時間差で実行する処理などは待たずにアイドルになることがあるので注意。デフォルトはdocument_idle。
all_frames オプション 普通は表示されている一番上のフレームのみ有効。全てのフレームに対して有効にしたい場合はture。デフォルトはfalse。
include_globs オプション “matches”から更に適用するパターンを指定する。
exclude_globs オプション “matches”から除外するパターンを指定する。

以上でざっくりではありましたがChrome機能拡張に追加できる機能について解説しました。
紹介した機能と公式ドキュメントにあるAPIを組み合わせれば自由に機能拡張を作成できると思います。

次の投稿では「機能拡張とGoogle Analyticsを連動する方法」を解説します。



現在のページを共有する



現在のページに関連する記事

Chrome機能拡張のコンテンツスクリプトについて Chrome機能拡張のイベントページについて
Chrome機能拡張のコンテンツスクリプトについて Chromeの機能拡張を作成して、ブラウザで読み込み、デバックする方法
Chrome機能拡張のコンテンツスクリプトについて Chrome機能拡張のバックグラウンドページについて
Chrome機能拡張のコンテンツスクリプトについて デベロッパー登録してChromeストアに機能拡張を公開する方法
Chrome機能拡張のコンテンツスクリプトについて 初めてでも理解できるようになる「Google Chrome機能拡張の開発」
Chrome機能拡張のコンテンツスクリプトについて Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について
Chrome機能拡張のコンテンツスクリプトについて Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する

おすすめの記事

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

本気で作りたい人向け、WordPressプラグインの作成方法

本気で作りたい人向け、WordPressプラグインの作成方法

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

サーバで管理していたWordPressをローカル環境に移行する方法

サーバで管理していたWordPressをローカル環境に移行する方法

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。