Chrome Extensionの作り方講座その3・ContentScriptを使ってみる

ChromeExtensionの作り方3週目は、ContentScriptsの説明です。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
Chrome Extensionの作り方講座その7・bookmark APIを使う



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": ["http://*/*", "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が増えているのが分かるでしょう。
デバッグもここからできます。

content_script2

今回はここまで。

Chrome Extensionの作り方講座その1・用語とか
Chrome Extensionの作り方講座その2・BrowserActionを使ってみる
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる
Chrome Extensionの作り方講座その5・Event Page(Background Script)を使う
Chrome Extensionの作り方講座その6・omniboxを使う
developer.chrome.com/extensions

Author Info(オガティ

エンジニアとして勤め、インフラ周りの開発を経た後Web業界へ異動。
プライベートでもブログ「ogatism」の運営や電子書籍の執筆、占星術師としての活動など幅広い分野で活動中。
詳細はこちら

占い鑑定レポート作成サービス受付中

◆ ogatismをFeedlyに登録 ◆
follow us in feedly