ChromeExtensionの作り方3週目は、ContentScriptsの説明です。
ContentScriptsとは、簡単に言うと今表示されているページにscriptを追加させる機能です。
<script type="text/javascript" src="xxx.js"><script>
表示されているページにこのタグが挿入されると思えばいいかと。
当然ですが表示されているページのタグをいじったりJSの関数も呼べます。うわあセキュリティ怖い。
manifestはこんな感じになります。
[javascript]
{
"manifest_version": 2,
"name": "content script sample",
"description": "change anchor tags to open new tab",
"version": "1.0",
"content_scripts" : [{
"matches": ["https://*/*"],
"js" : ["jquery-2.0.3.min.js", "content.js"]
}],
"icons" : {
"19": "icon.png"
}
}
[/javascript]
見ての通り、matchsに有効にしたいURLを入れてjsでどんなjsを読み込むかを設定します。
この場合はjqueryと独自スクリプトを読んでいますね。
今回content.jsの中身はこれだけ書いています。
[javascript]
$(function() {
$("a").attr("target", "_blank");
});
[/javascript]
すべてのaタグにtarget="_blank"を追加するスクリプトです。
これらをすべて入れたフォルダをChromeから読み込み、matchesの対象となったURLに対して、開発者ツールを開いてみてください。
SourceのContent Scriptsに今追加したjsが増えているのが分かるでしょう。
デバッグもここからできます。
今回はここまで。