拡張機能から表示中のウェブページに対して操作を行いたい場合,content scriptを使う.

content scriptからであればウェブページのDOMの編集を行える.

今回はシンプルに表示中のウェブページの''要素内に'

'を追加するだけのシンプルなものを作る.

目的はcontent scriptからDOMを操作する最小限の構成を確認すること.

Chrome拡張の作り方については以下の記事がとてもわかり易かった.

公式のページと合わせて参考にすると良いと思う.

qiita.com

拡張機能の作成

拡張機能はを作るときはまずは適当にフォルダを作成して,そこにmanifest.jsonファイルを作成します.

ここがスタートです.

また,説明の中で使用されているファイル名は決まったものではなく,自由に決めて良いものです.

manifest.json

拡張機能の構成,設定の全てはここに記述する.

ここに書いてあるとおりにJavaScriptファイル,画像ファイル,HTMLファイルなどのリソースが読み込まれるし,必要なパーミッションが与えられる.

フォルダ構成もこのmanifest.jsonファイルのパスを起点として自由に設定,配置すればよい.

とにかく,ここに記述したパスにそのファイルが存在すればよい.

{
    "manifest_version":2,
    "name":"Content Script Basic",
    "description": "Content Scriptの最小限の構成を確認する",
    "version": "1.0.0",

    "content_scripts": [
        {
          "run_at":"document_end",
          "matches": ["<all_urls>"],
          "js": ["content_script.js"]
        }
      ]
}

上の例の前半部分は拡張機能の名前やバージョンといった情報が記述している.

content scriptを使用するためには下側のcontent_scriptsの部分を記述する必要がある.

    "content_scripts": [
        {
          "run_at":"document_end",
          "matches": ["<all_urls>"],
          "js": ["content_script.js"]
        }
      ]

このcontent scriptはページがロードされるときに実行されるのだが,そのタイミングを指定できる. それがrun_at.

DOMの操作をする場合はHTMLが読み込まれてDOMが構築されてからcontent scriptが実行されるようにrun_atで明示する.

matchesはcontent scriptが実行されるページをglob(*や?などのワイルドカードを使って文字列のパターンを表現するもの)で指定することができ,指定に当てはまるURLのページでのみcontent scriptが実行されるようにできる.

以下のように指定する.

developer.mozilla.org

すべてのURLを表す<all_urls>を指定しているので,特殊なサイト以外はすべてのウェブページでこのcontent scriptが実行される.

jsでcontent scriptとして使用するJavaScriptファイルのパスを指定する.これは配列で複数指定できる.パスの起点となるのはmanifest.jsonファイルで,そこからの相対パスで記述する.

今回はmanifest.jsonファイルと同じフォルダ内にcontent_script.jsファイルを作成してある.

content_script.js

このcontent_script.jsファイルの内容は以下のようにbody要素の背景色を赤に変えるだけのもの.

(function () {
    document.body.style.backgroundColor = "red";//背景色を赤にする
})();

ここまででcontent scriptを使う拡張機能は完成で,非常に簡単.

Chromeへのインストール

Chrome(Chromium版のEdgeでも可)にインストールする.

開発者モードにする

まずはChromeで開発者モードにする.

ChromeのURL欄にchrome://extensionと入力する.

Edgeの場合は当然edge://extensionsである.

すると拡張機能のページが開くので,右上の｢開発者モード｣をオンにする.

自作拡張機能を読み込む

｢Load Unpacked｣というボタンを押し,読み込みたい拡張機能のフォルダを指定する.

問題がなければ以下のようにインストールされて拡張機能として表示される.

試してみる

以下のURLを自作拡張機能がインストールされたブラウザで開く.

example.com

すると,ページがロードされるとともに背景色が赤になった.

content scriptが動作していることが確認できた.

まとめ

拡張機能の中でcontent scriptは表示されているウェブサイトのDOMを操作する役割を担うもの.

上記のようにmanifest.jsonファイルにcontent scriptとして使用するJavaScriptファイルを指定するだけで使える.