Chrome拡張 – Content Script

(Last Updated On: 2021-08-16)

Content Script

開いたWebページの読み取り/書き込みが可能
ページ上のスクリプトとは別スコープで実行される(isolated world)

制限

  • Chrome API の一部のみ利用可能
  • ページ内のDOMにはアクセス可能
  • ページ内の変数や関数にはアクセス不可(DOMにscript要素を追加してアクセスは可能)

必要なもの

  1. manifest.json 修正
  2. ContentScript用のjsファイル
  3. テスト用のhtml

manifestファイル修正

content_scripts 項目を追加する

  • matches、js は必須、内容はリスト
  • jsファイルが存在しなければエラー

matches のパターン https://developer.chrome.com/extensions/match_patterns

manifest.json

{
    "manifest_version": 2,
    "name": "で拡張2",    // 更新
    "description": "拡張2",    // 更新
    "version": "0.2",
    "browser_action": {
        "default_title": "初めて拡張2",    //更新
        "default_popup": "popup2.html",
        "default_icon": "icons/FontAwesome_f005(0)_48.png"
    },    // 更新

    "content_scripts": [            // 追加
        {                             // 追加
            "matches":["<all_urls>"],   // 追加、スクリプト実行のページを指定可能、今回は全てのページを指定
            "js": ["js/my_content.js"]  // 追加  実行するjs
        }                             // 追加
    ]                               // 追加
}

jsファイル

開発コンソールにログを出力
テスト用htmlのテキストエリアを取得、内容を追記

  • ◆日本語がある場合、文字コード utf-8 以外はエラーとなる

js/my_content.js

console.log("## Content Script ###");

let el = document.getElementById('tarea');
console.log(el);

el.value = 'content script からの書き込み!!';

el = document.getElementsByTagName('div');
console.log(el);

テスト用html

popup2 で作成したhtmlとほぼ同じもの
pc上にローカルファイルとして作成
もちろんpopupとは別物として扱われる

test.html

<!doctype html>
<html lang="ja">
<head>
    <link rel="stylesheet" href="css/bulmaswatch_flatly.min.css" />
    <script src="js/popup2.js"></script>
</head>
<body>
<div class="section">
    <div class="content">
        <span class="title">拡張2テスト</span>
        <span class="sub-title">テスト用html</span>
    </div>
    <div class="field is-grouped">
        <div class="control">
            <input class="button is-info" type="button" value="AAA" id="b_aaa" />
        </div>
        <div class="control">
            <input class="button is-primary" type="button" value="BBB" id="b_bbb" />
        </div>
        <div class="control">
            <input class="button is-success" type="button" value="Clear" id="b_clear" />
        </div>
    </div>
    <div class="field">
        <div class="control">
            <textarea id="tarea" class="textarea is-primary" rows="7"></textarea>
        </div>
    </div>
</div>
</body>
</html>

確認

  1. 拡張機能を読み込み、有効化
  2. テスト用htmlを開く
    拡張機能ページ
  3. F12キーで、開発コンソールを開く
  4. テスト用htmlを再読み込み
    拡張機能ページ
  5. console確認
    拡張機能ページ

テスト用html以外のページでもログ出力が確認できるが、
エレメント取得ができないのでエラーも出力される

参考

https://risaiku.net/archives/1653/
https://qiita.com/k7a/items/26d7a22233ecdf48fed8

環境

  • Windows7 Professional 64bit
  • Chrome バージョン: 79.0.3945.130(Official Build) (64 ビット)
  • アイコン作成、iconion、http://iconion.com/