Content Scripts

開発 > Chrome Extension > Content Scripts

特定のページにアクセスしたら自動的に実行される。

適当なフォルダを作成する

manifest.json と JavaScript を置く。
必要に応じて各種リソース(画像やテキスト)と css を置く。

例)
manifest.json
jquery-1.12.0.min.js
main.js
default.css

manifest.json

文字コードを UTF-8 にする必要がある。
version に 0 ~ 65536 の数字とドット以外は使えなくなっていた。(2018/08/15 確認)
"js" はおそらく書いた順に実行するので、jquery を使ったスクリプトを書く場合は jquery を先に記述する必要がある。

{
    "manifest_version": 2,
    "name": "サンプル",
    "version": "1.0",
    "content_scripts": [{
        "matches": [
            "http://http://5xbook.wiki.fc2.com/"
        ],
        "css": [
            "default.css"
        ],
        "js": [
            "jquery-1.12.0.min.js",
            "main.js"
        ]
    }],
    "web_accessible_resources": [
        "sample.txt"
    ]
}

フォルダを拡張機能として読み込ませる

その他ツール > 拡張機能 > パッケージ化されていない拡張機能を読み込む
成功すれば拡張機能の一覧に追加したものが表示される。
※デベロッパーモードを有効にしておかないと失敗するかも。

web_accesible_resources のファイルにアクセスする方法

外部テキストを <body> に挿入する場合
    $("body").load(chrome.extension.getURL("sample.txt"));

自作関数を実行するリンクを挿入する (要 jquery)

id が bar の要素にクリックすると originalFunction を実行するリンク foo を挿入。
    var link = $('<a>').html('foo').click(originalFunction());
    $("#bar").append(link);

タグ ul のクラス bar に挿入。
    var link = $('<a>').html('foo').click(originalFunction());
    $("ul.bar").append(link);

  • 最終更新:2018-08-15 15:22:21

このWIKIを編集するにはパスワード入力が必要です

認証パスワード